CODEWITHSUNDEEP
javascriptjquerycss
intercoder
intercoder

Reputation: 2399

Carousel effect - Making items disappear after first iteration

I'm trying to have each item inside the carousel disappear again after each iteration. Loop keeps repeating, but items do not disappear.Here is a codepen with the code.

$(function() {
  var $items = $('img','.container');
  var currentIdx = 0;
  // var timer;

  var cycleItems = function() {
    console.log('Running from cycleItems');
   
    
  $items.each(function(index, item) {
    var $self = $(item);
    
    setTimeout(function() {
      
      console.log(`We are at this item: ${item}`);        
      console.log('currentindex has value : ' + currentIdx );
      console.log('And we are at this  index: ' + index );        
      $self.removeClass('isHidden').addClass('isActive');
      currentIdx++ 

     }, 1000*index); /* End of setTimeOut */
              
    if ( index == $items.length - 1 ) {      
    //  item.removeClass('isActive').addClasss('isHidden'); 
      console.log('Items : '+ $items);
      setTimeout( cycleItems, (index + 1) * 1000);
    }
      
    }) /* End of each */
    
  } /* End of cycleItems func */
  
  cycleItems();
  
});   
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  background: black;
}
.container {
  display: inline;
  //border: 1px solid white;

}
.slide {} .isActive {
  visibility: visible;
}
.isHidden {
  visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=container>
  <img class='isActive' src="http://placehold.it/350x150">
  <img class='isHidden' src="http://placehold.it/350x150">
  <img class='isHidden' src="http://placehold.it/350x150">
  <img class='isHidden' src="http://placehold.it/350x150">
</div>

Upvotes: 0

Views: 36

Answers (1)

Fondas
Fondas

Reputation: 36

As Palo said in the comments, just add $("img").addClass("isHidden").

code:

$(function() {
  var $items = $('img','.container');
  var currentIdx = 0;
  // var timer;

  var cycleItems = function() {
    console.log('Running from cycleItems');


  $items.each(function(index, item) {
    var $self = $(item);

    setTimeout(function() {

      console.log(`We are at this item: ${item}`);        
      console.log('currentindex has value : ' + currentIdx );
      console.log('And we are at this  index: ' + index );    

      $("img").addClass("isHidden") /* inputted piece of code */

      $self.removeClass('isHidden').addClass('isActive');

      currentIdx++ 

     }, 1000*index); /* End of setTimeOut */

    if ( index == $items.length - 1 ) {      
    //  item.removeClass('isActive').addClasss('isHidden'); 
      console.log('Items : '+ $items);
      setTimeout( cycleItems, (index + 1) * 1000);
    }

    }) /* End of each */

  } /* End of cycleItems func */

  cycleItems();
  //clearTimeout(timer);

  /*var toggleInvisible = function () {

  }*/
});

Upvotes: 2

Related Questions