Html Question posted in
Some basic documentation can be found here.

How to create a slider with a fade effect using only HTML and CSS?

I am attempting to create a slider using only HTML and CSS to avoid the loading time of jQuery/JavaScript. My slider will consist of only two slides; there will be no change in the number of slides.

The first loop is working fine; however, it’s messing up after that and not functioning properly.

Note:- I have used 20% and 80% breakpoints in the animation CSS because I want a fade effect at the beginning and disappearing, respectively.

body {
  background-color: #131418;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow: hidden;
}

.slide-container {
  margin: 50vh auto 0 auto;
  transform: translateY(-50%);
  width: 600px;
  height: 450px;
  overflow: hidden;
}

img {
  width: 20%;
}

.image-container {
  display: inline-block;
  width: 3000px;
  height: 400px;
  position: relative;
  transition: left 1s;
}

.slider-image {
  float: left;  
}

.slider-image.one {
  animation: slide 4s infinite;
  animation-delay: 0s;
}

.slider-image.two {
  animation: slide 4s infinite;
  animation-delay: 4s; 
  position: absolute;
  inset: 0;
  opacity: 0;
}


@keyframes slide {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
  <div class="slide-container">
    <div class="image-container">
      <img src="https://images.unsplash.com/flagged/photo-1556667885-a6e05b14f2eb?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" alt="" class="slider-image one">
      <img src="https://images.unsplash.com/photo-1556815054-cd8e705a758e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="" class="slider-image two">
    </div>  
</div>
Tags:

2

Answers


  1. 0

    Only 2 slides? My plan is to use two types of complementary animation. When one is 50% the other is 0% or 100%. The animation duration is 4s so the offset between them should be 2s.

    body {
  background-color: #131418;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow: hidden;
}

.slide-container {
  margin: 50vh auto 0 auto;
  transform: translateY(-50%);
  width: 600px;
  height: 450px;
  overflow: hidden;
}

img {
  width: 20%;
}

.image-container {
  display: inline-block;
  width: 3000px;
  height: 400px;
  position: relative;
  transition: left 1s;
}

.slider-image {
  float: left;
}

.slider-image.one {
  animation: slide 4s infinite;
  animation-delay: 0s;
}

.slider-image.two {
  animation: slide 4s infinite;
  animation-delay: 2s;
  position: absolute;
  inset: 0;
  opacity: 0;
}

@keyframes slide {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
    <div class="slide-container">
  <div class="image-container">
    <img src="https://images.unsplash.com/flagged/photo-1556667885-a6e05b14f2eb?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" alt="" class="slider-image one">
    <img src="https://images.unsplash.com/photo-1556815054-cd8e705a758e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="" class="slider-image two">
  </div>
</div>
    Login or Signup to reply.
  2. 0

    The reason why its not working as you intend is very simple: Your animation is not set up correctly for what you are trying to do.

    Here is what happens:

    1. Slide 1 animation starts
    2. Slide 1 animation finishes after 4s (Slide 1 is invisible at this point)
    3. Slide 1 animation and Slide 2 animation both start simultaneously
    4. During the animation both slides become visible simultaneously and as slide 2 is positioned "above" slide 1, slide 2 is visible while slide 1 is still visible its just "behind" slide 2 (if slide 2 had transparent areas, youd be able to see slide 1 behind it in these areas)
    5. When the animations have finished, as they are set to repeat infinitely, they do exactly that
    6. When the animations restart, the exact same thing as in 4. happens again

    I suspect the thing you are not aware of is that animation-delay only happens at the start of the animation and does not happen again when it repeats due to being set to repeat infinitely.
    The easiest way to fix your issue is to change your animation to arrive back at opacity: 0; at 50% and then remain at that until 100%, then set your animation time to 8s on both slides (keep the 4s delay on slide 2).
    Keep in mind that this fix only works when you are using 2 slides.
    Specifically, you want the animation to arrive back at opacity: 0; at 100% / numSlides where numSlides is the number of total slides and you want the animation time set to the total length of the animation through all slides.
    That way the inactive slide(s) stay hidden for all the time that the other slide(s) are visible.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search