Плъзгач с автоматично превъртане в html. Плъзгач за превъртане (въртележка)

Изучаване на jQuery

Може да е полезно:

Лагер за тийнейджъри в предградията на най-добрите детски лагери в предградията.

Плъзгач за превъртане (въртележка)

Както винаги, нека започнем със задачата: този път трябва да създадем плъзгач, който ще превърта през изображенията, използвайки ефекта на изместване. Естествено, трябва да има бутони за навигация и анимацията да спира, ако курсорът на мишката е в областта на въртележката.

За бутоните за навигация ще използваме същото изображение като в предишния пример:

Нека този път малко усложним html маркирането - ще превъртаме не само снимки, а блокове, в които освен изображения има текст. Е, още една промяна ще засегне бутоните за превъртане. Също така ще ги добавим директно към маркирането, а не с помощта на js, както направихме в предишния пример. Ето какво се получава накрая:

предишна следващия

Надпис на снимка 1
Надпис на снимка 2
Надпис на снимка 3

Поставяме цялата структура в общ контейнер с класа carousel_wrap. Копчетата са декорирани с елементи педя. Контейнер с клас визуален_блокще служи като прозорец, в който ще се показва съдържанието на слайда, а самите слайдове (нека ги подредим под формата на неподреден списък) ще трябва да бъдат разположени един след друг. Разбира се, ограничения за броя на елементите LIне.

Да издадем външен видс css:

Carousel_wrap ( margin: 50px auto; width:700px; position:relative; ) .visual_block ( margin: 0 auto; position: relative; overflow: hidden; ) .visual_block ul ( position: relative; ) .visual_block ul, .visual_block li ( float: left; ) .carousel_wrap span.next, .carousel_wrap span.prev ( margin-top:-20px; width:15px; height:26px; display:block; text-indent:-9999px; overflow:hidden; cursor:pointer ;background:url(slider2_arrow.png) no-repeat;position:absolute;top:50%; ) .carousel_wrap span.next ( right:0; background-position:-15px 0; ) .carousel_wrap span.next:hover ( background-position:-15px -26px;) .carousel_wrap span.prev:hover (background-position:0 -26px;)

Можете да започнете да пишете js код. Нека помислим как може да стане това.

Сега всички елементи LIразположени една под друга. За да изпълним нашия план, трябва да ги подредим в един ред, да зададем ширината на блока визуален_блокравна на ширината на един слайд (тогава само един елемент ще бъде показан - всички останали ще бъдат отрязани) и принудете слайдовете да се изместват със същата ширина на определени интервали. Най-удобно ще бъде, ако размерите на всички блокове се изчисляват динамично. jQuery прави това по няколко начина. За нашия случай използваме методите външна ширина ()и външна височина (). Тези методи ще върнат размерите на избрания елемент с цялата подложка. И разбира се, за да е удобно да работим със стойности, ще ги съхраняваме в променливи. Да започваме.

Първо, нека декларираме променливи за обвиващите блокове.

Var elWrap = $("div.carousel_wrap"), visual = $("div.visual_block") carousel = visual.children("ul");

След това нека добавим променливи видими(в него ще съхраним броя на показаните блокове - в нашия случай е 1), itemWidth, itemHeightи елементи Общо(тук поставяме стойностите на ширината и височината на един слайд, както и общия им брой).

Var elWrap = $(".carousel_wrap"), visual = $(".visual_block"), carousel = visual.children("ul"), visible = 1, itemWidth = carousel.children().outerWidth(), itemHeight = carousel.children().outerHeight(), itemsTotal = carousel.children().length;

Сега можем лесно да изчислим необходимите размери на контейнера визуален_блок, visual_block ули им задайте желаните стойности:

Visual.css(("width": visible * itemWidth + "px", "height" : itemHeight)); carousel.css(("width": itemsTotal * itemWidth, "left": 0));

Дизайнът е придобит необходим изгледно все още не работи. Трябва да накараме слайдовете да се движат (да кажем наляво). Правим това с помощта на метода оживявам, което ще компенсира елемента УЛналяво.

Carousel.animate((отляво: -itemWidth), 500);

Тук сме приложили метода оживявамдо блока УЛи в параметрите е посочено, че блокът трябва да бъде преместен спрямо левия ръб визуален_блокдо разстояние, равно на стойността на променливата itemWidthза интервал от време от 500 ml s. За да се движи блокът в правилната посока, променливата itemWidthпопита отрицателно значение. За съжаление този запис не постигна желания резултат. Всичко, което постигнахме, е изместване УЛотносително визуален_блоксамо веднъж. Няма значение, вече сме правили трикове с многократно повторение на едно и също действие (припомнете си последния пример). Нека направим същото и този път. Нека създадем функция, в която ще "опаковаме" нашия запис и ще го извикаме с помощта на метода setInterval, да речем, на всеки три секунди.

Функция chengeLeft () ( carousel.animate((left: -itemWidth), 500); ) setInterval(chengeLeft, 3000);

Отново повреда - денивелация УЛвсе пак се случва веднъж. Разбираемо е. Посочили сме, че елементът трябва да бъде изместен с itemWidth, задачата е изпълнена и нищо друго не се случва. Следващите извиквания на функцията са неактивни. Ами ако насила УЛВърни се? Тогава при всяко извикване на функцията елементът ще бъде в първоначалната си позиция. Да опитаме. Трябва да върнем елемента обратно, след като е работил оживявам. Така че нека му дадем така наречената callBack функция като трети параметър, който ще се върне УЛдо първоначалната позиция.

Функция chengeLeft () ( carousel.animate((left: -itemWidth), 500, function() ( carousel.css(("left": 0 )); )); ) setInterval(chengeLeft, 3000);

Нека да видим резултата. На пръв поглед може да изглежда, че отново нищо добро не е произлязло. На всеки три секунди първият слайд се измества наляво, отстъпвайки място на втория и след това веднага се връща ... Пълен провал.

Всъщност не е. Просто трябва да направим още няколко неща във функцията callBack, а именно да клонираме първия елемент (който е скрит) и да поставим клонинга в самия край на въртележката, след това да премахнем този елемент в началото на въртележката и едва тогава да се върнем УЛна място. Нека го направим така.

Функция chengeLeft () ( var item = carousel.children().eq(0); carousel.animate((left: -itemWidth), 500, function() ( item.clone().appendTo(carousel); item.remove (); carousel.css(("left": 0 )); )); ) setInterval(chengeLeft, 3000);

Във функция changeLeftдекларирайте променлива вещ, в който ще съхраним първия слайд. След това във функцията callBack клонираме слайда, преместваме клонинга в края на въртележката и премахваме самия елемент. В резултат очакваме пълен успех. Пуснахме автоматично превъртане. Целият код сега изглежда така:

$(document).ready(function()( var elWrap = $(".carousel_wrap"), visual = $(".visual_block"), carousel = visual.children("ul"), visible = 1, itemWidth = carousel .children().outerWidth(), itemHeight = carousel.children().outerHeight(), itemsTotal = carousel.children().length; visual.css(("width": visible * itemWidth + "px", "height " : itemHeight)); carousel.css(("width": itemsTotal * itemWidth, "left": 0)); function chengeLeft () ( var item = carousel.children().eq(0); carousel.animate( (отляво: -itemWidth), 500, функция() ( item.clone().appendTo(carousel); item.remove(); carousel.css(("left": 0 )); )); ) setInterval(chengeLeft , 3000); ));

В следващата статия ще завършим плъзгача на въртележката, като накараме бутоните за навигация да работят.

Имаме нужда от обикновен плъзгач с автоматично превъртане. Да започваме...

Описание на слайдера.

Слайдовете ще бъдат подредени и след определено време ще се превъртят.

Червената рамка показва видимата част на плъзгача.

В края на плъзгача трябва да дублирате първия слайд. Това е необходимо, за да се осигури превъртане от третия слайд към първия. Също така трябва да добавите последния слайд към началото, за да можете да превъртите назад от първия слайд към третия. Плъзгачът в посока напред е показан по-долу.

Когато плъзгачът стигне до края, неговото копие от началото на плъзгача моментално се поставя на мястото на последния слайд. След това цикълът се повтаря отново. Това създава илюзията за безкраен плъзгач.

HTML маркиране

Първо, нека направим прост слайдер с автоматично превъртане. Има нужда от два контейнера, за да работи. Първият ще зададе размера на видимата област на плъзгача, а вторият е необходим за поставяне на плъзгачите в него. Оформлението на плъзгача ще изглежда така:

> >

Стилове на плъзгача

.slider-box( width: 320px; height: 210px; overflow: hidden;) .slider(position: relative; width: 10000px; height: 210px;) .slider img(float: left; z-index: 0;)

Контейнерът.slider-box указва размера на плъзгача. Свойството overflow:hidden скрива всички елементи, които не са в обхвата на елемента.

Плъзгачът container.slider е настроен на голяма ширина. Това е необходимо, за да се поберат всички слайдове в него.

Слайдовете се подравняват с помощта на свойството float:left.

Схематичното оформление на плъзгащите блокове е показано по-долу.

Скрипт

Движението на слайдовете ще се извършва чрез плавна промяна на свойството margin-left на container.slider.

$(function () ( var width= $(".slider-box") .width () ; // Ширина на плъзгача.интервал = 4000; // Интервал за смяна на слайдове.$(".slider img:last" ) .clone () .prependTo (".slider" ) ; // Копие от последния слайд се поставя в началото.$() .eq (1) .clone () .appendTo (".плъзгач"); // Копие на първия слайд се поставя в края. // Container.slider се измества наляво с ширината на един слайд. setInterval("animation()" , интервал) ; // Изпълнява функцията animation(), за да извърши прехода на слайда.) ) ; функция animation() ( var margin = parseInt($(".slider" ) .css ("marginLeft" ) ) ; // Текущ блок offset.slider width= $(".slider-box" ).width() , // Ширина на плъзгача. slidersAmount= $(".slider" ) .children () .length ; // Брой слайдове в плъзгача. if (margin!= (- width* (slidersAmount- 1 ) ) ) // Ако текущият слайд не е последният,( margin= margin-width; // тогава стойността на margin се намалява с ширината на слайда.) иначе ( // Ако се покаже последният слайд,$(".slider" ) .css("margin-left" , -width) ; // тогава block.slider се връща в първоначалната си позиция, margin=- ширина* 2 ; ) $(".slider" ) .animate (( marginLeft: margin) , 1000 ) ; // Block.slider се премества наляво с 1 слайд. } ;

Резултатът е прост плъзгач с безкрайно автоматично превъртане.

Корекция от 18 януари 2013 г.:
Поправена е грешка с автоматичното превъртане при превключване на раздели или минимизиране на прозореца на браузъра. Премахна проверката за наличие на атрибута name на връзките напред/назад.
Актуализиран архив на източника.
Корекция от 19 юни 2013 г.:
Добавена е възможност за използване на няколко плъзгача на страницата, но без поддръжка за автоматично превъртане, така че архивът на източника и демонстрационната страница не бяха актуализирани.
Поправена е грешка с появата на снимки под стрелките
За това как да стартирате автоматично превъртане без натискане на бутона за възпроизвеждане, отговорих в

Плъзгачи (ротатори на съдържание [изображения, текст, видео]) присъстват във всеки проект. В интернет наистина има много проекти, където можете да изтеглите и изберете почти всеки слайдер плъгин по ваш вкус. Има обаче ситуации, когато не е препоръчително да свържете слайдер към проекта, чиято минимизирана версия тежи от 10 Kb.

Да приемем, че трябва да направите слайдер, който съдържа 15-20 снимки с надписи или няколко видеоклипа. Именно за такива случаи този урок ще ви бъде полезен, където ще научите как да правите плъзгач за хоризонтално превъртане, а неоптимизираният скрипт ще тежи по-малко от 2 Kb. Като щракнете върху бутона „Демо“ по-долу, можете да гледате демонстрация на урока, а като щракнете върху бутона „Източник“, ще получите архива на урока (с коментари), между другото, за да научите как да правите обикновен плъзгач за миниатюриПрочети .

За да разберем същността, ще кажа, че в края на урока ще получим слайдер със следните функции:

Превключване на слайдовете наляво-надясно
Режим автоматична работаплъзгач, бутони старт-пауза
Неограничени слайдове

Оформление на плъзгача

Маркирането на плъзгача е много просто, имаме нужда от:

общ контейнер (плъзгач),
Три контейнера за навигация (два бутона за предишен/следващ слайд (морски) и един бутон (автоматично) за бутони за стартиране/пауза),
контейнер за всички слайдове (списък със слайдове),
обвийте всички слайдове (slide-wrap).

... ще има слайдове в контейнера за слайдове

Първи слайд

Стилове на плъзгача

За да стилизираме плъзгача, нека добавим няколко правила към стиловия файл.

/* Задайте float да изчисти */ .clear ( margin-top: -1px; height: 1px; clear:both; zoom: 1; ) /* Плъзгач */ .slider ( /* Ширина на контейнера */ ширина: 900px; / * Горна и долна външна подложка */ марж: 50px автоматично; /* Вътрешна подложка за морски връзки */ подложка: 0 30px; /* Позициониране */ позиция: относителна; ) /* Двойното щракване върху бутоните напред/назад предизвиква всички плъзгачи елементи да бъдат избрани, така че предотвратяваме това */ .slider::-moz-selection ( фон: прозрачен; цвят: #fff; text-shadow: няма; ) .slider::селекция ( фон: прозрачен; цвят: #fff ; text-shadow: няма; ) .slide-list ( позиция: относителна; margin: 0; padding: 0; /* Скриване на това, което е извън границите */ overflow: скрито; ) .slide-wrap ( позиция: относителна; ляво: 0px; top: 0; /* максималната възможна ширина на обвивката на плъзгача */ width: 10000000px; )) .slide-title ( /* Sri ft */ шрифт: удебелен 16px monospace; /* Показва, че елементът е блоков елемент */ display: block; )

И не маловажни стилове за бутоните за навигация напред/назад и старт/пауза

/* навигация напред/назад */ .navy ( /* абсолютно позициониране */ позиция: абсолютна; горна: 0; z-индекс: 1; височина: 100%; /* ширина на елемента */ ширина: 30px; курсор: показалец; ) .prev-slide ( ляво: 0; фон: #dbdbdb url(bg/left-arrow.png) 11px 40% без повторение; ) .next-slide ( дясно: 0; фон: #dbdbdb url(bg/right) -arrow.png) 13px 40% без повторение;) .navy.disable (фон: #dbdbdb;) /* начало/пауза на навигация */ .auto (ширина: 7px; височина: 11px; курсор: показалец; марж: 10px auto; ) .play ( фон: url(bg/play.png) център без повторение; ) .pause ( фон: url(bg/pause.png) център без повторение; )

Не забравяйте, че фонът на бутоните е посочен по същия начин като общия фон, за да припокрие дисплея на слайда. Сега е ред на jQuery скрипта, което ще направим.

Писане на сценарий

Не забравяйте, че първо трябва да включите библиотеката jQuery. След това ще напишем скрипта на слайдера и ще го инициализираме. Първо ще дам пълен списък с кодове и след това ще обясня какво се случва тук:

Обяснения:

На първо място, ние създаваме необходими променливи, за да улесните работата с кода:

обвивка на плъзгача
ширина на слайда
отместване на плъзгача
бутони за навигация

Второто действие е описание на кликвания върху бутоните напред/назад

В началото просто анимирам движението при щракване върху бутона nextLink: използвайки функцията animate(), ние анимираме движението на обвивката на плъзгача наляво със стойността на scrollSlider. След като това събитие се случи, преместваме първия слайд в списъка със слайдове в края на списъка и настройваме обвивката на списъка със слайдове на лява позиция 0 . Но се оказа, че ако бързо щракнете върху него 10 пъти, тогава ще се появят 10 движения и това е истинска грешка.

Събитието за анимация на плъзгача при щракване върху бутона на предишния слайд е малко по-различно:

В първите стъпки задаваме позицията на обвивката на слайда вляво от scrollSlider и преместваме последния слайд в обвивката в самото начало на списъка, но забележете без анимация; Във втората стъпка анимираме позицията на обвивката на плъзгача да се промени на 0 .

Толкова е просто.)

Функция за автоматично превъртане на плъзгачаподобно на анимацията, която се случва, когато се щракне върху бутона за следващ слайд, нищо особено, извадих го, за да използвам правилно функциите на jQuery - setInterval и clearInterval - наистина са страхотни)

При щракване върху бутона на плъзгача се случват следните събития:

Ако бутонът има клас за възпроизвеждане, тогава променяме този клас на пауза, скриваме бутоните напред/назад [така че да не счупят плъзгача] и започваме автоматично превъртане с помощта на променливата на таймера.
Ако бутонът има клас на пауза, тогава променяме този клас на стартиране, показване на бутоните напред/назад и спиране на променливата на таймера, която започва автоматично превъртане.

Последна стъпка инициализирайте функцията на плъзгача htmSlider();

Два или повече плъзгача на страница

За съжаление, все още не е възможно да се приложи автоматично превъртане на няколко плъзгача на страницата, но всичко останало работи с гръм и трясък. И така, скъпи читатели, по ваша молба публикувам скрипта на няколко циклични плъзгача:

jQuery(document).ready(function()( //// ---> Проверка дали елемент съществува на страницата jQuery.fn.exists = function() ( return jQuery(this).length; ) //// -- -> Плъзгач $(function()( if($(".slider").exists()) ( $(".slider").each(function()( var slider = $(this); var slideWrap = плъзгач .find(".slide-wrap"), nextLink = slider.find(".next-slide"), prevLink = slider.find(".prev-slide"), slideWidth = slider.find(".slide -item ").outerWidth(), scrollSlider = slideWrap.position().left - slideWidth; /* Щракнете върху връзката към следващия слайд */ nextLink.click(function()( if(!slideWrap.is(":animated") ) ( slideWrap.animate((left: scrollSlider), 500, function()( slideWrap .find(".slide-item:first") .appendTo(slideWrap) .parent() .css(("left": 0) ) ; )); ) )); /* Щракнете върху връзката към предишния слайд */ prevLink.click(function()( if(!slideWrap.is(":animated")) ( slideWrap .css(("left ": scrollSlider )) .find(".slide-item:last") .prependTo(slideWrap) .parent() .animate((left: 0), 500); ))) )); ))) ));

Маркирането на втория плъзгач се различава от първия само по това, че добавяме друг клас към container.slider, което ще ни позволи да стилизираме втория (трети, n-ти) плъзгач, както ни е необходимо:

...

Нека проектираме по различен начин някои елементи на плъзгача (намалете ширината на плъзгача, слайда, задайте различен цвят и шрифт за подписа на слайда):

Slider.slider2 (ширина: 400px;) .slider2 .slide-item (ширина: 180px;) .slider2 .slide-title (шрифт: получер 12px Arial; цвят: #ed0000;) .slider2 .navy (padding-top: 30px ; ) .slider2 .slide-item img ( дисплей: блок; ширина: 100%; )

Заключение

Днес видяхте и научихте как да творите елементарен анимиран плъзгач с хоризонтално превъртаненаправи си сам без използване на плъгини. Оставете въпроси, пожелания и благодарности в коментарите, всичко най-добро!

Един от ефективни начинипривличането на вниманието на потребителите на страницата на сайта е създаването на движеща се анимация. Анимационните елементи помагат по-визуално да разкажете и покажете на потребителите за вашия продукт. Последно времеплъзгащите се панели станаха много популярни, както и редица други ефекти, които се появяват при превъртане или щракване върху изображение. Известни са още като плъзгачи, въртележки и плъзгачи. В тази статия ще говорим за създаването на адаптивен плъзгач тип въртележка с плавен ефект на автоматично превъртане.

Към днешна дата в мрежата има стотици отзиви с връзки към решения до ключ, но повечето от тях съдържат много неизползвани функции, които значително намаляват производителността на слайдера, както и забавят зареждането на сайта като цяло. Професионалните уеб разработчици винаги са се стремели да създават софтуерни продукти, които са гъвкави при персонализиране, с нисък праг за добавяне на допълнителни библиотеки и добавки. Ето защо нашият скрипт използва минимални изискванияда организирате такъв плъзгач. Функционалността на работата ви позволява да зададете интервала на превключване, скоростта, както и избора на конкретен слайд. По-долу са дадени няколко променливи, които контролират работата на самия плъзгач.

timeList- скорост на превключване на плъзгача

времеви изглед- време за шоу

радиобут- бутони под слайда за бърза навигация. Стойността по подразбиране е true, ако използвате false, бутоните ще изчезнат.

А сега да започваме! Създайте и отворете файл index.htm

В представения код, както виждаме, няма нищо сложно, плъзгач-обвивкаопределя обща позицияи подравнява плъзгача към средата на екрана. Параметър активен слайдзадава размера и височината на изображението според неговата дължина. И плъзгачпоказва само активното изображение.

Сега нека създадем и отворим файла style.cssи напишете там маркировката, от която се нуждаем:

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); тяло (цвят: #4f4f5a; семейство шрифтове: "Roboto", sans-serif; размер на шрифта: 16px; padding: 0; margin: 0; ) #slider-wrap( max-width:800px; margin: 0 auto; margin-top: 80px; ) #active-slide ( width: 100%; display: table; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms- потребителски избор: няма; -o-потребителски избор: няма; потребителски избор: няма; ) #плъзгач (позиция: относителна; ширина: calc(100% * 4); горе: 0; ляво: 0; поле: 0 ; подплата: 0; -webkit-transition: 1s; -o-transition: 1s; преход: 1s; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in -out; функция за преход-време: улесняване-навън; ) .slide( width: calc(100%/4); list-style: none; display: inline; float: left; ) .slide img ( width: 100%; ) .Radio-But( margin-top:10px; text-align:center; ) .Radio-But .ctrl-select ( margin:2px; display:inline-block; width:16px; height:16px; overflow :hidden;text-indent:-9999px;background:url(radioBg.p ng) централно отдолу без повторение; ) .Radio-But .ctrl-select:hover ( cursor:pointer; background-position:center center; ) .Radio-But .ctrl-select.active ( background-position:center top; ) #prewbutton, #nextbutton ( дисплей :block; width:40px; height:100%; position:absolute; top:0; overflow:hidden; text-indent:-999px; background: url("arrowBg.png") ляво централно без повторение; opacity:0,5 ; z-index:3; outline:none !important; ) #prewbutton ( left:10px; ) #nextbutton (right:10px; background:url(arrowBg.png) right center no-repeat; ) #prewbutton:hover, # nextbutton:hover (opacity:1;)

Стилен имот плъзгач-обвивказаписвам ширина– максималната дължина на вашите снимки.

Стилен имот #плъзгач (ширина: calc(100% * 4); )и .slide (ширина: calc(100%/4); )задайте броя на снимките във вашия слайдер. В нашия пример има 4.

Ако стрелките напред/назад пречат на видимостта на вашия плъзгач, те могат да бъдат направени невидими и ще се появят при задържане. За да направите това, в параметрите prewButи nextBut, задайте свойството непрозрачност на 0.

Сега нека създадем и отворим нашия файл slider.js, който ще съдържа кода на слайдера. Не забравяйте да включите библиотеката jQuery.

$(document).ready(function () ( var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $("#slider .slide").length; var animSlide = функция(стрелка)( clearTimeout(slideTime); if(стрелка == "следващ")( if(slideNum == slideCount) ( slideNum=1; ) else(slideNum++) translateWidth = -$("#active-slide") .width() * (slideNum - 1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) else if(arrow == " prew") ( if(slideNum == 1) ( slideNum=slideCount; ) else(slideNum-=1) translateWidth = -$("#active-slide").width() * (slideNum - 1); $(" #slider").css(("transform": "translate(" + translateWidth + "px, 0)")); )else( slideNum = стрелка; translateWidth = -$("#active-slide").width( ) * (slideNum -1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) $(".ctrl-select.active" ).removeClass("active"); $(".ctrl-select").eq(slideNum - 1).addClass("active"); ) if(RadioBut)( var $linkArrow = $("<>").prependTo("#active-slide"); $("#nextbutton").click(function()( animSlide("next"); return false; )) $("#prewbutton").click(function ()( animSlide("prew"); return false; )) ) var adderSpan = ""; $(".slide").each(function(index) ( adderSpan += " " + индекс + ""; }); $("

"+adderSpan+"

").appendTo("#slider-wrap"); $(".ctrl-select:first").addClass("active"); $(".ctrl-select").click(function()( var goToNum = parseFloat($(this).text()); animSlide(goToNum + 1); )); var pause = false; var rotator = function()( if(!pause)(slideTime = setTimeout(function()(animSlide) ("следващ"), TimeView);) ) $("#slider-wrap").hover(function()(clearTimeout(slideTime); pause = true;), function()(pause = false; rotator() ; )); var clicking = false; var prevX; $(".slide").mousedown(function(e)( clicking = true; prevX = e.clientX; )); $(".slide").mouseup( функция() ( щракване = невярно; )); $(документ).mouseup(функция()( щракане = невярно; )); $(".слайд").mousemove(функция(e)( ако (щракане == вярно) ) ( if(e.clientX< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX >prevX) ( animSlide("prew"); clearTimeout(slideTime); ) кликване = false; ))) $(".slide").hover().css("курсор", "показател"); ротатор(); ));

функция animSlideприема три вида стойности: следваща, предходна, числова стойност. Следващият параметър превключва следващия слайд, prew връща предишния, а числовата стойност е конкретният слайд, избран чрез бутона за избор под слайда.

Представеният слайдер използва снимки от уеб ресурса https://pixabay.com/.

В тази статия ще анализираме как е много лесно да създадете адаптивен слайдер за сайт, използвайки CSS Flexbox и CSS трансформации.

Изходни кодове и демонстрация на слайдер

Проектът за слайдер, наречен chiefSlider, се хоства на GitHub. Можете да отидете до него чрез тази връзка.

Плъзгач с един активен слайд (без зацикляне):

Плъзгач с три активни слайда (без зацикляне):

Пример, който показва как можете да използвате плъзгач за завъртане на статии:

Предимства на chiefSlider

Изброяваме основните предимства на този плъзгач:

първо, той не създава клонинги на елементи (елемент)за организиране на цикли, както е реализирано, например, в плъгини Сова Въртележкаи гладък;
второ, не зависи от библиотеката jQuery; не само почиства Допълнителни изисквания, но и улеснява;
трето, това е практически не прави никакви промени в DOM на документа; единственото нещо, което прави, е да добавя или променя стойностите на трансформацията на CSS на елементите на плъзгача;
Четвърто, съдържа само минимален набор от функции; може да се добави допълнителна функционалност в зависимост от задачата;
пето, тя е адаптивна, т.е. може да се използва на всеки сайт; адаптивността на плъзгача се конфигурира с помощта на CSS;
шесто, броят на активните елементи се конфигурира с помощта на CSS; това означава, че може да се използва за създаване на въртележка с един активен слайд или произволен брой активни слайдове.

Инсталиране на chiefSlider

Инсталирането на слайдера става в 3 стъпки:

добавете CSS на chiefSlider към страницата или към CSS файла, свързан към страницата;
поставете HTML кода на слайдера на необходимото място на страницата;
вмъкнете JavaScript код в страницата или в js файла, свързан към страницата.

Желателно е да минимизирате CSS и JavaScript кода, това действие ще осигури по-бързо зареждане на страницата.

Как да проектирам прост плъзгач на уебсайт (без зацикляне)

Създаване на слайдер chiefSliderще се състои от създаване на HTML код, CSS и JavaScript (без jQuery).

HTML код на плъзгача chiefSlider:

Както можете да видите, плъзгачът има много проста HTML архитектура. Започва с основния блок, който има клас слайдер. Този блок се състои от 3 елемента.

Първият елемент е .slider__wrapper. Той действа като обвивка за .slider__item елементи (слайдове).

Другите два елемента (.slider__control) визуално представляват бутони. Те ще се използват за навигация в слайда, т.е. преминаване към предишния и следващия елемент.

css код за chiefSlider:

/* ОСНОВНИ СТИЛОВЕ */ .slider ( позиция: относителна; препълване: скрито; ) .slider__wrapper ( дисплей: гъвкав; преход: трансформиране 0,6 секунди лекота; /* 0,6 продължителност на прехода на слайд в секунди */) .slider__item ( гъвкав: 0 0 50%; /* определя броя на активните слайдове (в този случай 2 */ max-width: 50%; /* определя броя на активните слайдове (в този случай 2 */ ) /* СТИЛОВЕ ЗА БУТОНИТЕ НАЗАД И НАПРЕД * / .slider__control ( позиция: абсолютна; дисплей: няма; горна: 50%; трансформация: translateY(-50%); подравняване на елементи: център; оправдаване на съдържание: център; подравняване на текст: център; ширина: 40px; / * ширина на бутона */ височина: 50px; /* височина на бутона */ непрозрачност: .5; /* прозрачност */ фон: #000; /* цвят на фона */ ) .slider__control_show ( дисплей: flex; ) .slider__control:hover, . slider__control:фокус (украса на текст: няма; контур: 0; непрозрачност: .9; /* прозрачност */) .slider__control_left ( ляво: 0; ) .slider__control_right ( дясно: 0; ) .slider__control::before ( съдържание: " "; дисплей lay: inline-block ширина: 20px /* ширина на икона (стрелка) */ височина: 20px; /* икона (стрелка) височина */ фон: прозрачен център без повторение; размер на фона: 100% 100% ) .slider__control_left::before ( background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23fff " viewBox="0 0 8 8"%3E%3Cpath d="M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z"/%3E%3C/svg%3E "); ) .slider__control_right::before ( background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill= "%23fff" viewBox="0 0 8 8"%3E%3Cpath d="M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"/%3E%3C/svg%3E ");)

Както можете да видите, CSS кодът на плъзгача също е не е много сложно. Основните дефиниции, с които можете да персонализирате външния вид на слайдера, са снабдени с коментари.

CSS код, който дефинира брой активни елементи:

/* определя броя на активните слайдове (2 в този случай) */ flex: 0 0 50%; максимална ширина: 50%

Този код задава броя на активните елементи за плъзгача на 2.

За да има слайдера например един активен елемент, тези определения трябва да бъдат променени на следното:

/* определя броя на активните слайдове (в този случай 1) */ flex: 0 0 100%; максимална ширина: 100%

Създаване адаптивен плъзгачнаправени чрез медийни заявки.

Например плъзгач, който на устройства с малък екран трябва да има един активен слайд, а на големи устройства - четири:

Slider__item (flex: 0 0 100%; max-width: 100%; ) @media (min-width: 980px) ( .slider__item (flex: 0 0 25%; max-width: 25%; ) )

JavaScript код за chiefSlider:

"използвайте строго"; var multiItemSlider = (функция () ( функция за връщане (селектор) ( var _mainElement = document.querySelector(селектор), // блокиране на главния елемент _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // обвивка за .slider-item _sliderItems = _mainElement.querySelectorAll(".slider__item"), // елементи (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // контроли _sliderControlLeft = _mainElement.querySelector(".slider__control_left"), // бутон "НАЛЯВО" _sliderControlRight = _mainElement.querySelector(".slider__control_right"), // бутон "НАДЯСНО" _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ширина на обвивката _itemWidth = parseFloat(getComputedStyle(_sliderItems).width), / / ширина на един елемент _positionLeftItem = 0, // позиция на левия активен елемент _transform = 0, // стойност на трансформация slider_wrapper _step = _itemWidth / _wrapperWidth * 100, // размер на стъпката (за трансформация) _items = ; // масив от елементи // попълване на масива _items _sliderItems.forEach(function (item, index) ( _items.push(( item: item, position: index, transform: 0 )); )); var position = ( getMin: 0, getMax: _items.length - 1, ) var _transformItem = функция (посока) ( if (посока === "надясно") ( if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= позиция .getMax) ( return; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) ( _sliderControlLeft.classList.add("slider__control_show"); ) if (_sliderControlRight.classList.contains("slider__control_show") && (_positionLeftItem + _wrapperWidth / _itemWidth) >= position.getMax) ( _sliderControlRight.classList.remove("slider__control_show"); ) _positionLeftItem++; _transform -= _step; ) if (посока === "наляво") ( if (_positionLeftItem<= position.getMin) { return; } if (!_sliderControlRight.classList.contains("slider__control_show")) { _sliderControlRight.classList.add("slider__control_show"); } if (_sliderControlLeft.classList.contains("slider__control_show") && _positionLeftItem - 1 <= position.getMin) { _sliderControlLeft.classList.remove("slider__control_show"); } _positionLeftItem--; _transform += _step; } _sliderWrapper.style.transform = "translateX(" + _transform + "%)"; } // обработчик события click для кнопок "назад" и "вперед" var _controlClick = function (e) { if (e.target.classList.contains("slider__control")) { e.preventDefault(); var direction = e.target.classList.contains("slider__control_right") ? "right" : "left"; _transformItem(direction); } }; var _setUpListeners = function () { // добавление к кнопкам "назад" и "вперед" обработчика _controlClick для события click _sliderControls.forEach(function (item) { item.addEventListener("click", _controlClick); }); } // инициализация _setUpListeners(); return { right: function () { // метод right _transformItem("right"); }, left: function () { // метод left _transformItem("left"); } } } }());

Основното действие в JavaScript кода се извършва от функцията _transformItem. Тази функция, в зависимост от посоката, подадена към нея, трансформира element.slider__wrapper.

Инициализация на плъзгачасе извършва, както следва:

Var slider = multiItemSlider(".slider") Демонстрация на плъзгача

Как да създадете цикличен плъзгач?

Слайдовете могат да бъдат зациклени чрез трансформиране на елементи .slider__item.

За да направите това, е необходимо да обвържете стойностите на текущата му позиция и трансформация към всеки element.slider__item.

Най-оптимално тези действия могат да бъдат извършени с помощта на масива _items:

var_items =; // попълване на масива с items.slider__item _sliderItems.forEach(function (item, index) ( _items.push(( item: item, position: index, transform: 0 )); ));

Но можете да обвържете данни с елементи не само чрез масив, но например с помощта на атрибути на данни. Но DOM операциите са най-бавните и ресурсоемки, не се препоръчва да се използват, когато може да се направи по друг начин.

Следващата стъпка е да създадете функции за изчисляване на елементи .slider__item с минимална и максимална позиция.

Последна основна стъпкатрябва да се направи, е да се прецизира функцията _transformItem. А именно, добавете към него код, който ще промени позицията на елемента .slider_itemи извършете неговата трансформация.

Var _transformItem = функция (посока) ( var nextItem; if (direction === "надясно") ( _positionLeftItem++; if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) > position.getMax()) ( nextItem = position.getItemMin() ; _items.position = position.getMax() + 1; _items.transform += _items.length * 100; _items.item.style.transform = "translateX(" + _items.transform + "%)"; ) _transform -= _стъпка; ) ако (посока === "наляво") ( _positionLeftItem--; ако (_positionLeftItem< position.getMin()) {
 nextItem = position.getItemMax();
 _items.position = position.getMin() - 1;
 _items.transform -= _items.length * 100;
 _items.item.style.transform = "translateX(" + _items.transform + "%)";
 }
 _transform += _step;
 }
 _sliderWrapper.style.transform = "translateX(" + _transform + "%)";
}

Всъщност тук всичко е просто.
Например, за да се премине към следващия слайд, в масива елементи първо се търси елемент с позиция, по-голяма от текущия най-десен element.slider_item.
Ако има такъв елемент в масива, тогава се извършва трансформацията на елемента .slider__wrapper (т.е. действия, както в алгоритъма без цикъл).
Но ако няма такъв елемент, тогава в допълнение към transformation.slider__wrapper се извършват редица други действия.  Първо, в масива елементи се търси елемент с минимална позиция.  След получаване на този елемент, то позицията е зададена, чиято стойност ще бъде равна на стойността на текущия десен елемент + 1.  И, разбира се, го прави неговата трансформация, с такъв процент, че да се окаже в края на , т.е.  след последния елемент.

За да преминете към предишния слайд, се изпълняват същите стъпки, но в обратен ред.

В допълнение, за цикличен плъзгач не е необходимо да превключвате видимостта на левия и десния бутон.  Тези бутони винаги ще се показват в тази версия на плъзгача.
За да направите това ви трябва:
премахнете класа slider__control_show от контролата "Right";
 в CSS за селектора .slider__control променете стойността на свойството display на flex.
Демонстрация на плъзгача Как да създадете слайдер с зацикляне и автоматичен преход между слайдовете?
Можете да програмирате автоматичната смяна на слайдове на определени интервали с помощта на функцията setInterval.
Var _cycle = функция (посока) ( if (!_config.isCycling) ( return; ) _interval = setInterval(function () ( _transformItem(direction); ), _config.interval); )
Функцията setInterval в този пример ще изпълнява функцията _transformItem на редовни интервали, равни на стойността на променливата _config.interval.
Освен това е желателно да се добави стоп за автоматична смяна на слайдове, когато курсорът се придвижи до плъзгача.
Можете да реализирате тази функционалност, както следва:
If (_config.pause && _config.isCycling) ( _mainElement.addEventListener("mouseenter", функция () ( clearInterval(_interval); )); _mainElement.addEventListener("mouseleave", функция () ( clearInterval(_interval); _cycle( _config.direction); )); )
Как да спрете автоматичния преход на слайд, ако елементът не се вижда от потребителя?
Деактивирането на автоматичната смяна на слайдове е полезно в два случая:
когато страницата (на която се намира този слайдер) не е активна;
 когато плъзгачът е извън обхвата на страницата.
Първият случай може да бъде обработен със събитието visibilitychange.
Document.addEventListener("visibilitychange", _handleVisibilityChange, false);
Функция за манипулатора на събитие visibilitychange:
// обработване на събитието "Промяна на видимостта на документа" var _handleVisibilityChange = function () ( if (document.visibilityState === "hidden") ( clearInterval(_interval); ) else ( clearInterval(_interval); _cycle(_config.direction); ) )
Видимостта на даден елемент може да се изчисли с помощта на функцията _isElementVisible:
Функция _isElementVisible(element) ( var rect = element.getBoundingClientRect(), vWidth = window.innerWidth || doc.documentElement.clientWidth, vHeight = window.innerHeight || doc.documentElement.clientHeight, elemFromPoint = функция (x, y) ( върнете document.elementFromPoint(x, y); if (rect.right< 0 || rect.bottom < 0 || rect.left >vWidth ||  rect.top > vHeight) ( return false; ) return (element.contains(elemFromPoint(rect.left, rect.top)) || element.contains(elemFromPoint(rect.right, rect.top)) || element.contains (elemFromPoint(rect.right, rect.bottom)) || element.contains(elemFromPoint(rect.left, rect.bottom)));  )
Можете да поставите извикване на _isElementVisible, например, в началото на функцията _transformItem.  Това действие ще отмени автоматичната смяна на слайдове, ако плъзгачът е включен този моменте извън прозореца за изглед.
Var _transformItem = функция (посока) ( var nextItem; if (!_isElementVisible(_mainElement)) ( return; ) //...
Плъзгач, който реагира на преоразмеряването на прозореца на браузъра
Тази версия на адаптивния слайдер се различава от предишните по това, че позволява промяна на броя на активните елементи (слайдове) при преоразмеряване на прозореца на браузъра.  Обикновено потребителите не преоразмеряват браузъра, но все пак може да се случи.
Това се реализира с помощта на събитието resize и масива _states.  Масивът се използва за изчисления.  Използването му ще позволи да не се инициализира повторно плъзгача, когато не е необходим.