'Implementing image slider in index.php

so I wanna add on my index.php an image slider. I followed a tutorial about this but the css part have no effect on my image. At first I was only seeing my images down below each other and after I proceed with the tutorial I can only see my first image. I am using an .css file for this. Here is the code:

index.html:

#slider {
  overflow: hidden;
}

#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
}

#slider figure img {
  width: 20%;
  float: left;
  animation: 20s slider infinite;
}

@keygrames slider {
  0% {
    left: 0;
  }
  20% {
    left: 0;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
}
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Index</title>
  <link rel="stylesheet" href="indexCSS.css">
</head>


<body>
  <div class="topnav">
    <a href="#">Welcome <?php echo $row["name"]; ?></a>
    <a href="logout.php">Logout</a>
    <a class="active" href="index.php">Home</a>
  </div>

  <div id="slider">
    <figure>
      <img src="img/img1.jpg">
      <img src="img/img2.jpg">
      <img src="img/img3.jpg">
      <img src="img/img4.jpg">
      <img src="img/img1.jpg">
    </figure>
  </div>



</body>

</html>
htmlcssimageslider


Solution 1:[1]

Check this if you find it helpful.

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, #00a9ab 0%, #69279d 100%);
}

.slider-container {
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.slider {
  position: absolute;
  display: flex;
  height: 100%;
  width: 500%;
  animation: slide 15s infinite;
}

.slide {
  position: relative;
  display: inline-block;
  width: 25%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide img {
  width: 80%;
  height: auto;
}
.slide:nth-of-type(2) img {
  width: 40%;
  height: auto;
}

@keyframes slide {
  15% {
    left: 0;
  }
  20% {
    left: -100%;
  }
  35% {
    left: -100%;
  }
  40% {
    left: -200%;
  }
  55% {
    left: -200%;
  }
  60% {
    left: -300%;
  }
  75% {
    left: -300%;
  }
  80% {
    left: -400%;
  }
  95% {
    left: -400%;
  }
  100% {
    left: 0;
  }
}
<div class="slider-container">
  <div class="slider">
    <div class="slide"><img src="https://res.cloudinary.com/cloud-image-storage/image/upload/v1550946580/screen.png" alt="" /></div>
    <div class="slide">
      <img src="https://res.cloudinary.com/cloud-image-storage/image/upload/v1550892255/screen-2.png" alt="" />
    </div>
    <div class="slide">
      <img src="https://res.cloudinary.com/cloud-image-storage/image/upload/v1550946585/screen-3.png" alt="" />
    </div>
    <div class="slide">
      <img src="https://res.cloudinary.com/cloud-image-storage/image/upload/v1550892255/screen-4.png" alt="" />
    </div>
    <div class="slide">
      <img src="https://res.cloudinary.com/cloud-image-storage/image/upload/v1550946580/screen.png" alt="" />
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kevin

Related Questions