the second slide doesn't work

Question

I have a problem with slider,meaningfully pictures change only one time. I know only the next button wokrs , but it's fine,i think the each function is needed.

My code:

class Karuzela {

  constructor() {
    this.next = $('.next');
    this.prev = $('.prev')
    this.current = $('.active');
    this.nextImg = this.current.next();
    this.events();
  }
  events() {
    this.next.click(this.nextSlide.bind(this));

  }
  nextSlide() {
    if (this.nextImg.length) {

      this.current.removeClass('active').css('z-index', -10);
      this.nextImg.addClass('active').css('z-index', 10);
    }

  }

}

var karuzela = new Karuzela

body {
  font-family: "Arial", sans-serif;
  font-size: 14px;
  color: #fff;
  background: #333;
}

a {
  color: #fff;
  text-decoration: none;
}

h1 {
  text-align: center;
}

.container {
  width: 540px;
  margin: 40px auto;
  overflow: auto;
}

.slider-inner {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
  float: left;
  padding: 3px;
  border: #666 solid 1px;
}

.slider-inner img {
  display: none;
  width: 500px;
  height: 300px;
}

.slider-inner img.active {
  display: inline-block;
}

.prev,
.next {
  float: left;
  margin-top: 130px;
  cursor: pointer;
}

.prev {
  position: relative;
  margin-right: -45px;
  z-index: 100;
}

.next {
  position: relative;
  margin-left: -45px;
  z-index: 100;
}

<div class="container">
  <h1>JQSlider</h1>
  <div class="slider-outer">
    <img src="images/arrow-left.png" class="prev" alt="Prev">
    <div class="slider-inner">
      <img src="http://s3.amazonaws.com/factmag-images/wp-content/uploads/2015/06/apple-music-150615-616x440.jpg" class="active">
      <img src="http://podcast.iu.edu/upload/IUSEUITS/images/300x300.gif">
      <img src="https://pbs.twimg.com/profile_images/847437647186243584/U1Ie4x2d.jpg">
    </div>
    <img src="images/arrow-right.png" class="next" alt="Next">
  </div>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</div>

Please explain and correct my code.

Thanks.

score 0 · Accepted Answer · answered Nov 07 '17 at 07:53

You need to advance current to the next image every time you move forward:

class Karuzela {

  constructor() {
    this.next = $('.next');
    this.prev = $('.prev')
    this.current = $('.active');
    this.events();
  }
  events() {
    this.next.click(this.nextSlide.bind(this));

  }
  nextSlide() {
    var next = this.current.next(); // get the next
    
    if (next.length) {
      this.current.removeClass('active').css('z-index', -10);
      next.addClass('active').css('z-index', 10);
      
      this.current = next; // change current to next
    }

  }

}

var karuzela = new Karuzela

body {
  font-family: "Arial", sans-serif;
  font-size: 14px;
  color: #fff;
  background: #333;
}

a {
  color: #fff;
  text-decoration: none;
}

h1 {
  text-align: center;
}

.container {
  width: 540px;
  margin: 40px auto;
  overflow: auto;
}

.slider-inner {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
  float: left;
  padding: 3px;
  border: #666 solid 1px;
}

.slider-inner img {
  display: none;
  width: 500px;
  height: 300px;
}

.slider-inner img.active {
  display: inline-block;
}

.prev,
.next {
  float: left;
  margin-top: 130px;
  cursor: pointer;
}

.prev {
  position: relative;
  margin-right: -45px;
  z-index: 100;
}

.next {
  position: relative;
  margin-left: -45px;
  z-index: 100;
}

<div class="container">
  <h1>JQSlider</h1>
  <div class="slider-outer">
    <img src="images/arrow-left.png" class="prev" alt="Prev">
    <div class="slider-inner">
      <img src="http://s3.amazonaws.com/factmag-images/wp-content/uploads/2015/06/apple-music-150615-616x440.jpg" class="active">
      <img src="http://podcast.iu.edu/upload/IUSEUITS/images/300x300.gif">
      <img src="https://pbs.twimg.com/profile_images/847437647186243584/U1Ie4x2d.jpg">
    </div>
    <img src="images/arrow-right.png" class="next" alt="Next">
  </div>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</div>

the second slide doesn't work

1 Answers1