Slideshow picture disapears


Tags: javascript,jquery,html,css,slideshow

Problem :

I have a CSS + Javascripts slideshow, taken from the W3Schools website example.

This is the code, adapted to my web aplication (almost the same):

$(document).ready(function() {
  var slideIndex = 1;

  function showSlides(n) {
    var slides = $(".mySlides");
    var i;

    if (n > slides.length) {
      slideIndex = 1;
    }

    if (n < 1) {
      slideIndex = slides.length;
    }

    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }

    slides[slideIndex - 1].style.display = "block";
  }

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

  showSlides(slideIndex);

  $(".prev").click(function() {
    plusSlides(-1);
  });

  $(".next").click(function() {
    plusSlides(1);
  });

});
@-webkit-keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}
@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}
.slideshow-container {
  position: relative;
  margin: auto;
}
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 0;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 1.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);
}
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshow-container">
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img class="img-responsive" src="pic1.jpg" alt='Entrada'>
    <div class="text">1</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img class="img-responsive" src="pic2.jpg">
    <div class="text">2</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img class="img-responsive" src="pic3.jpg">
    <div class="text">3</div>
  </div>

  <a class="prev">&#10094;</a>
  <a class="next">&#10095;</a>
</div>

The page loads correctly, but the pictures disapear after a second or so.

How can I fix it?



Solution :

I've had the same issue a while back. I've solved it by adding animation-fill-mode: forwards;.

Usually, animation runs and stops, then goes back to the origional style.

With animation-fill-mode you can change that behaviour. forwards will keep the result of the animation alive after the animation.

See the bottom of the CSS snippet for the implementation.

$(document).ready(function() {
  var slideIndex = 1;

  function showSlides(n) {
    var slides = $(".mySlides");
    var i;

    if (n > slides.length) {
      slideIndex = 1;
    }

    if (n < 1) {
      slideIndex = slides.length;
    }

    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }

    slides[slideIndex - 1].style.display = "block";
  }

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

  showSlides(slideIndex);

  $(".prev").click(function() {
    plusSlides(-1);
  });

  $(".next").click(function() {
    plusSlides(1);
  });

});
@-webkit-keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}
@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}
.slideshow-container {
  position: relative;
  margin: auto;
}
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 0;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 1.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);
}
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-fill-mode: forwards; 
  animation-name: fade;
  animation-duration: 1.5s;
  animation-fill-mode: forwards; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshow-container">
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img class="img-responsive" src="http://placehold.it/350x150" alt='Entrada'>
    <div class="text">1</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img class="img-responsive" src="http://placehold.it/350x150">
    <div class="text">2</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img class="img-responsive" src="http://placehold.it/350x150">
    <div class="text">3</div>
  </div>

  <a class="prev">&#10094;</a>
  <a class="next">&#10095;</a>
</div>


    CSS Howto..

    Unsure how to use border-bottom in CSS

    Why jQuery.css does not apply a property if it is not supported and how is this being checked?

    How to remove Left property when position: absolute?

    How to go about containing a float within a div with variable space

    How to put borders closer to the text and image and make background gray in CSS?

    CSS: How to create colsgroup like semantic-ui way

    How to create vertical ruler in CSS/html?

    How to align div objects in rows

    How to figure out what is going on with this nice CSS horizontal menu? [closed]

    How to build those rectangular with picture and text css bootsrap? [closed]

    CSS: How to place next to each other 2 images with 50 % width?

    Background Image in WebView showing in Simulator, but not on Device

    How do I display other info on page using only CSS and HTML

    How do I make a Google Map span 100% remaining height between header and footer?

    How can I fill in the background behind text when I hover over it in a nav bar? [HTML/CSS]

    How to create a border that will outline div minus the margins

    How to set div to display in only one line?

    Jquery Show Hide with attribute

    How to open a CSS-only popup automatically on page load/using Javascript?

    How to disable by overriding webkit-transform and not deleting the line

    How can I get jQuery to toggle a class with fadeToggle?

    How to make a transparent border using CSS?

    How do I know which CSS is overriding my background image?

    How to set an auto minimum width on column with css?

    How to make image scale as per browser window?

    How to Highlight a list item after user clicks on link

    How to use an image as a frame, and scroll inside? Simulating a phone on a website

    How to convert external css properties to inline property? [closed]

    How to make a multi step header

    How do I apply odd/even styles to elements while taking into account excluded classes? [duplicate]