How to Create CSS Slideshow

In this CSS article we want to learn How to Create CSS Slideshow, CSS slideshow is popular way to display series of images or content in visually appealing and dynamic way on a website. using Cascading Style Sheets (CSS), it is possible to create stunning slideshows that can add an extra element of interest to your website. in this article we want to talk about how to Create CSS slideshow.

How to Create CSS Slideshow

So first of all we need to create the HTML structure of the slideshow. first we need to create container div for the slideshow, after that we can add a list element for each slide. for example.

<div class="slideshow-container">
  <ul>
    <li><img src="slide1.jpg"></li>
    <li><img src="slide2.jpg"></li>
    <li><img src="slide3.jpg"></li>
  </ul>
</div>

<ul>

</ul>

</div>

After that we need to add some basic CSS to position and style the slideshow, this CSS sets the position and dimensions of the slideshow container, sets the list to width of 300% to accommodate three slides and sets the position and dimensions of each slide.

.slideshow-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 300%;
  height: 400px;
  left: 0;
  transition: left 1s ease;
}

li {
  position: relative;
  float: left;
  width: 33.333%;
  height: 100%;
}

.slideshow-container {

position: relative;

width: 100%;

height: 400px;

overflow: hidden;

}

ul {

position: relative;

margin: 0;

padding: 0;

list-style: none;

width: 300%;

height: 400px;

left: 0;

transition: left 1s ease;

}

li {

position: relative;

float: left;

width: 33.333%;

height: 100%;

}

For creating slideshow effect we want to use JavaScript to transition the slides,, this JavaScript code creates three functions: plusSlides, currentSlide and showSlides. showSlides function sets the position of the current slide to 0 and the position of the other slides to -100%.

var slideIndex = 1;
showSlides(slideIndex);

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

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

function showSlides(n) {
  var i;
  var slides = document.getElementsByTagName("li");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.left = "-100%";
  }
  slides[slideIndex-1].style.left = "0";
}

var slideIndex = 1;

showSlides(slideIndex);

function plusSlides(n) {

showSlides(slideIndex += n);

}

function currentSlide(n) {

showSlides(slideIndex = n);

}

function showSlides(n) {

var i;

var slides = document.getElementsByTagName("li");

var dots = document.getElementsByClassName("dot");

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

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

for (i = 0; i < slides.length; i++) {

slides[i].style.left = "-100%";

}

slides[slideIndex-1].style.left = "0";

}

And finally we need to add navigation to the slideshow. we can do this by adding buttons or dots to allow users to navigate through the slides.

<div class="slideshow-container">
  <ul>
    <li><img src="slide1.jpg"></li>
    <li><img src="slide2.jpg"></li>
    <li><img src="slide3.jpg"></li>
  </ul>
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

<ul>

</ul>

</div>

This HTML code adds two buttons, one to move to the previous slide and one to move to the next slide. We can also add dots to indicate the current slide.

<div class="slideshow-container">
  <ul>
    <li><img src="slide1.jpg"></li>
    <li><img src="slide2.jpg"></li>
    <li><img src="slide3.jpg"></li>
  </ul>
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
  <div class="dots">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
  </div>
</div>

<ul>

</ul>

</div>

This HTML code adds three dots to indicate the current slide. we can also style the dots using CSS.

.dots {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.dot {
  height: 10px;
  width: 10px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.dots {

position: absolute;

bottom: 0;

width: 100%;

display: flex;

justify-content: center;

}

.dot {

height: 10px;

width: 10px;

margin: 0 5px;

background-color: #bbb;

border-radius: 50%;

display: inline-block;

transition: background-color 0.6s ease;

}

.active, .dot:hover {

background-color: #717171;

}

How to Create CSS Slideshow

How to Create CSS Slideshow

Learn More on CSS

Leave a Comment Cancel reply