Discussion on Bootslider - Responsive Bootstrap CSS3 Slider

Grozav

Grozav supports this item

Supported

75 comments found.

I need some content slider which I can use in this way as it is used on following site for my featured articles: http://www.solostream.com/demo/wp-bold/

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();
     slider.gotoslide(index);
})

Hope this helps. Thank you for your interest!

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.

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: http://www.insurancecompanymichigan.com Example of bad pages: http://www.insurancecompanymichigan.com/michigan-insurance-carriers.html http://www.insurancecompanymichigan.com/about-michigan-insurance-company.html

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!

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.

Thanks

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 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.

http://codecanyon.net/item/slidea-a-smarter-responsive-slider-plugin/10895461?ref=Pixevil


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.

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?

Thanks

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.

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. 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.

http://projetos.qubedesign.com.br/instituto-braga/site/index.php

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.

Hi,

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.

Hello.

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.

Alex

Hello.

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.

Nuno

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.

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’)

<script>
    $(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
    }
        });
        slider.init();
    });
</script>

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.

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. :)

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.

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!

gekus

gekus Purchased

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!

gekus

gekus Purchased

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

by
by
by
by
by
by