I'm kind of stumped. :) I'm new to Javascript, but have typically found lots of great help on the net when I Googled. The best help I could e up with this time was here, but the docs said it was better to post a new question than sidetrack the original post. So, here's my question: I'm using Bootstrap3's carousel I'm trying to pick a random starting image, and then continue with random images after that. I've figured out how to pick the first slide, but can't figure out how to pick the next slide. As it stands, it just continues to cycle through the show.

<div id="myCarousel" class="carousel slide" data-wrap="true" data-ride="carousel">
<!-- Slider Content (Wrapper for slides )-->
    <div class="carousel-inner">
        <div class="item">
            <img src="images/slides/AAA.jpg" alt="AAA" />
        </div>
        <div class="item">
            <img src="images/slides/BBB.jpg" alt="BBB" />
        </div>
        <div class="item">
            <img src="images/slides/CCC.jpg" alt="CCC" />
        </div>
        <div class="item">
            <img src="images/slides/DDD.jpg" alt="DDD" />
        </div>
        <div class="active item">
            <img src="images/slides/EEE.jpg" alt="EEE" />
        </div>
    </div>
</div>

<script src="js/bootstrap.js"></script>
<script type='text/javascript'>
     $(document).ready(function() {

         /* Pick a random number and apply it to the first slide in the slideshow item */
         $('.item').eq(Math.floor((Math.random() * $('.item').length))).addClass("active");

         /* Pick random next slide */
         $('#myCarousel').carousel(Math.floor((Math.random() * $('.item').length))));

     });
</script>

Thanks. :)

I'm kind of stumped. :) I'm new to Javascript, but have typically found lots of great help on the net when I Googled. The best help I could e up with this time was here, but the docs said it was better to post a new question than sidetrack the original post. So, here's my question: I'm using Bootstrap3's carousel I'm trying to pick a random starting image, and then continue with random images after that. I've figured out how to pick the first slide, but can't figure out how to pick the next slide. As it stands, it just continues to cycle through the show.

<div id="myCarousel" class="carousel slide" data-wrap="true" data-ride="carousel">
<!-- Slider Content (Wrapper for slides )-->
    <div class="carousel-inner">
        <div class="item">
            <img src="images/slides/AAA.jpg" alt="AAA" />
        </div>
        <div class="item">
            <img src="images/slides/BBB.jpg" alt="BBB" />
        </div>
        <div class="item">
            <img src="images/slides/CCC.jpg" alt="CCC" />
        </div>
        <div class="item">
            <img src="images/slides/DDD.jpg" alt="DDD" />
        </div>
        <div class="active item">
            <img src="images/slides/EEE.jpg" alt="EEE" />
        </div>
    </div>
</div>

<script src="js/bootstrap.js"></script>
<script type='text/javascript'>
     $(document).ready(function() {

         /* Pick a random number and apply it to the first slide in the slideshow item */
         $('.item').eq(Math.floor((Math.random() * $('.item').length))).addClass("active");

         /* Pick random next slide */
         $('#myCarousel').carousel(Math.floor((Math.random() * $('.item').length))));

     });
</script>

Thanks. :)

• javascript
• twitter-bootstrap
• carousel

• 1 For me, I saw a lot of examples of this and none worked. Seemed the writing of 'active' did not work or made the carousel pletely disappear. But really all I wanted to do was on page load find a random spot from among the 15 or so carousel items I have (not images, sections of text) then the carousel can pick up and play from that point forward. Your simple first random pick script works perfectly for my needs! Now I can finally get to bed. ;-) Thanks! – Player 0001 Commented Aug 22, 2016 at 4:54

1 Answer 1

jQuery

var currentSlide;
var rand;
$(document).ready(function() {
  currentSlide = Math.floor((Math.random() * $('.item').length));
  rand = currentSlide;
  $('#myCarousel').carousel(currentSlide);
  $('#myCarousel').fadeIn(1000);
  setInterval(function(){ 
    while(rand == currentSlide){
      rand = Math.floor((Math.random() * $('.item').length));
    }
    currentSlide = rand;
    $('#myCarousel').carousel(rand);
  },3000);
});

CSS

#myCarousel {
    display:none;   
}

HTML

<div id="myCarousel" class="carousel slide" data-wrap="true">
....

Well here is an example of how I would do it... I also accounted for the possibility of it randomly changing to the same slide.

http://www.bootply./99052

You will notice however that depending on which slide is chosen the carousel will transition either left or right.. The bootstrap carousel was designed to display linear images. There may be a way to manipulate the order of the items using jQuery so that it always slides the same way. If you are looking for that it could be done but would take some work and would probably be best handled in another question.

Als you can remove the data-ride="carousel" from you html and that will make it so the carousel will initialize without cycling.