Discussion on Bootslider - Responsive Bootstrap CSS3 Slider

Discussion on Bootslider - Responsive Bootstrap CSS3 Slider

Cart 547 sales

Grozav does not currently provide support for this item.

77 comments found.

Bonjour / Hi!

We’re having issues with bootslider script when we try to view more than 60 slides… 58, 59, 60 slides work great… but 61… we’re getting a blank page. In our source code, we can see all the slides (61 or more…) ... but screen stay white.

Is it a license limitation, or server load capacity?

Any help will be appreciate. Tx :)

Hi there! I have a doubt: Can the plugin work with only one image? I have to figure out what to do when I have only one image for a given place in the site, so… Can it work as a static image with no sliding? The captions will be useful. Thank you!

Hi, any plans to make it work with jQuery 3? Thank you.

Hi gekus, I am currently working on other non-envato related projects which require my full attention, but as soon as I am done with them I will start providing updates for Bootslider. I will definitely put your request on my features list. Thank you for your suggestion!

Thanks for your answer! I switched to JQuery 2 in the meantime.

What is the difference between this slider and your Slidea? Which one is better?

To expand on what I am asking, I purchased Slidea but I am currently building the site with Bootstrap and I wondering if maybe this plugin would be better.

Hello gr8graphix,

Slidea is my newest slider plugin and is much more feature rich and optimized than Bootslider. Because the syntax is completelly different, and the entire code base has been rewritten, I could not release it as an update for Bootslider.

You made the right choice, thank you very much!

Just purchased a licenses, but i only can download version 2.2 I really need the Update 2.3 because of the single slide fix. Any ideas why I can’t download it?

Can you send me a demo please?

I have sent you a mail with a demo a few days ago. Have you already seen it?

Can you resend it? I had to move my email server because of frequent crashes.

this system have a builder backend?

Hi Venewood. The slider is a standalone plugin, without any builder.

if i buy this, can helpme to integrate to webrock? its possible?

I’m currently on a short holiday. I’ll provide information on how to do it when I’ll be back in my home country. :)

I’m seeing an issue using the slider where a full screen image ‘pops’ as the slider loads.

I have five simple fullscreen slides. I want fades between them:

<!- Bootslider Slide -> <!- /Bootslider Slide ->

(only the first is marked as ‘active’)

    $(document).ready(function() {
        var slider = new bootslider('#bootslider', {
    animationIn: "fadeIn",
    animationOut: "fadeOut",
    timeout: 7000,
    autoplay: true,
    looponce: false,
    preload: true,
    pauseOnHover: false,
    pagination: false,
    thumbnails: false,
    mousewheel: false,
    keyboard: true,
    touchscreen: true,
    layout: 'fullscreen-center',
    canvas: {
        width: 1140,
        height: 550

The problem I’m seeing is that the first image initially loads will width (which is not necessarily full screen) and then ‘pops’ as the bootslider resizes it to full screen.

Once this has happened, all subsequent slides are fine. But this initial pop is ugly!

Can you please provide a live demo? It’s hard for me to understand what “pop” you are experiencing.


I’ve found and a problem, that I really don’t know if it is my fault.

I’ve set the position of ”#bootslider” to fixed, then the rest of the page will pass over the slider….the problem on iPad is, that the divs that pass over the slider, become “transparent” and its possible to see the slider under the div….is there any way to change this?

Cheers Nuno

Hi Nuno,

That seems to be a z-index issue caused by the fixed position.

You can try setting

z-index: 99999
for the divs which should be on top of the slider.

Let me know if that works.

I’d also like to see a demo, if my suggestion doesn’t work, so I can help you solve the problem.



Thanks for answering Pixel.

The problem does not have anything to do with the Bootslider itself.

it’s a bug in the iPad, which is resolved by adding this propertie “-webkit-transform: translate3d(0,0,0);” in all HTML elements that pass over any fixed element.

Thank you again.

Best regards.


Nice to know that, might be useful for me as well in future projects. Thank you!

I’m glad you managed to solve the issue.


We have a bootstrap website with Jquery (1.11.3/jquery.min.js) when using your Slider it clashes with the JQuery file. Is there a workaround for this?

Regards, Guy Duncan

Hi Guy Duncan,

Would be useful to provide console output so I know what exactly is conflicting.

Hi. We are having some issues using the slider with video embeds. Its seems that when the video slider loads the next slider gets its height definition and uses for the images making them irregular. Have a look in this link please.

Could you have a look into this please.

Cheers André

Hi Andre,

I’m currently in vacation for one week. I will look into it as soon as I get home.

Thank you for providing a demo to help me fix the issues.

when I try to have just one slider(1) it wouldn’t load at all on browsers. Please could be happening. I just need one slide not 2 or more.

I will look into it and I’ll provide an update ASAP.

Hi, thanks for this great slider!

I have a question: We have removed the progress bar and now the slider makes a little jump on every transition (in Firefox). Any Idea how to fix this?


Hey, just letting you know I haven’t forgotten about the problem. It’s just that I’m really busy with college problems. I have 2 exams until thursday. I’ll look into it right away after I finish.

Sorry about this.

No worry, thanks for letting me know

Hi gekus,

I’ve looked into your problem. If you’re talking about the jump when you scroll down, the issue isn’t caused by the slider. Firefox and chrome handle the fixed possition differently.

In chrome, when you set the navbar to a fixed position, the gap remains. However, in firefox, when you scroll down, the page will jump up for the missing height of the navbar.

You will need to set a margin to the row before the navbar, which has the height of the navbar amount in pixels to prevent this.

Can you show me a preview with a fullscreen video autoplaying in the background with text over it ? I ma looking for it

Hi polarmedia,

Check out my new slider plugin, Slidea, in which you can do basically anything you want from a slider.

Video controls directly in your html markup and layered content (you can have text over it).

very cool slider, but i still don’t see a live exemple of what I am searching for.

All you need to do is to change the background into a Video background (as seen in documentation).

You can place any foreground elements on top of it.

I’ll make sure to add more examples in the updates to come.

When video is ON slider is not getting pause. It keeps on moving to next slide and video keeps on playing in the background. How to pause the slider if video is ON and once video is finished, slider should get ON automatically.


Hi vicky,

I’m working on an update as we speak. I was caught up in exams, sorry about the delay.

No issues, let me know as soon as the updated feature is available,

It’s up. You can download it from your Downloads page! :)

Can you help me?

The slider works great in all browsers, but I’m having an issue in Safari 6.0+.

The index page works great, but the rest of the pages won’t load properly. I cleared my cache & cookies, added a script to htaccess to make sure css, js, html and images don’t cache, changed the id in the javascript & html, added versions extentions to each css and javascript file… nothing fixes this.

Weirdly, when I reload page, that sometimes works. Also, if I adjust browser size it loads image or click on the page nav numbers it will load all of a sudden.

It’s not just an issue with my safari & my computer, its also an issue on my partners computer in safari 7.1.5. iPhone’s work fine also, just desktop has issue.

Example of good page: Example of bad pages:

Hi taggrafx,

I’ve checked and rechecked the plugin in safari and it behaves as expected by default.

The problem has to be some CSS you use on the secondary pages and is not related to the slider.

Perhaps you should check the “display” and “position” properties and eventually media queries you’re using in the subpages to see if they’re the same as in the main page.

I’m not sure how I can help since the plugin has no problem in safari.

thanks for all your help, I’ll look into that more in-depth. I love the slider regardless.

Thank you! I’m really glad to hear that.

You should check out Slidea (my newest slider plugin) which has some really great features.

Best of luck with your project!

Great product! But I have one problem, the “data-delay-out” doesn’t seem to work? Any ideas will be appreciated.

<div class="bs-layer" data-animate-in="fadeInRight" data-delay="1000" data-animate-out="animateOut" data-delay-out="1500" data-width="400" data-height="450" data-right="100" data-top="45" style="text-align:right;"> <h1 data-font-size="120" class="mas-hdr-medium mas-attract01 mas-shade"> Text test testing 123 </h1> </div>

Hi onlinesimon,

I’m looking into it and I’ll give you an answer (or an update fix) as soon as possible.

Any update on the data-delay-out not working? Or have I made an error with the syntax?

Honestly, I forgot about this issue. I’m really sorry for the long wait. I’ve uploaded and update right now and it should work as soon as it’s live.

I need some content slider which I can use in this way as it is used on following site for my featured articles:

Is it possible using this plugin. If yes, then can you please guide me for that. I need something like that very seriously.

Hi deep72,

The slider you’ve sent me can be easily created using slider methods. For example, you could mark up the slider on the left and the thumbnails/posts on the right, then use events to trigger the slides as such:

var slider = new bootslider('#bootslider');

$('.my-post-thumbnail').on('click', function(){
     var index = $(this).index();

Hope this helps. Thank you for your interest!


I sent an email regarding my problem using the form provided on the Support tab. That was a few days ago but so far no reply. Do you still offer support for Bootstrap Slider??

In the event that you do, here’s my question again …

I’ve got Bootstrap Slider up and running, all good, except that, when the page first loads, the images in the slider are all displayed vertically down the page (not stacked one on top of another so that you only see the uppermost image).

After some time (maybe 20 – 30 seconds or more) the slider begins to work correctly.

It seems that the slider JS or CSS doesn’t immediately ‘kick in’ so, initially, the images aren’t displayed within the slider.

Can you offer me any advice / solution to this problem?


Pixobyte, thanks for reply. Looks like there was a techno glitch with Themeforest … my email address is monitored almost 24/7.

My site isn’t online just yet. I will contact you when it’s uploaded.

All good. I’ve sorted this one out.

It was totally my mistake. Problem with my HTML; I hadn’t closed a tag.

Apologies for messing you around. Many thanks for your offer of help!

It’s no problem! We all make mistakes sometimes. Glad you managed to solve the problem!

Hi Grozav,

I am using layout: ‘fullscreen-center’ but on mobile I need to set a height. Is this possible? the reason I ask is because on mobile the bottom section of content is hidden.

Thank you in advance.

Try the following:

if(parseInt(winwidth) < 767){

Perfect Grozav that now works. Thank you very much for your support on my request. The best support I have had on any Envato market.

You’re welcome! I’m glad we could solve the problem!

Hey Grozav, I am using the bootslider for my website and the issue i am facing is whenever the page opens or reload, the main container did not cover the complete height of the slider, until the images load.

Is there any way to get out of it, help will be really appreciated, its a virtue by the way :)


Hi Paras,

The preloading of the slider images works that way because you cannot get the actual height of the images until the slider is fully loaded.

You can however change the preloader height in the CSS if you want to.


Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey