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

Nested carousel's aren't supported in Bootstrap (see http://getbootstrap.com/javascript/#carousel). I think that is the main issue here. You might try something a little more elegant like this one-page design that also includes scrolling left and right by Ritesh Kumar (using fullpage.js):

<section class="vertical-scrolling">
   <div class="horizontal-scrolling">
      <h2>fullPage.js</h2>
      <h3>This is the fifth section and it contains the first slide (actually section == first slide)</h3>
   </div>
   <div class="horizontal-scrolling">
      <h2>fullPage.js</h2>
      <h3>This is the second slide</h3> 
      <p class="end">Thank you!</p>
   </div>
</section>

javascript - Smaller bootstrap carousel within Larger bootstrap carous...

javascript jquery twitter-bootstrap carousel
Rectangle 27 3

<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="false" id="myCarousel">

javascript - Bootstrap Carousel : Remove auto slide - Stack Overflow

javascript jquery twitter-bootstrap
Rectangle 27 141

interval: false

that will make the auto sliding stop because there no Milliseconds added and will never slider next.

as simple as that. Thanks @Mitz.

data-ride="carousel"
data-interval="false"

javascript - Bootstrap Carousel : Remove auto slide - Stack Overflow

javascript jquery twitter-bootstrap
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 82

You can either pass this value with javascript or using a data-interval="false" attribute.

thanks for the data-interval='false', the easy option if you are using a the-bootstrap theme in Wordpress

data-interval="false" is the much better solution, no need to touch the bootstrap JS!

This is not working for me <div class="carousel slide" data-ride="carousel" id="carousel-ex" data-interval="false"> <div class="carousel-inner" >.... and nothing... still autosliding

This is indeed much simpler for simple cases, but do keep in mind it's a much better design to use your custom scripts.js and keep no script coding in the html! ;)

javascript - Bootstrap Carousel : Remove auto slide - Stack Overflow

javascript jquery twitter-bootstrap
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 42

There is a better solution than the accepted answer, specifically using data-* attributes. Setting the id to 1 will cause you issues if any other element on the page has id=1. Instead, you can do:

<button class="btn btn-primary" data-toggle="modal" data-target="#yourModalID" data-yourparameter="whateverYouWant">Load</button>

<script>
$('#yourModalID').on('show.bs.modal', function(e) {
  var yourparameter = e.relatedTarget.dataset.yourparameter;
  // Do some stuff w/ it.
});
</script>
e.relatedTarget.dataset.yourparameter
data-yourParameter

Huh, good to know. I guess I've never actually camelCased a data-* attribute before. Thx!

Thats good working for me in lower case

I using the above solution in Yii2 application, it isnt working. :(

jquery - Send parameter to Bootstrap modal window? - Stack Overflow

jquery html twitter-bootstrap modal-dialog window
Rectangle 27 42

There is a better solution than the accepted answer, specifically using data-* attributes. Setting the id to 1 will cause you issues if any other element on the page has id=1. Instead, you can do:

<button class="btn btn-primary" data-toggle="modal" data-target="#yourModalID" data-yourparameter="whateverYouWant">Load</button>

<script>
$('#yourModalID').on('show.bs.modal', function(e) {
  var yourparameter = e.relatedTarget.dataset.yourparameter;
  // Do some stuff w/ it.
});
</script>
e.relatedTarget.dataset.yourparameter
data-yourParameter

Huh, good to know. I guess I've never actually camelCased a data-* attribute before. Thx!

Thats good working for me in lower case

I using the above solution in Yii2 application, it isnt working. :(

jquery - Send parameter to Bootstrap modal window? - Stack Overflow

jquery html twitter-bootstrap modal-dialog window
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 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 10

I found this question as I had a similar problem. While data-backdrop does "solve" the issue; I found another problem in my markup.

I had the button which launched this modal and the modal dialog itself was in the footer. The problem is that the footer was defined as navbar_fixed_bottom, and that contained position:fixed.

After I moved the dialog outside of the fixed section, everything worked as expected.

Confirmed working, just move the modal-div to just before the </body> or something like that.

javascript - Bootstrap modal z-index - Stack Overflow

javascript jquery html css twitter-bootstrap
Rectangle 27 10

I found this question as I had a similar problem. While data-backdrop does "solve" the issue; I found another problem in my markup.

I had the button which launched this modal and the modal dialog itself was in the footer. The problem is that the footer was defined as navbar_fixed_bottom, and that contained position:fixed.

After I moved the dialog outside of the fixed section, everything worked as expected.

Confirmed working, just move the modal-div to just before the </body> or something like that.

javascript - Bootstrap modal z-index - Stack Overflow

javascript jquery html css twitter-bootstrap