Building an image slider with HTML and CSS without JavaScript

Building an image slider with HTML and CSS without javascript.

Have you ever wanted to create an image slider to showcase your photos or products, but don't have any javascript skills? Don't worry, in this tutorial I will show you how you can build an image slider using only HTML and CSS, without using javascript.

Step 1: Basic slider structure

To begin with, we will need to create the basic structure of the slider in HTML. We will use an unordered list (

) to contain each of the images, and each image will be represented by a list item (
• ).

  
  <div class="slider">
  <ul>
  <li><img src="imagen1.jpg" alt="Imagen 1&#8243;></li>
  <li><img src="imagen2.jpg" alt="Imagen 2&#8243;></li>
  <li><img src="imagen3.jpg" alt="Imagen 3&#8243;></li>
  </ul>
  </div>
  

  Be sure to replace "image1.jpg", "image2.jpg" and "image3.jpg" with the paths to your own images.

  Step 2: CSS Styles

  Next, we will need to apply CSS styles to the slider to make it functional and visually appealing. Here is an example of basic styles to get you started:

  
  .slider {
  width: 100%;
  overflow: hidden;
  }
  .slider ul {
  width: 300%;
  display: flex;
  transition: transform 0.5s ease-in-out;
  }
  .slider li {
  flex: 1 0 100%;
  }
  .slider img {
  width: 100%;
  height: auto;
  }
  

  These styles make the slider fill the entire available width, hiding any overflowing content. The images are displayed in an inline arrangement using flexbox, with each image taking up a third of the total width. The transition event allows the slider to animate smoothly.

  Step 3: Add navigation controls

  To allow users to navigate through the slider images, we will add navigation controls. In this example, we will use two buttons: one for forward and one for backward.

  
  <div class="slider">
  <ul>
  <li><img src="imagen1.jpg" alt="Imagen 1&#8243;></li>
  <li><img src="imagen2.jpg" alt="Imagen 2&#8243;></li>
  <li><img src="imagen3.jpg" alt="Imagen 3&#8243;></li>
  </ul>
  <button class="prev-button">Anterior</button>
  <button class="next-button">Siguiente</button>
  </div>
  

  Now, we will need to add styles and functionality for the navigation buttons:

  
  .prev-button,
  .next-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  background-color: #ccc;
  border: none;
  color: #fff;
  }
  .prev-button {
  left: 10px;
  }
  .next-button {
  right: 10px;
  }
  

  These styles position the buttons on the left and right sides of the slider, and place them vertically in the centre. The buttons have a basic style with a grey background colour and white text.

  Step 4: Add functionality to buttons

  For the navigation buttons to work, we will need to use the adjacent sibling selector of the CSS to change the position of the slider.

  
  .prev-button:hover,
  .next-button:hover {
  background-color: #aaa;
  cursor: pointer;
  }
  .prev-button:focus,
  .next-button:focus {
  outline: none;
  }
  .prev-button:active,
  .next-button:active {
  background-color: #555;
  }
  .prev-button:focus + ul {
  transform: translateX(-100%);
  }
  .next-button:focus + ul {
  transform: translateX(-200%);
  }
  

  These styles apply visual changes when buttons are hovered, focused or activated. In addition, we use the CSS adjacent sibling selector (+) to change the position of the slider when one of the buttons receives focus.

  And that's it! You now have a functional image slider built with HTML and CSS without the need for javascript.

  If you want to further customise the design or add additional animations, you can play around with CSS styles and experiment. Remember this is just a basic example to help you get started.

  I hope you found this tutorial useful. If you would like to see a live example, you can visit this linkHave fun building your own image slider!