hide and show in jQuery selected element

Question

I need to create a slideshow that displays one image at a time and each image is shown/hidden clicking on a div. I came to a login in jQuery, but this hide just one time and the other images are shown one after another without being hidden. Plus, I cannot click on the same div once been clicked.

EDITED with code snipppet.

$(document).ready(function(){
  $('.imageslide:first').attr('current', true).show();
  $('.slider-block').append('') //add the div for the pagination

    var titles_pagination = $('.slider-title');
    titles_pagination.each(function(){
        $('.pagination-slider').append(''+$(this).text()+"") //gets the titles and relative urls to the slider items
    });

    $('.imageslide').each(function( i, el ){ //add a numbered id for each figure
        $(el).attr('id','image-num-'+i);
    });

    $('.select-image').click(function(){
        var index = $('.select-image').index(this); //the index of the selector
        var imageShown = $('.imageslide[current]').index(); //the index of the current image shown
        if (index == imageShown) {
            //pass
        }
        else {
            $('.imageslide').eq(imageShown).attr('current', false).hide();
            $('.imageslide').eq(index).attr('current', true).fadeIn();
            
        }
    });
});

.imageslide{
  display: none;
  position: relative;
  }

img{
  width: 300px;
}

.slider-block{
  justify-content: center;
  display: flex;

}

.slider-title{
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0.6em;
  padding-left: 1.4em;
  padding-right: 1.4em;
  background-color: black;
  color: white;
}

.pagination-slider{
  margin-top: 1em;
}

.select-image{
  background-color: black;
  color: white;
  padding: 0.6em;
  padding-left: 1.4em;
  padding-right: 1.4em;
  margin: 0.5em;
  cursor: pointer;
}



    
    Fig 1
    
    Fig 2
    
    Fig 3
    
    Fig 4
    
    Fig 5

charlietfl · Accepted Answer

The basic problem is setting the attribute "current" to false does not remove the attribute so if you inspect the elements in dev tools inspector you will see there are more than one. This throws off the indexing when you use $('.imageslide[current]').index();

I suggest that instead of using a custom attribute you just add and remove a className "current" instead

Working example

$(document).ready(function() {
  $('.imageslide:first').addClass('current').show();
  $('.slider-block').append('') //add the div for the pagination

  var titles_pagination = $('.slider-title');
  titles_pagination.each(function() {
    $('.pagination-slider').append('' + $(this).text() + "") //gets the titles and relative urls to the slider items
  });

  var $slides = $('.imageslide');
  
  $('.select-image').click(function() {
    var index = $(this).index(); //the index of the selector
    var $nextSlide = $slides.eq(index);
    // don't do anything if same indexed slide already has current class
    if (!$nextSlide.hasClass('current')) {
      $slides.filter('.current').removeClass('current').fadeOut(function() {
        $nextSlide.addClass('current').fadeIn()
      });
    }
  });
});

.imageslide {
  display: none;
  position: relative;
}

img {
  width: 300px;
}

.slider-block {
  justify-content: center;
  display: flex;
}

.slider-title {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0.6em;
  padding-left: 1.4em;
  padding-right: 1.4em;
  background-color: black;
  color: white;
}

.pagination-slider {
  margin-top: 1em;
}

.select-image {
  background-color: black;
  color: white;
  padding: 0.6em;
  padding-left: 1.4em;
  padding-right: 1.4em;
  margin: 0.5em;
  cursor: pointer;
}

hide and show in jQuery selected element

Answers (1)

Related Questions