Simply including the files into a template page does not work (not trying to load it as a plugin obviously).

Even wrapping the code [bootslider.js] in (function($){...})(jQuery) does not allow it to work.. error log shows:

ReferenceError: bootslider is not defined var slider = new bootslider(’#bootsliderContent’, {

Did you try using wp_enqueue_script() as well? I haven’t tried using it in WP yet, I’m planning to create a plugin in the near future.

Try doing the following:

<div style="position:absolute; top: 0; left: 0;" />

I think this would work, as I don’t see any other thing that could interfere with the slider’s functionality.

Hi Alex, we have a winner! We updated all assets with the latest version of the slider and placed the extra design elements in a div outside of the slider with great success!

FYI: we have noticed Firefox has a couple of slight issues: there is extra padding added to the bottom of the page, which can be scrolled vertically, sometimes horizontally depending on the browser size. Also the extra content we have added seems to jump upwards on every transition. Only seems to do this in Firefox, just to let you know.

Thank you once again for your replies and assistance. Very much appreciated!

.bs-container, .bootslider{
    overflow: hidden!important;
}

Also, add the

 clearfix 

And then, remove the data-animate-in and data-animate-out from the slides, otherwise, it will set a blank animation instead of the fadeIn you want.

setTimeout(function(){
$(window).trigger('resize');
}, 1000);

Hope it helps!

I’ll look into it as soon as I get home. There shouldn’t be any compatibility problems, though. Thank you for letting me know.

Yes, of course. Everything the slider uses can be styled and is marked with simple CSS classes. Thank you in advance for your purchase!

Hi Patty, You have complete control over the thumbnails and the rest of the slider via CSS. You will have to change a little bit of the JS part as well if you want to fit them in a vertical div with variable number. I’ll help you with that if you need it, of course. Thank you for your interest!

Thanks for the quick response.

I’ll include IE8 support in a future update. However it does not support CSS3 transitions, so it will have no animations on the content, unfortunately.

Sorry for the inconvenience!

Hi Paul, I’ve implemented the “Refresh” so that the video will stop playing after the slide is finished, no matter what the source is. If you use only youtube or vimeo as video sources, I can help you to pause or autoplay the video by implementing the API. Is that what you’re trying to achieve?

Thank you, I’m really glad you’re happy with it!

Alex, yeah that figures, the problem is that autoplay video also starts when another slide is becoming active. I would indeed be really nice if using Youtube & Vimeo I could make the video play only when the slide becomes active. You could help me with that?

I can help, however it’s going to be a little more complicated than the usual slider customization.

First of all, in the bootslider.js file you have a method called self.gotoslide(index).

// Here you will have the slide number which contains the video
// The count starts from 0, so the second slide will be 1, third will be 2
// and so on
if(index == 4){
//replace youtubeiframeid with the id="" you gave to your video
var myVideo = document.getElementById('youtubeiframeid');
myVideo .playVideo();
}

//Include youtube API
<script src="http://www.youtube.com/player_api"></script>

I haven’t tested this, but it should work. Hope it helps!

Sure thing. My email address is alex[at]grozav.com Feel free to send them in anytime.

Hi Alex, I would like to ask you another question. On the screen with the 1440×900, 1366×768 and other resolutions, my images of 1920pxx820px are somehow cut in bottom while in your demo, all images are visible well. How should I modify css or image sizes to achieve the same result – to have all the images fully visible? I look forward to hearing from you soon. Thank you in advance for your kind assistance

Hey! Are you using the same size for all of the images? Send me the files to have a look at them again.

Hi yohored, really glad you like the slider! A new version will be out soon. Please send me a demo for mobile testing. I’m guessing it’s a preventDefault() problem. I’ll be able to give you a solution after that. Thank you for purchasing!

I just send you a message please check, thanks again

Hi yohored, please send me the the video you were talking about. Thank you!

IE8 doesn’t support jQuery’s load function very well. You could try replacing the loading code with a javascript alternative like this:

$('.bs-background img').each(function() {
            var src = $(this).attr('src');
            var preloadedImage = $(new Image()).attr('src', src);
            preloadedImage.load(function() {
//LOTS OF CODE
                });
});

$('.bs-background img').each(function() {
var src = $(this).attr('src');
var preloadedImage = new Image();

img.onload = function() {
     // COPY THE LOTS OF CODE
}

img.src = src;
});

This solution was found on stackoverflow and has not been tested. I’m not at home this week, therefore I cannot test it myself. Hope it helps!

One more question. How to speed down the animations?

For example “fadeIn”

You will need to open the animate.css file and set the animation time manually. For example:

.fadeIn{
    -webkit-animation-duration: 1s !important;
    -moz-animation-duration: 1s !important;
    -ms-animation-duration: 1s !important;
    -o-animation-duration: 1s !important;
    animation-duration: 1s !important;
}

Thank you tnylea! Glad you like it!

Thank you very much gahc!

Thank you houlihandy! I’m sure you’ll enjoy using it!

Hi RedhopIT, thank you very much for that! I’ll definitely keep them coming!

Glad you like it, Charlie!

Thank you ziyaddin!