Как создать слайдер изображений с помощью jQuery?

Опубликовано: 6 Января, 2022

Контейнер слайд-шоу, который циклически просматривает список изображений на веб-странице. В следующей статье вы узнаете, как реализовать слайдер изображений с помощью HTML, CSS и jQuery. Слайдер изображений jQuery содержит изображения, которые запускают их с использованием предыдущего и следующего значков. Стрелки «Назад» и « Далее» используются для перемещения вперед и назад при наведении курсора мыши на изображения. В следующем примере кода реализован простой и гибкий способ показа изображений одно за другим в карусели с использованием HTML, CSS и jQuery. Мы разделим задачу на два раздела. Сначала мы создадим структуру с помощью HTML, спроектируем структуру с помощью CSS и сделаем интерактивными с помощью jQuery.

Создание структуры: в этом разделе мы создадим структуру слайдера изображения.

  • HTML-код: HTML используется для создания структуры слайдера изображений.
    <!DOCTYPE html>
    < html >
    < head >
    < title >
    How to Design Image
    Slider using jQuery ?
    </ title >
    < meta name = "viewport"
    content = "width=device-width, initial-scale=1" >
    < link rel = "stylesheet" href =
    </ head >
    < body >
    < center >
    < h1 style = "color:green" >
    GeeksforGeeks
    </ h1 >
    < b >
    How to code Image
    Slider using jQuery
    </ b >
    < br >< br >
    </ center >
    <!-- Image container of the image slider -->
    < div class = "image-container" >
    < div class = "slide" >
    < div class = "slideNumber" >1</ div >
    < img src =
    </ div >
    < div class = "slide" >
    < div class = "slideNumber" >2</ div >
    < img src =
    </ div >
    < div class = "slide" >
    < div class = "slideNumber" >3</ div >
    < img src =
    </ div >
    <!-- Next and Previous icon to change images -->
    < a class = "previous" onclick = "moveSlides(-1)" >
    < i class = "fa fa-chevron-circle-left" ></ i >
    </ a >
    < a class = "next" onclick = "moveSlides(1)" >
    < i class = "fa fa-chevron-circle-right" ></ i >
    </ a >
    </ div >
    < br >
    < div style = "text-align:center" >
    < span class = "footerdot"
    onclick = "activeSlide(1)" >
    </ span >
    < span class = "footerdot"
    onclick = "activeSlide(2)" >
    </ span >
    < span class = "footerdot"
    onclick = "activeSlide(3)" >
    </ span >
    </ div >
    </ body >
    </ html >

Проектирование структуры. Здесь мы завершим разработку части слайдера изображения с помощью CSS и сделаем слайдер интерактивным с помощью jQuery.

  • Код CSS: разработка структуры на основе тегов и классов всех элементов.
    <style>
    img {
    width : 100% ;
    }
    .height {
    height : 10px ;
    }
    /* Image-container design */
    .image-container {
    max-width : 800px ;
    position : relative ;
    margin : auto ;
    }
    .next {
    right : 0 ;
    }
    /* Next and previous icon design */
    .previous,
    .next {
    cursor : pointer ;
    position : absolute ;
    top : 50% ;
    padding : 10px ;
    margin-top : -25px ;
    }
    /* caption decorate */
    .captionText {
    color : #000000 ;
    font-size : 14px ;
    position : absolute ;
    padding : 12px 12px ;
    bottom : 8px ;
    width : 100% ;
    text-align : center ;
    }
    /* Slider image number */
    .slideNumber {
    background-color : #5574C5 ;
    color : white ;
    border-radius: 25px ;
    right : 0 ;
    opacity: . 5 ;
    margin : 5px ;
    width : 30px ;
    height : 30px ;
    text-align : center ;
    font-weight : bold ;
    font-size : 24px ;
    position : absolute ;
    }
    .fa {
    font-size : 32px ;
    }
    .fa:hover {
    transform: rotate( 360 deg);
    transition: 1 s;
    color : white ;
    }
    .footerdot {
    cursor : pointer ;
    height : 15px ;
    width : 15px ;
    margin : 0 2px ;
    background-color : #bbbbbb ;
    border-radius: 50% ;
    display : inline- block ;
    transition: background-color 0.5 s ease;
    }
    .active,
    .footerdot:hover {
    background-color : black ;
    }
    </style>
  • Код jQuery: jQuery используется для создания интерактивного слайдера.
    <script>
    var slideIndex = 1;
    displaySlide(slideIndex);
    function moveSlides(n) {
    displaySlide(slideIndex += n);
    }
    function activeSlide(n) {
    displaySlide(slideIndex = n);
    }
    /* Main function */
    function displaySlide(n) {
    var i;
    var totalslides =
    document.getElementsByClassName( "slide" );
    var totaldots =
    document.getElementsByClassName( "footerdot" );
    if (n > totalslides.length) {
    slideIndex = 1;
    }
    if (n < 1) {
    slideIndex = totalslides.length;
    }
    for (i = 0; i < totalslides.length; i++) {
    totalslides[i].style.display = "none" ;
    }
    for (i = 0; i < totaldots.length; i++) {
    totaldots[i].className =
    totaldots[i].className.replace( " active" , "" );
    }
    totalslides[slideIndex - 1].style.display = "block" ;
    totaldots[slideIndex - 1].className += " active" ;
    }
    </script>

Полное решение: в этом разделе мы объединим вышеупомянутые разделы вместе, и это будет слайдер изображений.

<!DOCTYPE html>
< html >
< head >
< title >
How to Design Image
Slider using jQuery ?
</ title >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< style >
img {
width: 100%;
}
.height {
height: 10px;
}
/* Image-container design */
.image-container {
max-width: 800px;
position: relative;
margin: auto;
}
.next {
right: 0;
}
/* Next and previous icon design */
.previous,
.next {
cursor: pointer;
position: absolute;
top: 50%;
padding: 10px;
margin-top: -25px;
}
/* caption decorate */
.captionText {
color: #000000;
font-size: 14px;
position: absolute;
padding: 12px 12px;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Slider image number */
.slideNumber {
background-color: #5574C5;
color: white;
border-radius: 25px;
right: 0;
opacity: .5;
margin: 5px;
width: 30px;
height: 30px;
text-align: center;
font-weight: bold;
font-size: 24px;
position: absolute;
}
.fa {
font-size: 32px;
}
.fa:hover {
transform: rotate(360deg);
transition: 1s;
color: white;
}
.footerdot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.5s ease;
}
.active,
.footerdot:hover {
background-color: black;
}
</ style >
</ head >
< body >
< center >
< h1 style = "color:green" >
GeeksforGeeks
</ h1 >
< b >
How to code Image
Slider using jQuery
</ b >
< br >< br >
</ center >
<!-- Image container of the image slider -->
< div class = "image-container" >
< div class = "slide" >
< div class = "slideNumber" >1</ div >
< img src =
</ div >
< div class = "slide" >
< div class = "slideNumber" >2</ div >
< img src =
</ div >
< div class = "slide" >
< div class = "slideNumber" >3</ div >
< img src =
</ div >
<!-- Next and Previous icon to change images -->
< a class = "previous" onclick = "moveSlides(-1)" >
< i class = "fa fa-chevron-circle-left" ></ i >
</ a >
< a class = "next" onclick = "moveSlides(1)" >
< i class = "fa fa-chevron-circle-right" ></ i >
</ a >
</ div >
< br >
< div style = "text-align:center" >
< span class = "footerdot"
onclick = "activeSlide(1)" >
</ span >
< span class = "footerdot"
onclick = "activeSlide(2)" >
</ span >
< span class = "footerdot"
onclick = "activeSlide(3)" >
</ span >
</ div >
< script >
var slideIndex = 1;
displaySlide(slideIndex);
function moveSlides(n) {
displaySlide(slideIndex += n);
}
function activeSlide(n) {
displaySlide(slideIndex = n);
}
/* Main function */
function displaySlide(n) {
var i;
var totalslides =
document.getElementsByClassName("slide");
var totaldots =
document.getElementsByClassName("footerdot");
if (n > totalslides.length) {