Translate an image slider coded in jQuery to pure JS

Question

I found a tutorial for an image slider made with jQuery. I was wanting to recreate the same exact functionality in pure JS, but I am facing some problems translating the functionality of animate function of jQuery to pure JS.

Here is the code for it. (The problem I am facing is with the opacity shifting)

HTML: (from the tutorial)

<!DOCTYPE html>
<html>
  <head>
    <title>Jquery Slider Demo</title>
    <script src="jquery-2.1.3.min.js"  type="text/javascript" ></script>
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="slides">
      <img src="img/1.jpg" />
      <img src="img/2.jpg" />
      <img src="img/3.jpg" />
      <img src="img/4.jpg" />
    </div>
  </body>
</html>

JS (from the tutorial):

$(function(){
  // initalizing the first image to class 'top'
  $('.slides img:first').addClass('top');
  //function to alter the image index by changing the class
  var change = function (){
    var curr = $('.slides img.top');
    var next = curr.next(); 

    // if the next image is not available then 
    // set the class-top to the first image
    // then vanish the current image to
    // show the previous next image
    if(!next.length){

      next = $('.slides img:first');
      next.addClass('top');

      curr.animate({opacity: 0.0},1000, function() {
        curr.removeClass('top');
        curr.css({opacity: 1.0});
      });

    }else{

      // pick the next image
      // set the opacity to 0
      // den use animation to make it appear
      // above the top image
      next.css({opacity: 0.0})
        .addClass('top')
        .animate({opacity: 1.0}, 1000, function() {
        curr.removeClass('top');
      });
    }
  }

  // repeat the function execution for every 3 secs
  setInterval(change, 3000 );


});

What I have so far:

(function(){

  var list = document.getElementsByTagName('img');

  for (var i=0; i<list.length; i++ ) {
    list[i].addEventListener('transitionend', function(){
      this.style.opacity = "1";
      this.classList.remove('top');
    })
  };

  list[0].classList.add('top');

  var change = function () {
    var curr = document.querySelector('img.top');
    var next = curr.nextElementSibling;

    if(next == undefined) {
      next = list[0]
      next.classList.add('top');
      curr.style.opacity = "0";
    }

    else {
      curr.style.opacity = "0";
      console.log('i am working')
      next.classList.add('top');
    }
  }

  setInterval(change,3000);

})();

Answer 1

As mentionned in comment below your question, the best way to have a nice fading effect, without jQuery, is CSS.

 function slider(){ var list = document.getElementsByTagName('img'); list[0].classList.add('top'); var change = function () { console.log('I am working'); var curr = document.querySelector('img.top'); var next = curr.nextElementSibling; if(next == undefined) { next = list[0] } curr.classList.remove('top'); next.classList.add('top'); } setInterval(change,3000); }

 .slides img { /* this is just for the demo slider to run as a slider... */ position:absolute; top:0; left:0; width:100%; /* This is the CSS for fading */ -webkit-transition: 1s all linear; opacity: 0; } .slides img.top { opacity: 1; }

 <body onload="slider();"> <div class="slides"> <img src="https://lorempixel.com/400/200/sports/image 1" /> <img src="https://lorempixel.com/400/200/sports/image 2" /> <img src="https://lorempixel.com/400/200/sports/image 3" /> <img src="https://lorempixel.com/400/200/sports/image 4" /> </div> </body>

CodePen

Translate an image slider coded in jQuery to pure JS

Question

1 answers

solution1
2 ACCPTED 2017-08-18 17:37:32

Translate an image slider coded in jQuery to pure JS

Question

1 answers

solution1 2 ACCPTED 2017-08-18 17:37:32

solution1
2 ACCPTED 2017-08-18 17:37:32