Rectangle 27 196

Or if you're using Bootstrap 3.0 you can stop the cycling with data-interval="false" for instance

<div id="carousel-example-generic" class="carousel slide" data-interval="false">

This is not 100% the answer to the question because it also stops it from cycling even when a button is clicked. But it was exactly what I was looking for. So thank you anyway!

data-interval="false"

jquery - Preventing twitter bootstrap carousel from auto sliding on pa...

jquery twitter-bootstrap carousel
Rectangle 27 23

Bootstrap 3 changed the 'slide' event to 'slide.bs.carousel'. Change to this and it should work (assuming that is your only issue):

$carousel.bind('slide.bs.carousel', function (e) {
    console.log('slide event!');
});

it works in Chrome, but fails to work in Mozilla. Any suggestions?

Slide event worked fine for me in firefox.

Yes, it turned out that Mozilla has problems with animate(backgroundPositionX). I managed to fix it with a plugin. Now it works fine.

worked for me even in firefox. also i changed it to $('#carousel').bind...

jquery - Fire event on Bootstrap carousel slide issue - Stack Overflow

jquery twitter-bootstrap carousel slide
Rectangle 27 6

I guess I don't understand what your trying to do. You could do something in jQuery that overides the default functionality using your data-slide-to to get the correct image..

With the links in order

With the links not in order..

However The bootstrap carousel is designed to show images in order and which ever image is showing the corresponding link is set to active.. So you can click on the third link to open up the second link but the second link is going to be set to active.. You could override this functionality too. However I'm not sure why you would do it because it could cause some confusion when using the next and previous buttons.

$('.carousel-indicators li').click(function(e){
    e.stopPropagation();
    var goTo = $(this).data('slide-to');
  $('.carousel-inner .item').each(function(index){
    if($(this).data('id') == goTo){
      goTo = index;
      return false;
    }
  });

    $('#myCarousel').carousel(goTo); 
});

For you it would be something like:

$('.menu-right-club .accordion-inner li').click(function(e){
     e.stopPropagation();
     var goTo = $(this).data('slide-to');
     $('#seriesCarousel .carousel-inner .item').each(function(index){
         if($(this).data('id') == goTo){
             goTo = index;
             return false;
         } 
     });            
    $('#seriesCarousel').carousel(goTo); 
});

Sorry whether i'm answering now. Yes, you have perfect reason saying it about the carousel, in fact i pointed out that it was just an example. This is where it should work: http://www.rugbyperugia.com/club/seriea/1 As you can see, the players' name on the right menu doesn't match with the players shown into the slide. The links on that right menu and the players are coming from a database table.

@RobertoRizzi Okay if you want something that will go based off the data-id tag check my Update 2 that should work for you. Let me know if you have any trouble.

It works fine!! Thanks a lot!!! You saved my day! I didn't think that it would have been so simple! It is very important for me! Thank you again and if you need of something i'll be happy to help you. :) :)

jquery - Bootstrap carousel data-slide link issue - Stack Overflow

jquery twitter-bootstrap twitter-bootstrap-3
Rectangle 27 16

if you're using bootstrap 3 set data-interval="false" on the HTML structure of carousel

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">

jquery - Preventing twitter bootstrap carousel from auto sliding on pa...

jquery twitter-bootstrap carousel
Rectangle 27 9

data-interval="false"
data-wrap="false"

jquery - Preventing twitter bootstrap carousel from auto sliding on pa...

jquery twitter-bootstrap carousel
Rectangle 27 4

Came across this issue when using Bootstrap 3. My solution was to add the carousel-fade class to the carousel main DIV and slot the following CSS in, somewhere after the Bootstrap CSS is included:

.carousel-fade .item {
  opacity: 0;
  -webkit-transition: opacity 2s ease-in-out;
  -moz-transition: opacity 2s ease-in-out;
  -ms-transition: opacity 2s ease-in-out;
  -o-transition: opacity 2s ease-in-out;
  transition: opacity 2s ease-in-out;
  left: 0 !important;
}

.carousel-fade .active {
  opacity: 1 !important;
}

.carousel-fade .left {
  opacity: 0 !important;
  -webkit-transition: opacity 0.5s ease-in-out !important;
  -moz-transition: opacity 0.5s ease-in-out !important;
  -ms-transition: opacity 0.5s ease-in-out !important;
  -o-transition: opacity 0.5s ease-in-out !important;
  transition: opacity 0.5s ease-in-out !important;
}

.carousel-fade .carousel-control {
  opacity: 1 !important;
}

The style transitions that Bootstrap applies mean that you have to have the mid-stride transitions (active left, next left) quickly, otherwise the item just ends up disappearing (hence the 1/2 second transition time).

I haven't experimented with adjusting the .item and .left transition times, but they will probably need adjusting proportionally to keep the effect looking nice.

jquery - Can the Twitter Bootstrap Carousel plugin fade in and out on ...

jquery twitter-bootstrap carousel
Rectangle 27 2

@Jason Anello, A mod at www.teamtreehouse.com solved this issue by suggesting to switch from the Owl Carousel 2 to the Older but more stable Owl Carousel 1! I changed my css and js files from version 2 to version 1 and now the carousels load like they should! Thanks Jason!!

Thanks Christina for trying to help as well!

Did you find some other kind of solution? Cause switching to version 1 is not possible in my case.

jquery - Owl Carousel issue with Bootstrap tabs - Stack Overflow

jquery twitter-bootstrap owl-carousel
Rectangle 27 127

Yes. Bootstrap uses CSS transitions so it can be done easily without any Javascript.

.carousel .item {-webkit-transition: opacity 3s; -moz-transition: opacity 3s; -ms-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s;}
.carousel .active.left {left:0;opacity:0;z-index:2;}
.carousel .next {left:0;opacity:1;z-index:1;}

I noticed however that the transition end event was firing prematurely with the default interval of 5s and a fade transition of 3s. Bumping the carousel interval to 8s provides a nice effect.

note that using the css transition requires CSS3 which only the modern browsers support

Pretty nice innovation, it helps promoting CSS3 and "encourages" users with crappy browsers to update. :-)

You need to add .carousel .active.right to account for moving the other way through the gallery, thanks though for the right direction.

It works but only when going to the next item... returning back to previous item, doesn't have any cross-fade transition.

If your carousel isn't entirely an image (ie, it contains text with no image background) give the .item a background color, or the dissolve isn't quite smooth.

jquery - Can the Twitter Bootstrap Carousel plugin fade in and out on ...

jquery twitter-bootstrap carousel
Rectangle 27 50

Actually, the problem is now solved. I added the 'pause' argument to the method 'carousel' like below:

$(document).ready(function() {      
   $('.carousel').carousel('pause');
});

this does not work

jquery - Preventing twitter bootstrap carousel from auto sliding on pa...

jquery twitter-bootstrap carousel
Rectangle 27 73

You need to put an entire row of images in the item active. Here is another version that doesn't stack the images at smaller screen widths: http://bootply.com/92514

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  if (next.next().length>0) {
    next.next().children(':first-child').clone().appendTo($(this));
  }
  else {
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
  }
});
.carousel-inner .active.left { left: -33%; }
.carousel-inner .next        { left:  33%; }
.carousel-inner .item.left.active {
  transform: translateX(-33%);
}
.carousel-inner .item.right.active {
  transform: translateX(33%);
}

.carousel-inner .item.next {
  transform: translateX(33%)
}
.carousel-inner .item.prev {
  transform: translateX(-33%)
}

.carousel-inner .item.right,
.carousel-inner .item.left { 
  transform: translateX(0);
}

The carousel has changed in 4.x, and the animation transitions can be overridden like this...

.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
  transform: translateX(33.33%);
}

.carousel-inner .carousel-item-left.active, 
.carousel-inner .carousel-item-prev {
  transform: translateX(-33.33%)
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{ 
  transform: translateX(0);
}

Finally, another option is a responsive carousel that only shows and advances 1 slide on smaller screens. Instead of cloning the slides like the previous example, this one adjusts the CSS and use jQuery only to move the extra slides to allow for continuous cycling (wrap around):

@media (min-width: 768px) {

    /* show 3 items */
    .carousel-inner .active,
    .carousel-inner .active + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }

    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }

    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
      position: relative;
      transform: translate3d(0, 0, 0);
    }

    .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;
        z-index: -1;
        display: block;
        visibility: visible;
    }

    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }

    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}

Thanks. That does look a lot better... but feels a bit weird. scrolling to the left doesn't seem to work, as it scroll multiple blocks at a time, and the order seems off. Scrolling to the right works fine (though in the wrong direction). The issue I'm having with this is that it seems to create a lot of duplicates, which is not that bad... but not that good... so for every item I have (6 in your case), that script creates N duplicates (where N = blocks shown per frame).

@Zentaurus, I know it is late, but check out the four elements example. I've adapted Skelly logic for an SOpt question.

Found why it doesn't work on > 3.3.0 it is due to the inclusion of translate3D, check the answers of Danijel and Michal Vrchota on: stackoverflow.com/questions/18613271/

jquery - Bootstrap carousel multiple frames at once - Stack Overflow

jquery twitter-bootstrap jquery-plugins twitter-bootstrap-3 carousel
Rectangle 27 75

Yes. Although I use the following code.

.carousel.fade
{
    opacity: 1;

    .item
    {
        -moz-transition: opacity ease-in-out .7s;
        -o-transition: opacity ease-in-out .7s;
        -webkit-transition: opacity ease-in-out .7s;
        transition: opacity ease-in-out .7s;
        left: 0 !important;
        opacity: 0;
        top:0;
        position:absolute;
        width: 100%;
        display:block !important;
        z-index:1;
        &:first-child{
            top:auto;
            position:relative;
        }

        &.active
        {
            opacity: 1;
            -moz-transition: opacity ease-in-out .7s;
            -o-transition: opacity ease-in-out .7s;
            -webkit-transition: opacity ease-in-out .7s;
            transition: opacity ease-in-out .7s;
            z-index:2;
        }
    }
}

Then change the class on the carousel from "carousel slide" to "carousel fade". This works in safari, chrome, firefox, and IE 10. It will correctly downgrade in IE 9, however, the nice face effect doesn't happen.

Edit: Since this answer has gotten so popular I've added the following which rewritten as pure CSS instead of the above which was LESS:

.carousel.fade {
  opacity: 1;
}
.carousel.fade .item {
  -moz-transition: opacity ease-in-out .7s;
  -o-transition: opacity ease-in-out .7s;
  -webkit-transition: opacity ease-in-out .7s;
  transition: opacity ease-in-out .7s;
  left: 0 !important;
  opacity: 0;
  top:0;
  position:absolute;
  width: 100%;
  display:block !important;
  z-index:1;
}
.carousel.fade .item:first-child {
  top:auto;
  position:relative;
}
.carousel.fade .item.active {
  opacity: 1;
  -moz-transition: opacity ease-in-out .7s;
  -o-transition: opacity ease-in-out .7s;
  -webkit-transition: opacity ease-in-out .7s;
  transition: opacity ease-in-out .7s;
  z-index:2;
}

I tried a bunch of other answers that worked for a lot of people, but for some reason, this is the only one that worked for me. When I have a moment, I will have to investigate...

But, this messes up the image titles on the slides; all of the images are not display: none, so the mouse always hovers over the last .item, no matter which .item is currently shown. CSS (>_<)

Of course, I can replicate the functionality of the title attribute manually, which I just did. I tried setting .item to display: none and .item.active to display: block, but that prevented all but the first slide from ever displaying.

I've editted the above to add z-indexing which should solve your title issue. I've noticed that the bootstrap code specifically looks for the slide class when trying to determine which slide is currently showing (The navigation dots). It still works, but the timing is a bit different for fade than slide. It changes the nav dot to the incoming one instantly instead of waiting for the transition effect to finish, which I prefer anyhow. Just thought I would point out the oddity in case it bugs you.

jquery - Can the Twitter Bootstrap Carousel plugin fade in and out on ...

jquery twitter-bootstrap carousel
Rectangle 27 39

The problem with carousel automatically sliding after prev/next button press is solved.

$('.carousel').carousel({
    pause: true,
    interval: false
});

jquery - Preventing twitter bootstrap carousel from auto sliding on pa...

jquery twitter-bootstrap carousel
Rectangle 27 2

update http://bootply.com/65305 uses data-title and data-content attributes to show the captions

html (including your list of images):

<div class="container" id="firstrow">
        <div class="row-fluid">
<div class="span3" id="thumbs">
<button id="previousimage">Previous</button>    
<button id="nextimage">Next</button>
</div>          
<div class="span6" id="currentimage"></div> 
<div class="span3" id="titles"></div>           
<div id="carousal">
    <img src="http://placehold.it/350/0000FF" title="blue image 1">
    <img src="http://placehold.it/350/CCEEFF" title="yelow image 2">
    <img src="http://placehold.it/350/088A4B" title="green image 3">
    <img src="http://placehold.it/350/C47451" title="orange image 4">
    <img src="http://placehold.it/350/000000" title="black image 5">
    <img src="http://placehold.it/350/8D38C9" title="voilet image 6">
</div>  
        </div>  
    </div>
$('#carousal').hide();
 var number = $('#carousal img').length;
 var numberofthumbs = 4;

 var current = 0;
 var images = $.makeArray($('#carousal img').clone());
 var ci = $.makeArray($('#carousal img').clone());
 $('#nextimage').before(images[0]);
 $('#nextimage').before(images[1]);
 $('#nextimage').before(images[2]);
 $('#nextimage').before(images[3]);

 $('#titles').append('<span>' + images[number-1].title + '</span><br>');
 $('#titles').append('<span>' + images[current].title + '</span><br>');
 $('#titles').append('<span>' + images[current+1].title + '</span><br>');

 $('#currentimage').html(ci[0]);

  $('#previousimage').click(function()
 {
     $('#thumbs img').last().remove();
     $('#previousimage').after(images[(current-1+number)%number]);
     $('#titles span').last().remove();
     $('#titles br').last().remove();
     $('#titles').prepend('<span>' + images[(current-2+number)%number].title + '</span><br>');
     current = ((current-1+number)%number);
     $('#currentimage').html(ci[current]);
 });

 $('#nextimage').click(function()
 {
     $('#thumbs img').first().remove();
     $('#nextimage').before(images[(current+numberofthumbs)%number]);
     $('#titles span').first().remove();
     $('#titles br').first().remove();
     $('#titles').append('<span>' + images[(current+2)%number].title + '</span><br>');
     current = ((current+1)%number);
     $('#currentimage').html(ci[current]);
 });
#thumbs img {width:25%; display: block;}

Maybe put your images in a list and use .html() to get a copy of the image to be more flexible.

Thank you for taking the time to do this. Very nice idea, using the title attribute. Follow-up question: can I included HTML tags in the title attribute? The captions I need to display will likely be two lines - a heading followed by plain text.

$().data-..
.attributes['data-...'].value

twitter bootstrap - Need some ideas for jQuery carousel function - Sta...

jquery twitter-bootstrap carousel
Rectangle 27 19

$('#myCarousel').carousel({
    interval: 10000
})

$('.carousel .item').each(function(){
    var next = $(this).next();

    if (!next.length) {
        next = $(this).siblings(':first');
    }

    next.children(':first-child').clone().appendTo($(this));

    if (next.next().length>0) {
        next.next().children(':first-child').clone().appendTo($(this));
    }
    else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
});
.carousel-inner .active.left  { left: -33%;             }
.carousel-inner .active.right { left: 33%;              }
.carousel-inner .next         { left: 33%               }
.carousel-inner .prev         { left: -33%              }
.carousel-control.left        { background-image: none; }
.carousel-control.right       { background-image: none; }
.carousel-inner .item         { background: white;      }

You can see it in action at this Jsfiddle

The reason i added this answer because the other ones don't work entirely. I found 2 bugs inside them, one of them was that the left arrow generated a strange effect and the other was about the text getting bold in some situations witch can be resolved by setting the background color so the bottom item wont be visible while the transition effect.

thank you for sharing...i do see some flickering in firefox, however.

@paulalexandru how can I increase number of images in visible row ?

Well in case you have 4 items in your css you should change 33% with 25% and you have to make a little change in the javascript also. In case you don't manage to resolve that, post a question and i will post a complete response there.

This is a great solution! Thanks!

is there a dynamic solution to a variable "x" number of images (not just 3, 33%) ?

jquery - Bootstrap carousel multiple frames at once - Stack Overflow

jquery twitter-bootstrap jquery-plugins twitter-bootstrap-3 carousel
Rectangle 27 19

carousel.carousel-fade

in the CSS of the following examples:

jquery - Can the Twitter Bootstrap Carousel plugin fade in and out on ...

jquery twitter-bootstrap carousel
Rectangle 27 16

Can this be done with bootstrap 3's carousel? I'm hoping I won't have to go hunting for yet another jQuery plugin

As of 2013-12-08 the answer is no. The effect you are looking for is not possible using Bootstrap 3's generic carousel plugin. However, here's a simple jQuery plugin that seems to do exactly what you want http://sorgalla.com/jcarousel/

jquery - Bootstrap carousel multiple frames at once - Stack Overflow

jquery twitter-bootstrap jquery-plugins twitter-bootstrap-3 carousel
Rectangle 27 13

All the above solutions are hacky and buggy. Don't even try. Use other libs. The best I have found - http://sachinchoolur.github.io/lightslider Works great with bootstrap, does not add junk html, highly-configurable, responsive, mobile-friendly etc...

$('.multi-item-carousel').lightSlider({
    item: 4,
    pager: false,
    autoWidth: false,
    slideMargin: 0
});

Thanks a lot, very usefull lib :)

jquery - Bootstrap carousel multiple frames at once - Stack Overflow

jquery twitter-bootstrap jquery-plugins twitter-bootstrap-3 carousel
Rectangle 27 13

for (var i=0;i<2;i++) {
for (var i=0;i<4;i++) {
col-lg-3
col-lg-2

Wow that's fantastic, thank you. I've now set the for loop to for (var i=0;i<3;i++) { as well as setting the span-lg-2 to a width of 20% which seems to effectively give me five columns. bootply.com/123662 For anyone els wanting to implement you also need to change the css to move the slider by the corect amount with .carousel-inner .active.left { left: -20%; } and .carousel-inner .next { left: 20%; }

@user3446373 You can thank the author of the fiddle, not me... But please, if your issue is solved, can you accept the answer to close the post ? (at left of answer, bottom of arrows)

This is wonderful. how can I make the left arrow move one as well ?

If someone is looking for the answer, how to move to the left 1 at a time as well, here is the answer: .carousel-inner .active.right { left: 16.6% ; } .carousel-inner .prev { left: -16.6% ; }

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

jquery - Modify bootstrap carousel to display multiple slides simultan...

jquery css twitter-bootstrap twitter-bootstrap-3 carousel
Rectangle 27 1

There are several issues with your code. The first item below is definitely going to cause the code to fail:

  • If you are using Bootstrap 3, you need to use slid.bs.carousel (not 'slid' which was the method from version 2).
  • You should not be using bind(). It's deprecated. Use the on() method instead.
  • You really don't need to have multiple handlers for your carousels. You can target with $(this) as used in the example.
$('.carousel').on('slid.bs.carousel', function () {
  var carouselData = $(this).data('bs.carousel');
  var currentIndex = carouselData.getActiveIndex();
  var total = carouselData.$items.length;

  // index is 0-based so add 1 to it
  var txt = 'FOTO '+(currentIndex + 1)+' DE '+total;

  //MAKE SURE that each of your carousels has an element with the class numslide 
  //you don't need to make them unique because we're using this to target 
  $(this).find('.numslide').text(txt);
});
$('#carousel1').carousel({
    interval: 5000
});

Your carousels all must have unique IDs, but you can call all of the carousels (before the handler above) with:

$('.carousel').carousel(); //interval by default is 5000 so you don't need it in the options

You don't really show your HTML, but since they are inside of modals, I recommend not using the data-ride="carousel" in your markup. This would cause the carousel to begin cycling on page load. The result is that not only would the js for each of the carousels be running every 5 seconds to load a new slide, but also the handler will be called 3 times every 5 seconds. This will be really inefficient since the modals are hidden.

Instead, you can use the .carousel('cycle') method when you launch your modal and .carousel('pause') when you hide the modal again. Something like this would do the trick:

$('.modal').on('shown.bs.modal', function () {
  $(this).find('.carousel').carousel('cycle');
});

$('.modal').on('hidden.bs.modal', function () {
  $(this).find('.carousel').carousel('pause');
});

thanks @jme11 I guess i should have done this from the beginning but here i recreated pretty much what i'm doing: jsfiddle.net/9u7rH/2 i'm sure i'm not understanding correctly something, thanks for the patience. EDIT: Oh, so the problem is i can't display the current slide outside of the carousel itself?

No problemo, you got everything in there correctly. There is one difference between your markup and mine. You have the .numslides div in the title of the modal, so you just have to change this line: $(this).find('.numslide').text(txt); to: $(this).parents('.modal').find('.numslide').text(txt); The .find method in jQuery only looks in the descendants, so with this change, we go up in the DOM tree to the parent with the modal class and then use find to find the div with the class numslide inside its descendants.

...and don't forget the handler only runs after the carousel "slides," so if you want the first slide to show the number of slides (before the first time the slide takes place), you have to set the value once when the page is loaded and jQuery is ready. I'll edit your fiddle to show you how to change that to work with your markup...

You are the best, i can't say i will pay it back but i will definitely pay it forward!

Here's the modified version of your fiddle: jsfiddle.net/jme11/D3bkv

jquery bootstrap 3 carousel slider number (with many carousels) - Stac...

jquery twitter-bootstrap-3 slider carousel bootstrapping
Rectangle 27 11

This is the best solution that I found:

jquery - Can the Twitter Bootstrap Carousel plugin fade in and out on ...

jquery twitter-bootstrap carousel