CODEWITHSUNDEEP
javascriptjquerycssanimationjquery-animate
Morpheus0x
Morpheus0x

Reputation: 43

Slideshow Animation with JQuery instead of CSS

I want to create a picture slideshow. I took the the example from w3schools because it is exactly what I want, except for the not so nice CSS animation. The CSS animation only fades in the new element which doesn't look smooth. My goal is to fade out the current element and fade in the new one.

Here is the example from w3schools: https://jsfiddle.net/morpheus0x/9frajqws/2/

My first attempt was with with jquery fadeIn() and fadeOut() but it seems that display = none doesn't wait for the fadein/out event: https://jsfiddle.net/morpheus0x/r4dwoytm/1/

I use the chk variable to check if the slide change request came from the user by pressing the buttons.

images and buttons:

<div class="slideshow-container">

  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>

javascript:

  var slideIndex = 1;
  var chk = 0;
  showSlides(slideIndex);

  function plusSlides(n) {
    chk = 1;
    showSlides(slideIndex += n);
  }

  function currentSlide(n) {
    chk = 1;
    showSlides(slideIndex = n);
  }

  function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
      slideIndex = 1
    }
    if (n < 1) {
      slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
      if (chk == 1) {
        $(slides[i]).fadeOut(1000);
        slides[i].style.display = "none";
        chk = 0;
      } else {
        slides[i].style.display = "none";
      }
    }
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    if (chk == 1) {
      $(slides[slideIndex - 1]).fadeIn(1000);
      slides[slideIndex - 1].style.display = "block";
      chk = 0;
    } else {
      slides[slideIndex - 1].style.display = "block";
    }
    dots[slideIndex - 1].className += " active";
  }

My second try was with jquery animate. This somewhat works but it doesn't hide the first element https://jsfiddle.net/morpheus0x/bq85d70o/1/

jsfiddle lines 204 and 216

$(slides[i]).animate({display: 'none'});

when I add a speed value to animate, no images show up:

$(slides[i]).animate({display: 'none', 500});

Upvotes: 0

Views: 280

Answers (1)

synz
synz

Reputation: 583

Your code actually working when I change a little bit and use on click after document load.

Not using the onclick attribute at element.

I'm not sure why it doesn't work when using onclick attribute. Lazy to debug. Hahaha.

At your HTML, add class like below. 

<a class="prev slideme" data-point="-1">&#10094;</a>
<a class="next slideme" data-point="1">&#10095;</a>

<div style="text-align:center">
    <span class="dot slideme" data-point="1"></span>
    <span class="dot slideme" data-point="2"></span>
    <span class="dot slideme" data-point="3"></span>
</div>

JAVASCRIPT, add this 

$(".slideme").on("click",function(){

    var ind = $(this).data("point");

    if($(this).hasClass("dot"))
        showSlides(slideIndex = ind);
    else
        showSlides(slideIndex += ind);
});

ANd JSFiddle example : https://jsfiddle.net/synz/gLkm4jho/

I change other code in JSFiddle example. Add fadeIn() and using hide();

Upvotes: 1

Related Questions