Как создать слайдер изображений с помощью jQuery?
Контейнер слайд-шоу, который циклически просматривает список изображений на веб-странице. В следующей статье вы узнаете, как реализовать слайдер изображений с помощью 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) { РЕКОМЕНДУЕМЫЕ СТАТЬИ |