bootstrap-carousel

I am using a bootstrap slider. On desktop, it has three slides with 4 tiles each On Tabs, they have to be 4 slides with 3 tiles each On Mobile, there needs to be 12 different slides I am thinking of the most effective and optimized way of implementing this. Option 1 - Create 3 different set of sliders. Make only one visible at a time Option 2 - Detect the screen width with jquery and programmatically add extra tiles as slides, hide the extra ones. I guess this will be very complicated. Please help if there is a better way to implement this. Here it is: .carousel-inner .item.active { display:

I have a Bootstrap Carousel on my website. When the user hovers over an element #formcontainer , I'd like to pause the carousel. And when I hover off, I'd like to continue the cycle of the carousel. The first part works fine with the following code, but not the second. Can someone assist? $(document).ready(function() { $('.carousel').carousel({ interval: 1200, pause: "hover" }); $('#formcontainer').hover(function(){ $("#myCarousel4").carousel('pause'); }); }); Use carousel cycle method on mouseleave event $('#formcontainer').hover(function(){ $("#myCarousel4").carousel('pause'); },function(){

I want to build an image gallery. Each picture would represent set of images. I kind of realized that nice solution to that would be this: each image would trigger a modal, and inside of a modal I would put carousel where other images would be displayed. But I ran into a problem, I am not able to make carousels to work properly (they are embedded in one row). Please check jsfiddle for more info: https://jsfiddle.net/r0ukv00d/4/ <div class="container"> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/8e/Eyjafjallaj%C3%B6kull

How can I hide the left control if the carousel is on the first item, and how can I hide the right control when the carousel is on the last item. My code below hides the control successfully but on page load it is as if the carousel first item is in the middle and the user can either go all the way through via the left or right controls. http://bootply.com/99354 thanks Pimento Web Bootply link $('#myCarousel').on('slid', '', checkitem); // on caroussel move $('#myCarousel').on('slid.bs.carousel', '', checkitem); // on carousel move $(document).ready(function(){ // on document ready checkitem()