Рубрики

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

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

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

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

Шаг 1 : Создайте структуру слайдера изображений, используя HTML, и вставьте изображения из соответствующих источников. Ниже приведен полный HTML-код для этого:

<! - HTML Code ->
<! - Div контейнера для слайд-шоу ->

<div class="container">

  

  <! - Полноразмерные изображения с текстом заголовка ->

  <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>

  
<! - Точки / круги ->

<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;

}

  
/ * Контейнер для слайдшоу * /
.container 
{

  max-width: 1000px;

  position: relative;

  margin: auto;

}

  
/ * Текст подписи * /
.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;

}

  
/ * Точки / маркеры / индикаторы * /
.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;

}

  
/ * Анимация * /
.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}

}

  
/ * На меньших экранах уменьшать размер текста * /

@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 секунды.

Ниже приведен полный код JavaScript:

var slideIndex = 0;

showSlides(); // вызываем метод showlide

   

function showSlides()

{

    var i;

  

    // получаем массив div'ов с именем класса image-sliderfade

    var slides = document.getElementsByClassName("image-sliderfade"); 

      

    // получить массив div'ов с точкой класса

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

  

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

        // изначально устанавливаем дисплей на

        // нет для каждого изображения.

        slides[i].style.display = "none"

    }

   

     // увеличение на 1, глобальная переменная

    slideIndex++; 

   

     // проверка границы

    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";

  

    // Меняем изображение каждые 2 секунды

    setTimeout(showSlides, 2000); 

}

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

Рекомендуемые посты:

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

0.00 (0%) 0 votes