77 comments found.
Hi there – loving the slider! Is there a way to (on hover) fadin controls and on mouse out fade out slider controls?
Hi ggsciouris, you should be able to acheive the effect you want by adding the following css:
.bootslider .bs-controls{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
}
.bootslider:hover .bs-controls{
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
Hi there!
There also seems to be a problem, if there is only one slide. It is never shown. Where is the problem?
Thx!
Kind Regards, Adam
Hi adamn676, I know about the issue and I’ll fix it in the following update.
At the moment, the easiest way to fix it is to remove the loader markup.
Best regads, Alex
Hi there!
I wanted to link one image in the slider with swipe functionality enabled, I was not successful. Markup: |a src=’#’| |img||/img| |/a|
How can I make an image clickable and still have the swipe functionality?
Thx!
Kind Regards, Adam
Will this work with jquery 1.9.1?
I have tested it right now and I can confirm it is fully compatible and working with jQuery 1.9.1.
Best regards, Alex
Hi I’m having problems with the slider. I can get your demo working but as soon as I place in a test page (which is near identical) it breaks on moving to the next slide. I’ve emailed the files – can you provide an update please
further experimenting – it breaks with fixedheight layout but not default layout
You need to set a height in CSS for the .bs-slide class to make the fixedheight mode work. You can see how in the documentation.
Hi Alex,
I’m using fixed height slider, but I’ve couple of problems.
1. When I view my webpage in larger screen, back ground images layers are not showing fully. 2. How to keep the background image fully visible all the time? now on bigger screen image is stretching and smaller screens image is cutting off.
Cheers, Prasad
You cannot have a fixed height layout without the images cutting off. That’s the point of the layout. It will keep the slider at a certain height in pixels, i.e. 400px and it will resize the images accordingly. Meaning:
image height > slider height => fullwidth image width > slider width => fullheight
Use the default layout to make the slider keep whole images.
The slider is great, thx! In the previous comment “ironrunes” asks about events/hooks for the bootslider, for example: when the slider has completed a slide and start/end events per slide and total slider.
Is there any progress on this? and if it’s in bootslider now, how do I use these events?
My situation is that I have bootslider using bs-video in the background. The video must restart itself when the slider arrives at that slide again.
Gr. Michel
Hey isemantics,
I’ll get back to developing/updating my plugins once I finish the rebranding (logo + website) I’m going through.
I’ll make sure to add callbacks and update the slider to use velocityjs (meaning transition speed, staggering and more animations).
Best regards, Alex
Hi Alex
Great plugin, it seems to do everything I need and is very straightforward to configure.
I’ve found a minor issue with the plugin in that if you move the bs-pagination element above the bs-container (in order to overlay the pagination buttons over the slides) and enable pagination in the JS config the animation in bs-background stops working.
I’ve recreated this issue in the index-layout-boxed.html sample file which I can email to you if required?
Regards Rob
Please send me the files, I’ll look into it.
Regards, Alex
Hi Alex
Did you receive the files OK?
Regards Rob
Got them! I’ll look at them today and give you an answer.
Hi Alex Have you had any luck with this issue? Regards Rob
Sorry Rob, I thought I sent you the answer. I’ve copied the HTML file inside my local copy of bootslider and all the animations are working properly. Are you sure you’re not missing something? Try redownloading the plugin.
The pagination is indeed above the slides and the slides are working just fine. Do you get any console output? (F12 in Chrome)
Best regards, Alex
Hi !! Your work is great, you’re obviously a genius master !! I really want your slider, can somehow implement it for Wordress? I’m a beginner and do not really understand where it can be implemented if it is not for HTML and Wordress? (According to your comment above)
Hey saylife!
I have plans to make a WP version of Bootslider soon. However that will be after I finish my current project (rebranding of my website).
Thank you for your kind words, really happy to know you appreciate my work.
You can implement it in WP as html, but it will be static and it will have no slide builder or whatsoever.
Sorry for the long answering delay, college has started.
Hi,
Is there a WP version of Bootsliider ?
Thanks,
Mike Peace
Hi Mike, Currently there is no WP version. However, I’ll be working on a slider builder for both HTML and WP after I finish my current project.
Best regards, Alex
Hi Alex,
I am trying to display the .bs-pagination class on top of the slides. I have added a negative margin so the .bs-pagination class is in the correct position but it is displaying behind the slide. I have tried a positive z-index but the issue is still there.
Could you please advise me how I can get the .bs-pagination to display over the slide?
Thank you in advance.
Hi sjsp, it would be easier for me to give you the exact css code if you would provide a preview / demo. Do you have one uploaded?
Hi,
Thanks for responding back. I have managed to resolve the issue with absolute position instead of negative margin.
Glad to hear that. It’s what I would have suggested as well. A 100% width div with absolute position and negative top or margin-top.
Enjoy using the slider!
It’s a great slider. Thanks for your prompt support.
Hi Alex,
First of all – great plugin!
but i have a little problem… in ff there seems to be a problem with the animations with the layout-content slides … the content-slides dont switch smoothly… do you have a quick fix for this? or can you push me in the right direction?
best regards
for testing purposes you can try index-layout-content.html in the download package…
Hi MarkusL! At the moment I’m in vacation and I won’t be able to check it out until next week. Thank you for letting me know.
Hi Alex, I like to have slide navigation on the slider instead of having those left and right navigation button at the bottom of the slide.
Is there are any quick way to do this?
thanks
Hi prasadcm,
Do you mean having a pagination or putting the buttons directly on the slider?
If it’s the second, you can change that with simple CSS inside the bootslider.css file. Look for the .bs-next and .bs-prev classes. I can write the CSS for you if you don’t know how to do it yourself.
hi Alex, I’m referring to the pagination on the slider. If you could send me the CSS code that would be great.
Hi again,
All you need to do is to change some of the settings when you run the slider and delete the buttons from the html markup.
Use the following JavaScript which has the pagination and most features enabled.
var slider = new bootslider('#bootslider', {
animationIn: "fadeInUp",
animationOut: "flipOutX",
timeout: 5000,
autoplay: true,
preload: true,
pauseOnHover: false,
thumbnails: false,
pagination: true,
mousewheel: false,
keyboard: true,
touchscreen: true,
layout: 'default',
canvas: {
width: 1440,
height: 720
}
});
slider.init();
The buttons have the class .bs-controls. Just delete that html and they will be gone.
Also, to edit the paginations, make sure to access it by using the .bs-pagination class in css.
thanks for the reply. Sorry to make you confusing. What I need is bullet page navigation on the slide not out side the slide.
Here’s what you should do:
- Put the bs-pagination div right after the bs-container div.
- Add a negative margin in css:
.bs-pagination{ margin-top: -150px; }
That will put the pagination div on top of the slides. Let me know if you’re encountering any problems with it.
still have a small problem.. pagination is hiding during the slide loading. Also is there are anyway I can use different appearance for pagination isted of number?
Please send me a live demo and I’ll give you the exact css needed.
Alex, still I’m using your samples.. I’m trying to replace the defaulting pagination with a bullet pagination (with small circles).
if you could send me a sample CSS, or instructions how I could change the skin of pagination for following action then I think I can do some work around.
normal normal mouseover active active mouseover mousedown
<normal> ,<normal mouseover>, <active>, <active mouseover>, <mousedown>
BTW, thanks for your help. I was manage to have bullet navigation top of the slider.
Hey prasadcm, I’m happy to know you managed to customize the navigation. Let me know if there’s anything else I can help you with.
Hi Alex, I’m using parallax and I’ve set max height to 490px. all images that I’m setting for background only slows the part of the image. What is the image size that I should you to view the full image?
Hey prasadcm, the parallax setup will have the size set by the content inisde the bs-foreground container. It’s preferable to have an image which is higher in px, like a square or vertical rectangle so that it will be able to scroll without repeating.
Sorry for the long answering delay, college has started.
I’m using jquery 1.7.2. Will this work with that version of jQuery?
Thanks!
Hi gtothab, I’ve just tested it to make sure it’s working with 1.7.2 and it works without any problems. Thank you in advance for purchasing!
Hi,
I purchased it and it’s kinda working. However, when the page first loads we see all of the slides stacked on top of one another. Then, the first transition works partially (the caption animation appears but not the background animation). Then after that it works as intended. Plz see an example here:
http://graphbyte.co/box/new-zen/theme/html/Plz advise,
G
Hi G, you have added the .active class to all the slides. Only the one you want to appear first needs to have the active class.
Great thanks! I had just copy/pasted the first slide over so, that’s why.
Thanks for your quick reply. Its a very good plugin. Highly recommended!
I’m really happy to know you like it. Please leave a rating if you have time. Thank you very much!
Does this only work with Bootstrap? Or can it stand alone?
It does work standalone as well, of course. If you don’t like Bootstrap you can style the slider content with normal css.
However, it was built to be perfectly compatible with the bootstrap markup (grid, row, container, text, panels, etc.).
Hi Alex,
I have implemented your slider and it works great on all browsers except for Internet Explorer. When the first slide loads everything is fine but when the second slide loads the text appears at the top of the page as oppose to the middle of the page. I have tried your online example and it happens to that too. Can you please look into this issue or let me know of any fixes.
Thank you in advance.
Hi sjsp, can you tell me which IE version and which bootslider layout mode you’re using?
I am using IE9 and I am using the layout in the documentation.html page. I have used this layout because I like the fact when the page width increase the slider height also increase.
The second slide has the text set to appear at the top. If you want it to appear in the middle, add a bs-vertical-center class to the column div.
<div class="col-md-12 bs-vertical-center"> <!-- content --> </div>
Hi Alex,
Thanks for your assistance. I already added the class “bs-vertical-center” and the problem was still happening. However, I have fixed the issue, I created a new class to push the div down using absolute positioning.
That’s weird, it worked when I edited it from IE’s console. Anyway, I’m glad you managed to solve it.
same issue that redroot pointed out (bootstrap 3.1.1, fixed navbar breaks if I enable the animate.css body instructions), plus a question. Is there any way of getting the height of the slides in fullscreen mode? It would be awesome if there was a onSliderLoaded method (or something similar) to detect the event of completion and access the slider in the dom when it’s ready! Thank you for the great work!
Hi ironrunes, you could get the height with a getter method. This is the code you would have to use:
self.getActiveHeight = function(){
return $active.height();
}
I’ve got an exam on monday, so I won’t be able to test it until then. I’ll also upload the animate.css update on monday.
Hello Alex, any news on the update? 
Hi ironrunes, I’ve uploaded it yesterday but it’s still under review. Don’t know why it’s taking so long.
Please send me an email and I’ll send you the new version. The review seems to be stuck or something.
I use bootslider together with bootstrap 3.1.1, WordPress 3.9.1 and Fancybox. If I insert the bootslider css-files the layout is a litte bit broken. The admin-toolbar is not at the top of the page and the fancybox doesn’t open in the centre of the screen. It opens on top of the screen. When I comment out the body definition in the animation.css the layout and fancybox seems to work ok. For what are the lines responsible backface-visibility?
Hi redroot, backface visibility is used when rotating / flipping an object and it assures the backside of the element won’t be blank. Is it working fine now?
I’ll give it a try and report my success 
Here I am again. The slider works but … I have two slides which contains the same elements and the same animation. After the first cycle it starts with the first one but the two elements of the bs-foreground container won’t animate again. They just display. No slideInLeft or slideInRight. Any hint?
I just see that this problem is on the actual firefox browser under mac os. In Safari everything works correct. But in FF – also in the demos – the animations of the bs-foreground won’t work from the second cycle on. Any Ideas?
I hope I’ll be able to get a mac for testing by the beginning if the next week. I’ll look into it and post an update as soon as I find the error.
Thank you for letting me know!
Thanks in advance. If I find other things I let you know. I wish you a nice weekend.
Hi redroot, I’ve found the issue. I’m currently working on a fix.
Hi AlexGrozav TIA. Great to hear this.
I’ll be able to upload the update only on monday, since I need to study for an exam until then. Sorry for the long delay.
Please send me an email and I’ll send you the new version. The review seems to be stuck or something.
Is there an easy way to add captions?
Hi jerehall, you can add captions via simple HTML Markup and position them wherever you want through CSS.
Hi Alex, just wanted to say great slider, great documentation and thanks for your responsive service when I had questions and a couple of issues with the slider behaviour.
I look forward to using Bootslider on plenty more sites in the future now that I have found a great product and a developer who has been happy to backup his work with assistance when required.
Cheers
Hi Pete, thank you very much for your great feedback. I’m really happy to know you enjoyed working with the plugin.
