Створення jQuery слайдера для сайту. Курс WEB-програмування.

JQuery слайдер

Cьогодні ми навчимося робити на своєму сайті простий JQuery слайдер. Слайдер простенький, що не адаптивний, але іноді дуже корисний.

Слайдер горизонтально прокручує зображення розташовані в ряд. Зображення повинні мати однакові розміри. Прокрутка зображень відбувається автоматично або за допомогою кнопок вперед - назад.

 

 

 

   

Встановлюється такий слайдер дуже просто. як зазвичай потрібно зробити кілька кроків по впровадженню скриптів і кодів, щоб домогтися потрібного результату.

 

HTML код

 

У тому місці, де хочете вивести сам слайдер, потрібно додати HTML код нашого майбутнього слайдера.

 

<div class="sl_ctr">

<div class="sldr"> 

<img src="/uploads/files/103510/183953/199449_html/images/1.jpg" alt="">

<img src="/uploads/files/103510/183953/199449_html/images/2.jpg" alt="">

<img src="/uploads/files/103510/183953/199449_html/images/3.jpg" alt="">

<img src="/uploads/files/103510/183953/199449_html/images/4.jpg" alt="">

</div>

<div class="prv_b"></div>

<div class="nxt_b"></div>

</div>

• sl_ctr - основний контейнер слайдера, що містить в собі всі елементи слайдера.
• sldr - контейнер з зображеннями. всередині якого розташовуються 4 зображення. Можете розміщувати скільки вам завгодно зображень.
• prv_b - кнопка переміщення слайдів назад.
• nxt_b - кнопка переміщення слайдів вперед.

 

 

CSS стилі

 

Далі в свій файл стилів, додаються стилі майбутнього слайдера.

 

.sl_ctr{

position:relative;

width:450px;

height:300px;

overflow:hidden;

}

.sldr{

position:relative;

width:10000px;

height:300px;

}

.sldr img{

float:left;

}

.prv_b, .nxt_b{

position:absolute;

top:135px;

display:block;

width:35px;

height:35px;

cursor:pointer;

}

.prv_b:hover, .nxt_b:hover{opacity:.6;}

.prv_b{

left:10px;

background:url(images/prv.png) no-repeat;

}

.nxt_b{

right:10px;

background:url(images/nxt.png) no-repeat;

}

• sl_ctr - ми задаємо нашому контейнеру розміри слайдера, в даному випадки 450 пікселів ширини і 300 висоти. Так само заданий параметр overflow: hidden, для обрізки всього що виходить за межі цього контейнера. У нашому випадки це зображення що розташовані в один рядок.
• sldr - контейнеру з картинками задаємо велику ширину в 10000 пікселів, щоб у нас вмістилися всі картинки, скільки б їх не було. також задається висота, як і основного контейнеру в 300 пікселів.
• sldr img - все картинки притискаємо вліво, для того щоб вони стали в ряд.
• .prv_b, .nxt_b - задаємо загальні стилі для кнопок управління, потім для кожної окремо.

 

Підключення скриптів

 

Наш слайдер використовує для роботи - jQuery. Тому потрібно підключити бібліотеку, якщо це не зроблено раніше і після неї наш скрипт.

 

<Script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">

 </ script>

 

Ну і сам скрипт, що буде здійснювати анімацію і управління слайдером. Використовуючи інструкцію, теж підключаєте його зручним способом.

 

<script>

$(function() {

var sldr = $('.sldr'),

sldrContent = sldr.html(),

slideWidth = $('.sl_ctr').outerWidth(),

slideCount = $('.sldr img').length,

prv_b = $('.prv_b'),

nxt_b = $('.nxt_b'),

sldrInterval = 3300,

animateTime = 1000,

course = 1,

margin = - slideWidth;

$('.sldr img:last').clone().prependTo('.sldr');$('.sldr img').eq(1).clone().appendTo('.sldr');$('.sldr').css('margin-left',-slideWidth);function nxt_bSlide(){interval=window.setInterval(animate,sldrInterval)}function animate(){if(margin==-slideCount*slideWidth-slideWidth){sldr.css({'marginLeft':-slideWidth});margin=-slideWidth*2}else if(margin==0&&course==-1){sldr.css({'marginLeft':-slideWidth*slideCount});margin=-slideWidth*slideCount+slideWidth}else{margin=margin-slideWidth*(course)}sldr.animate({'marginLeft':margin},animateTime)}function sldrStop(){window.clearInterval(interval)}prv_b.click(function(){if(sldr.is(':animated')){return false}var course2=course;course=-1;animate();course=course2});nxt_b.click(function(){if(sldr.is(':animated')){return false}var course2=course;course=1;animate();course=course2});sldr.add(nxt_b).add(prv_b).hover(function(){sldrStop()},nxt_bSlide);nxt_bSlide()});

</script>

 

Ну і розберемо основні настройки в скрипті.

 

• var sldr = $ ( '. sldr') - задаємо змінну з нашого контейнера для зображень. Якщо будете міняти назву класу, то робіть це дуже уважно, щоб вони співпадали як в HTML, так і в CSS і в скрипті.
• slideWidth = $ ( '. sl_ctr'). outerWidth () - визначаємо ширину нашого слайдера.
• slideCount = $ ( '. sldr img'). length - визначаємо кількість слайдів, чи то пак скільки ви можете розмістити фотографії код картинок.
• prv_b = $ ( '. prv_b') - визначаємо блок з кнопкою назад, управління слайдами.
• prv_b = $ ( '. nxt_b') - визначаємо блок з кнопкою вперед, управління слайдами.
• sldrInterval = 3300 - час, скільки показується одне зображення. 3,3 секунди
• animateTime = 1000 - час анімації, зміни слайда. 1 секунда.
• course = 1 - напрямок руху слайдів. В даному випадки зображення зсуваються вліво, показуючи нам ті що розташовані правіше. Якщо встановити значення -1, то напрямок зміниться.
• margin = - slideWidth; - початкове зміщення слайдів.
•  

Так само слайдер зупиняє свою анімацію, якщо на нього навести курсор.

 

Якщо все зробили і налаштували правильно, то слайдер вже повинен працювати на вашому сайті.

 

Повний код програми:

<html >

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="viewport" content="width=device-width" />

<title>Простой слайдер с кнопками управления Вперед и Назад</title>

 

<style>

html {

    min-height: 100%

    }

body {

    min-height: 100%;

 margin:0;

 padding:0;

 font: 15px Tahoma;

 color:#555;

    }

 

.sl_ctr{

position:relative;

width:450px;

height:300px;

overflow:hidden;

}

.sldr{

position:relative;

width:10000px;

height:300px;

}

.sldr img{

float:left;

}

.prv_b, .nxt_b{

position:absolute;

top:135px;

display:block;

width:35px;

height:35px;

cursor:pointer;

}

.prv_b:hover, .nxt_b:hover{opacity:.6;}

.prv_b{

left:10px;

background:url(images/prv.png) no-repeat;

}

.nxt_b{

right:10px;

background:url(images/nxt.png) no-repeat;

}

 

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script>

$(function() {

var sldr = $('.sldr'),

sldrContent = sldr.html(),

slideWidth = $('.sl_ctr').outerWidth(),

slideCount = $('.sldr img').length,

prv_b = $('.prv_b'),

nxt_b = $('.nxt_b'),

sldrInterval = 3300,

animateTime = 1000,

course = 1,

margin = - slideWidth;

$('.sldr img:last').clone().prependTo('.sldr');$('.sldr img').eq(1).clone().appendTo('.sldr');$('.sldr').css('margin-left',-slideWidth);function nxt_bSlide(){interval=window.setInterval(animate,sldrInterval)}function animate(){if(margin==-slideCount*slideWidth-slideWidth){sldr.css({'marginLeft':-slideWidth});margin=-slideWidth*2}else if(margin==0&&course==-1){sldr.css({'marginLeft':-slideWidth*slideCount});margin=-slideWidth*slideCount+slideWidth}else{margin=margin-slideWidth*(course)}sldr.animate({'marginLeft':margin},animateTime)}function sldrStop(){window.clearInterval(interval)}prv_b.click(function(){if(sldr.is(':animated')){return false}var course2=course;course=-1;animate();course=course2});nxt_b.click(function(){if(sldr.is(':animated')){return false}var course2=course;course=1;animate();course=course2});sldr.add(nxt_b).add(prv_b).hover(function(){sldrStop()},nxt_bSlide);nxt_bSlide()});

</script>

</head>

<body>

<center>

<h1>Cлайдер с кнопками управления Вперед и Назад.</h1>

 

<div class="sl_ctr">

<div class="sldr"> 

<img src="/uploads/files/103510/183953/199449_html/images/1.jpg" alt="">

<img src="/uploads/files/103510/183953/199449_html/images/2.jpg" alt="">

<img src="/uploads/files/103510/183953/199449_html/images/3.jpg" alt="">

<img src="/uploads/files/103510/183953/199449_html/images/4.jpg" alt="">

</div>

<div class="prv_b"></div>

<div class="nxt_b"></div>

</div>

</center>

 

 

</body>

</html>