HTML code for a simple image slider| 2023

ABDULLAH

February 3, 2023

 This is an HTML code for a simple image slider. The slider consists of three slides, each containing an image with a source path and an alt text. The slider is controlled by two buttons, “Previous” and “Next”, which allow the user to navigate between the slides.

The images are contained within <div> elements with a class of “slide”, while the button controls are contained within a <div> element with a class of “slider-controls”. The buttons themselves have a class of “slider-prev” and “slider-next”.

HTML CODE:

     <!-- HTML for the image slider -->  
 <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">  
  <div class="carousel-inner">  
   <div class="carousel-item active">  
    <img src="https://cdn.pixabay.com/photo/2013/11/28/10/36/road-220058_960_720.jpg" alt="Slider image1" class="d-block w-100">  
   </div>  
   <div class="carousel-item">  
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="Slider image2" class="d-block w-100">  
   </div>  
   <div class="carousel-item">  
    <img src="https://cdn.pixabay.com/photo/2022/10/19/10/06/crete-7532064_960_720.jpg" alt="Slider image3" class="d-block w-100">  
   </div>  
  </div>  
  <!-- HTML for the button controls -->  
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">  
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>  
   <span class="sr-only">Previous</span>  
  </a>  
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">  
   <span class="carousel-control-next-icon" aria-hidden="true"></span>  
   <span class="sr-only">Next</span>  
  </a>  
 </div>

CSS CODE:

The CSS styles the .slider container to have a width and height of 100% and a background color of transparent. The individual .slide elements are positioned absolutely, have an opacity of 0 (invisible), and transition to an opacity of 1 (visible) with a duration of 0.5 seconds. The images inside the slides are styled to have a width and height of 100% and to fit their container with the object-fit: cover property. The currently showing slide is given a class of .showing and is styled to have an opacity of 1. The button controls are positioned at the bottom of the slider and are styled with padding, a border radius, and a transparent background color. The buttons are given a font size, color, and cursor style, and are given hover and active styles.
 

 .slider {  
  /* Style the images in the carousel */  
 .carousel img {  
  width: 100%;  
  height: 50vh;  
  object-fit: cover;  
 }  
 /* Style the button controls */  
 .carousel-control-prev,  
 .carousel-control-next {  
  width: 30px;  
  height: 30px;  
  top: 50%;  
  transform: translateY(-50%);  
  color: #fff;  
  background-color: rgba(0, 0, 0, 0.5);  
  border-radius: 50%;  
  font-size: 20px;  
  line-height: 20px;  
 }  
 .carousel-control-prev:hover,  
 .carousel-control-next:hover {  
  color: #fff;  
  background-color: rgba(0, 0, 0, 0.8);  
 }



JAVASCRIPT CODE:

This is a JavaScript code that implements a simple image slider using the className property of HTML elements. The image slider contains several images inside .slide elements, and the images inside these elements are styled using CSS. The JavaScript code selects these elements using the querySelectorAll() method and sets the interval for the sliding animation using the setInterval() method.

The nextSlide() function increments the current slide index and changes the className property of the current slide to slide. It then adds the “showing” class to the new current slide to make it visible. The prevSlide() function does the opposite, decrementing the current slide index and changing the className property of the current slide.

Finally, the code also adds event listeners for the “previous” and “next” buttons, so that the user can manually control the slider.

 


 /* slider Code */  
 // Add a custom slide transition  
 $('.carousel').on('slide.bs.carousel', function (e) {  
  // Get the current slide  
  var currentSlide = $(e.relatedTarget);  
  // Animate the current slide  
  currentSlide.addClass('animated fadeInRight');  
 });  
 // Remove the custom transition when the slide changes  
 $('.carousel').on('slid.bs.carousel', function (e) {  
  // Get the current slide  
  var currentSlide = $(e.relatedTarget);  
  // Remove the custom transition  
  currentSlide.removeClass('animated fadeInRight');  
 });  
 // Add a custom button control  
 $('.custom-control').click(function (e) {  
  e.preventDefault();  
  // Get the current slide index  
  var currentIndex = $('.carousel-item.active').index();  
  // Get the number of slides  
  var totalSlides = $('.carousel-item').length;  
  // Go to the next or previous slide based on the button clicked  
  if ($(this).hasClass('prev')) {  
   // Go to the previous slide  
   $('.carousel').carousel('prev');  
  } else {  
   // Go to the next slide  
   $('.carousel').carousel('next');  
  }  
 });

Leave a Comment

© inforealnow 2026