Ad

Javascript Carousel, Display Random Div And Change Every 3 Seconds

- 1 answer

Im trying to create a Javascript carousel that displays a random div and changes every 3 seconds.

I have the random div displaying on load but unsure what to add make it change to the next one.

  var elems = $("div");
  if (elems.length) {
    var keep = Math.floor(Math.random() * elems.length);
    for (var i = 0; i < elems.length; ++i) {
      if (i !== keep) {
        $(elems[i]).hide();
      }
    }
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
<div id="content1">This is content 1</div>
<div id="content2">This is content 2</div>
<div id="content3">This is content 3</div>
<div id="content4">This is content 4</div>
<div id="content5">This is content 5</div>
<div id="content6">This is content 6</div>

Ad

Answer

put your code in an interval like this :

setInterval(function(){
    var elems = $("div");
    if (elems.length) {
      var keep = Math.floor(Math.random() * elems.length);
      for (var i = 0; i < elems.length; ++i) {
        if (i !== keep) {
          $(elems[i]).hide();
        }
        else{
          $(elems[i]).show();
        }
      }
    }
},1000); // change every 1s ;

================================

UPDATE

to hide all divs before interval starts u have two way .

first way is to use css . u can add a css class to divs named "hide-at-start" and define it like this :

.hide-at-start
{
    display:none;
}

and add it to divs :

<div id="content1" class="hide-at-start">This is content 1</div>
<div id="content2" class="hide-at-start">This is content 2</div>
<div id="content3" class="hide-at-start">This is content 3</div>
<div id="content4" class="hide-at-start">This is content 4</div>
<div id="content5" class="hide-at-start">This is content 5</div>
<div id="content6" class="hide-at-start">This is content 6</div>

second way is to do it via javascript like this :

 function showRandomDiv(){
    var elems = $("div");
    if (elems.length) {
      var keep = Math.floor(Math.random() * elems.length);
      for (var i = 0; i < elems.length; ++i) {
        if (i !== keep) {
          $(elems[i]).hide();
        }
        else{
          $(elems[i]).show();
        }
      }
    }
 }

 showRandomDiv();   // runs once

 setInterval(showRandomDiv,1000); // change every 1s ;

i prefer the first solution however .

========================

UPDATE

to add animations there are many ways . for instance u can use css @keyframes like this :

@keyframes fade-in-from-left {
    0% {left: 0px;opacity: 0;}
    50% {left: 20px;opacity: 0.5;}
    100%{left:0px;opacity: 1;}
}


.fade-in-from-left{
    position: relative;
    animation: fade-in-from-left 0.5s forwards;
}

then add fade-in-from-left to your divs like this :

<div class="hide-at-start fade-in-from-left">This is content 1</div>
<div class="hide-at-start fade-in-from-left">This is content 2</div>
<div class="hide-at-start fade-in-from-left">This is content 3</div>
<div class="hide-at-start fade-in-from-left">This is content 4</div>
<div class="hide-at-start fade-in-from-left">This is content 5</div>
<div class="hide-at-start fade-in-from-left">This is content 6</div>
Ad
source: stackoverflow.com
Ad