JavaScript | Создание настраиваемого слайдера изображений

Опубликовано: 1 Марта, 2022

Что такое слайдер изображений?

Image Slider или Image Carousel - удобный способ показать несколько изображений на веб-сайте. Очаровательные яркие изображения могут привлечь на сайт множество посетителей. На изображении ниже показан образец слайдера изображения:

В этом посте мы создадим указанный выше слайдер изображений с помощью HTML, CSS и JavaScript. Начнем с создания слайдера изображения.

Step – 1: Create the structure of image slider using HTML and insert images from the respective sources. Below is the complete HTML code for doing this:

<!--HTML Code-->
<!-- Slideshow Container Div -->
<div class="container">
  
  <!-- Full-width images with caption text -->
  <div class="image-sliderfade fade">
    <img src="img1.jpg" style="width:100%">
    <div class="text">Image caption 1</div>
  </div>
  
  <div class="image-sliderfade fade">
    <img src="img2.jpg" style="width:100%">
    <div class="text">Image caption 2</div>
  </div>
  
  <div class="image-sliderfade fade">
    <img src="img3.jpg" style="width:100%">
    <div class="text">Image caption 3</div>
  </div>
  
  <div class="image-sliderfade fade">
    <img src="img3.jpg" style="width:100%">
    <div class="text">Image caption 4</div>
  </div>
  
</div>
<br>
  
<!-- The dots/circles -->
<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>

Шаг - 2 : После того, как мы создали структуру HTML для нашего слайдера изображений, следующим шагом будет стилизация слайдера с помощью CSS. Мы добавим стили к изображениям, фонам и т. Д. Мы также будем стилизовать точки и сделать наши изображения адаптивными и удобными для браузера с помощью CSS. Ниже приведен полный код CSS для стилизации нашего слайдера изображений:

// CSS code
* 
{
  box-sizing: border-box;
}
body 
{
  font-family: Verdana, sans-serif;
}
  
.image-sliderfade 
{
  display: none;
}
  
img 
{
  vertical-align: middle;
}
  
/* Slideshow container */
.container 
{
  max-width: 1000px;
  position: relative;
  margin: auto;
}
  
/* Caption text */
.text 
{
  color: #f2f2f2;
  font-size: 15px;
  padding: 20px 15px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 40%;
  background: rgba(0, 0, 0, .7);
  text-align: left;
}
  
/* The dots/bullets/indicators */
.dot 
{
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: transparent;
  border-color: #ddd;
  border-width: 5 px;
  border-style: solid;
  border-radius: 50%;
  display: inline-block;
  transition: border-color 0.6s ease;
}
  
.active 
{
  border-color: #666;
}
  
/* Animation */
.fade 
{
  -webkit-animation-name: fade-image;
  -webkit-animation-duration: 1.5s;
  animation-name: fade-image;
  animation-duration: 1.5s;
}
  
@-webkit-keyframes fade-image
{
  from {opacity: .4} 
  to {opacity: 1}
}
  
@keyframes fade-image
{
  from {opacity: .4} 
  to {opacity: 1}
}
  
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) 
{
  .text {font-size: 11px}
}

Шаг - 3 : После добавления стилей в слайдер последнее, что осталось, - это использовать javascript для добавления функции автоматического изменения изображений через определенный промежуток времени.
В приведенном ниже фрагменте кода в самом начале мы взяли все элементы div с именем класса 'image-sliderfade' в массив и сделали то же самое для элементов div с именем класса 'dots', используя прослушиватель getElementByClassName (). После этого мы устанавливаем отображение для всех div, содержащих изображения. В последнем цикле for мы удалили имя класса для каждого элемента массива dots []. После того, как мы закончили с этим, мы устанавливаем отображение как блок изображения для показа и добавляем имя класса к соответствующему элементу массива dots []. Функция setTimeout используется для вызова функции showslides () с интервалом в 2 секунды.

Below is the complete JavaScript code:

var slideIndex = 0;
showSlides(); // call showslide method
   
function showSlides()
{
    var i;
  
    // get the array of divs" with classname image-sliderfade
    var slides = document.getElementsByClassName("image-sliderfade"); 
      
    // get the array of divs" with classname dot
    var dots = document.getElementsByClassName("dot"); 
  
    for (i = 0; i < slides.length; i++) {
        // initially set the display to 
        // none for every image.
        slides[i].style.display = "none"; 
    }
   
     // increase by 1, Global variable
    slideIndex++; 
   
     // check for boundary
    if (slideIndex > slides.length) 
    {
        slideIndex = 1;
    }
   
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.
                            replace(" active", "");
    }
   
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
  
    // Change image every 2 seconds
    setTimeout(showSlides, 2000); 
}

Как только мы закончим все вышеперечисленные шаги, мы поднимем ползунок и будем работать, как показано ниже:

HTML CSS

JavaScript | Создание настраиваемого слайдера изображений

РЕКОМЕНДУЕМЫЕ СТАТЬИ