CODEWITHSUNDEEP
jqueryhtmlcss
Mfoto94
Mfoto94

Reputation: 47

How to fix opacity in a jquery slider gallery

I have created a slideshow gallery with jquery and I have a sort of problem about opacity.

When the timer starts, the slider works in the right way but when it reachs the 100% of the opacity, it blinks the first image and set automatically the opacity to 100% for a few seconds.

I have encloused a link that bring you to the video where it's explain the problem directly on the website.

Visit http://projectdesign.altervista.org/video/slider.mp4

/* slider */

let slideIndex = -1;
const SLIDE_NUMBER = 4;
let slide_timeout;
showSlides(1);

function showSlides(offset) {
  let slides = $(".slide").css("display", "none");
  let dots = $(".dot").removeClass("active");

  slideIndex = (slideIndex + offset) % SLIDE_NUMBER;

  $(slides.get(slideIndex)).css("display", "block");
  $(dots.get(slideIndex)).addClass("active");

  slide_timeout = setTimeout(showSlides.bind(null, 1), 5000);
}

$(".next").click(() => {
  clearTimeout(slide_timeout);
  showSlides(1);
});

$(".prev").click(() => {
  clearTimeout(slide_timeout);
  showSlides(-1);
});
/*SLIDER */

.container-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 0;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.dot {
  height: 3px;
  width: 20px;
  margin: 0 2px;
  background-color: white;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: orange;
}


/* Fading animation */

@-webkit-keyframes fade {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
  }
  85% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateY(0);
    opacity: 0;
  }
}

@keyframes fade {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
  }
  85% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateY(0);
    opacity: 0;
  }
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 5s;
  animation-name: fade;
  animation-duration: 5s;
}

.box-dot {
  position: absolute;
  bottom: 2%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- start slider -->
<div class="container-slider">

  <div class="slide fade">
    <img src="foto/1.jpg" class="img-sl" alt="">
  </div>

  <div class="slide fade">
    <img src="foto/2.jpg" class="img-sl" alt="">
  </div>

  <div class="slide fade">
    <img src="foto/3.jpg" class="img-sl" alt="">
  </div>

  <div class="slide fade">
    <img src="foto/4.jpg" class="img-sl" alt="">
  </div>

  <a class="prev"><i class="fas fa-angle-left"></i></a>
  <a class="next"><i class="fas fa-angle-right"></i></a>

  <div class="box-dot">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>
<!-- end container slider -->

Remove blinking image.

Upvotes: 2

Views: 74

Answers (1)

Joe Fitzsimmons
Joe Fitzsimmons

Reputation: 1063

I'd add 'animation-fill-mode:forwards' so the animation ends on the last frame.

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 5s;
  animation-name: fade;
  animation-duration: 5s;
  animation-fill-mode:forwards
}

Upvotes: 1

Related Questions