CODEWITHSUNDEEP
javascriptjquery
Reza Saadati
Reza Saadati

Reputation: 1274

Slider not showing all images using next().show()

I am just trying to create a simple slider. My problem is when I click on 'Next', the first image will be hidden but only the second image will be displayed. So I can only click once on the 'Next' button.

$(document).ready(function() {
    $('.next').on('click', function() {
        $('.slider img').hide().next().show();
    });
});

How can I hide only the single image which is not hidden and display the next image?

https://jsfiddle.net/n339tzff/

Upvotes: 0

Views: 104

Answers (2)

SilverSurfer
SilverSurfer

Reputation: 4365

I made a short example for you, hope it helps:

$(document).ready(function() {
    var pos = 0;
    $('.back').on('click', function() {
        if(pos>0) pos--
         $(".slider > img").hide()
         $(".slider > img").eq(pos).fadeIn("slow");
        if(pos==0) $(this).hide()
        else $('.next').show()
    });

    $('.next').on('click', function() {
        if(pos<2) pos++
        $(".slider > img").hide()
        $(".slider > img").eq(pos).fadeIn("slow");
        if(pos==2) $(this).hide()
        else $('.back').show()
    });
});
.slider {
    overflow: hidden;
    width: 100%;
    height: 400px;
}
.slider img { 
  float: left; 
}
.next, .back {
  width: 100px; 
  padding: 5px;
  text-align: center;
  background-color: skyblue;
  float: left;
  margin: 10px;
  cursor: pointer;
}
.back{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
  <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
  <img src="https://www.w3schools.com/css/img_lights.jpg" alt="">
  <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" alt="">
  <img src="http://images.all-free-download.com/images/graphiclarge/a_london_cityscape_515129.jpg" alt="">
  <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=1920x400:format=jpg/path/s86d6d6c688ca86fa/image/ie4265a3cd27b2997/version/1451246087/image.jpg" alt="">
</div>
<div class="back">Back</div>
<div class="next">Next</div>

Upvotes: 1

RaJesh RiJo
RaJesh RiJo

Reputation: 4400

Instead of show()/hide() images try adding .active class to active image. Check below snippet for reference.

$(document).ready(function() {
  $('.next').on('click', function() {
    $('.slider').find('img.active').removeClass('active').next().addClass('active');
  });
  $('.back').on('click', function() {
    $('.slider').find('img.active').removeClass('active').prev().addClass('active');
  });
});
.slider {
  overflow: hidden;
  width: 100%;
  height: 400px;
}

.slider img {
  float: left;
  display: none;
}

.next,
.back {
  width: 100px;
  padding: 5px;
  text-align: center;
  background-color: skyblue;
  float: left;
  margin: 10px;
  cursor: pointer;
}

img.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
  <img class="active" src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
  <img src="https://www.w3schools.com/css/img_lights.jpg" alt="">
  <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" alt="">
  <img src="http://images.all-free-download.com/images/graphiclarge/a_london_cityscape_515129.jpg" alt="">
  <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=1920x400:format=jpg/path/s86d6d6c688ca86fa/image/ie4265a3cd27b2997/version/1451246087/image.jpg" alt="">
</div>
<div class="back">Back</div>
<div class="next">Next</div>

Upvotes: 1

Related Questions