slick е цялостно решение за създаване на каруселна функционалност в различните й проявления. Могат да се гледат/изтеглят демонстрации и стандартни опции и източници.
Отрязване на излишнотоВ основната конфигурация slick има няколко скрипта, няколко стила и собствен шрифт. Използвам съкратена версия:
- slick.min.js (минифициран)
- slick.css (+ стиловете могат да се почистват)
- slick-theme.css (+ стиловете могат да се почистват)
При желание стиловете могат да се комбинират в един.
Заменям връзките към гладкия шрифт с по-удобен FontAwesome
Основната функционалност на въртележката се задава от div class="multiple-items". div class="carousel" е необходим само за задаване на отстъпа от въртележката.
Скрипт за инициализация на скрипт
$(document).ready(function() ( $(".multiple-items").slick(( //безкрайно: true, //превъртане в кръг autoplay: true, slidesToShow: 3, slidesToScroll: 3 )); ) );
Slick-slider (ширина: 100%; float: ляво;).slick-slide (курсор: показалец;).multiple-items .slick-slide (margin: 0 15px;).carousel (padding: 0 3%; float: ляво; ширина: 100%; размер на кутията: border-box;) /* за продукти на woocommerce */ .carousel .woocommerce ul.products li.product (марж: 1em 0 1,992em 0; ширина: 100%;)
Въртележка за продукти на woocommerce
Леко опростих показването на продукти за въртележката (! не е универсално решение, може да се показва по различен начин в различни опции за оформление):
При зареждане на скриптове за въртележка се появяват изкривявания в оформлението. Нека създадем първоначални стилове, които ще запазят въртележката в текущото оформление:
Множество елементи (дисплей: flex !important; flex-wrap: wrap; margin-bottom: 25px;).multiple-items img ( -moz-backface-visibility: видим; -webkit-backface-visibility: видим; backface-visibility : видим;) .slick-list (поле: 0 -1px 0 0 !important; padding: 0 1px 0 0 !important; width: 100%;) .slick-track (border: solid #e9eaec; border-width: 0 0 0 1px; дисплей: flex !important; padding-bottom: .1rem;) .carousel .product ( border: solid #e9eaec; border-width: 1px 1px 1px 0; background: #fff; padding: 15px; list-style : няма; подравняване на текста: в центъра;
Посочих свойствата на гърба за изображения, защото... Ако го оставите скрит, тогава при пренавиване те скриват етикетите.
Отзивчивост на въртележкатаСкриптът може да се персонализира за различни резолюции на екрана. За да направите това, задайте отзивчивите параметри в настройките
Отзивчив: [ ( точка на прекъсване: 1280, настройки: ( slidesToShow: 4, slidesToScroll: 4, ) ), ( точка на прекъсване: 1024, настройки: ( slidesToShow: 3, slidesToScroll: 3, ) ), ( точка на прекъсване: 800, настройки: ( slidesToShow : 2, slidesToScroll: 2 ) ), ( точка на прекъсване: 480, настройки: ( slidesToShow: 1, slidesToScroll: 1 ) ) ]
Или го деактивирайте напълно при определена разделителна способност - настройки: “unslick”
Плъзгащ плъзгачНапоследък също правя основния слайдер на базата на слик. Има малък проблем - когато страницата се зареди, всички слайдове се показват за няколко секунди и след това се сумират. Маскирах го така:
Направете всичко освен един слайд невидимо:
Slick-track > div:nth-child(2) img (дисплей: блок !important;) #index-slider img (дисплей: няма;)
И когато страницата се зареди, ние включваме останалото:
JQuery(document).ready(function())( jQuery("#index-slider img").css("display", "block"); ));
Зареждане на слайдове
Slick има друга полезна функция, наречена lazyload(). Просто трябва да добавите свойството lazyLoad: 'ondemand' към скрипта. И променете изхода на изображението:
Или можете също да го опростите по следния начин:
">
И за да може слайдовете да се заредят първоначално, трябва да зададете свойството lazyLoad: 'progressive'
Стандартното зареждане на изображения не работи съвсем правилно, препоръчвам да го използвате заедно с lazyload.
Мобилна версия на слайдера
Може да се увеличи в мобилен телефон. версия на височината на плъзгача, краищата на изображенията ще бъдат отрязани, но картината ще бъде по-голяма:
@media screen и (max-device-width: 480px) ( #index-slider, .hotel-photos (height: 200px;).slick-list, .slick-track (height: 100%;) #index-slider img , .hotel-photos img (височина: 100%; напасване на обект: корица;) )
обектно прилягане: покритие; - страхотно свойство CSS 3, поддържано от повечето браузъри
Галерия SlickНаскоро един от сайтовете забеляза интересно използване на Slick под формата на галерия. Особеността е, че изображенията в галерията достигат до краищата на екрана (една миля от сайта на цял екран).
За да го приложите, трябва да поставите плъзгача (#index-slider) в контейнер (.s2) и да добавите следните стилове:
S2 (препълване: скрито; показване: блокиране;) #index-slider (максимална ширина: 1000px; поле: 0 автоматично;) .s2 .slick-list (препълване: видимо;) #index-slider .slick-slide img ( максимална ширина: 800 пиксела; поле: 0 автоматично;)
или още по-просто:
За да направите такава галерия, просто трябва да посочите 2 стила:
#index-slider (max-width: 1280px; margin: 0 auto;) #index-slider .slick-list (overflow: visible;)
Освен всичко друго, плъзгачът поддържа плъзгане чрез плъзгане на елементи върху сензорен екран, което несъмнено ще зарадва посетителите на вашия сайт, използващи смартфон или таблет.
И така, плъзгачът се нарича slick.js. . За да свържете слайдер към вашия сайт, вмъкнете следния код в главата на вашия сайт:
Това е всичко! Плъзгачът е готов за употреба. Сега всичко, което трябва да направите, е да го свържете с необходимите елементи. Пишем html:
СЪДЪРЖАНИЕ 1 СЪДЪРЖАНИЕ 2 СЪДЪРЖАНИЕ 3 СЪДЪРЖАНИЕ 4
и свържете плъзгача към него (този код е по-добре да се постави в секцията head):
$(document).ready(function())( $(".my-slider").slick(( //setting )); ));
След тези прости манипулации вашият гладък плъзгач ще започне да работи с настройките по подразбиране.
Вместо СЪДЪРЖАНИЕ 1, СЪДЪРЖАНИЕ 2и други, можете да публикувате всякакво съдържание - снимки, заглавия, параграфи и т.н. Например за онлайн магазин можете да създадете продуктов ротатор:
$(document).ready(function())( $(".product-slider").slick(( //setting )); )); 
Пластмасова метла 
Дървена метла
Можете да добавяте неограничен брой елементи към ротатора.
Плъзгачът поддържа и много настройки – брой показвани елементи, брой скролируеми елементи, вертикален или хоризонтален плъзгач, скорост на скролиране и т.н.
Можете също така да персонализирате броя на показваните елементи за различни разделителни способности на дисплея:
$(document).ready(function())( $(".product-slider").slick(( responsive: [ ( breakpoint: 1024, // за дисплеи до 1024px и по-големи настройки: ( slidesToShow: 3, / / количество показани елементи 3 slidesToScroll: 3, // брой елементи, които могат да се превъртат наведнъж 3 точки: вярно // показване на точки (по брой елементи)), ( точка на прекъсване: 600, // за показване под 600px настройки: ( slidesToShow : 2, // брой елементи за показване 2 slidesToScroll: 2 // брой елементи, които могат да се превъртат наведнъж 2 ) ), ( точка на прекъсване: 480, // за настройки на показване под 480px: ( slidesToShow: 1, // номер от елементи, които могат да се превъртат наведнъж 1 slidesToScroll: 1 // брой елементи, които могат да се превъртат наведнъж 1 ) ) ] ));
По-подробни настройки можете да намерите на
Здравейте приятели. Днес ще говорим за адаптивни плъзгачи на jQuery, които ще ви помогнат да украсите вашата целева страница, да структурирате правилно информацията и да я представите накратко.
Веднъж проведох проучване в социалните мрежи и помолих да предложа някакъв полезен скрипт за плъзгач, който да използвате сами. Публикацията не беше особено успешна, но ме посъветваха за отличен инструмент, който ще бъде на първо място днес. За това - много благодаря. Може би след тази статия някой ще препоръча още по-добър скрипт.
ТОП скриптове, които внедряват слайдер на сайтаТъй като всички скриптове, представени по-долу, са jQuery добавки, те могат лесно да бъдат интегрирани в обикновени html сайтове, както и във всяка CMS и много .
Бухалска въртележка 2Според мен Owl Carousel 2 е най-добрият безплатен jQuery слайдер. Много настройки, наличие на API и възможност за пълна персонализация. Във всичко това се влюбих от пръв поглед. Отговаря перфектно на смартфони и таблети, поддържа Swiping и много повече.
Плъзгащ плъзгач
На второ място сега бих поставил Slick slider. Доста интересна опция, която използвах известно време. За задачите целевата страница доста ми пасна. Дизайнерски коментари, лога на марки и партньори, този слайдер се справи с всичко това с гръм и трясък. Има възможност за използване на методи и събития, както и показване на слайдера на няколко места в страницата.
Sudo плъзгач
Общ преглед на инсталирането на гладкия плъзгач под библиотеката jQuery. Този плъгин заема едно от най-високите места в класацията на плъгините за създаване на слайдшоута.
Той вероятно заслужено получи това място, така че си струва да го подредите и да го добавите към касичката си за уеб програмисти. Началната страница на плъгина с описание на инсталацията и различни примери за работа е тук - гладки демонстрации. Хареса ми всичко в плъгина - има всички контролни функции, лек е и лесен за инсталиране, HTML маркирането за създаването му е просто и семантично. Гладкият плъгин идва с пълен набор от настройки, които могат лесно да бъдат свързани в конфигурационния файл.
Свързване на гладкия плъгинПроцесът на свързване на гладкия плъгин в работещ проект е много прост, просто трябва да следвате правилно стъпките.
Създаване на маркиране за гладъкHTML маркирането за гладкия плъгин е семантично и просто. Достатъчно е да създадете списък с произволно име на клас. Ръководството за първи стъпки на официалната страница на плъгина за гладък предоставя този пример за HTML маркиране:
Моят опит да създам плъзгач въз основа на HTML маркиране под формата на обикновен списък с водещи символи:
... не донесе успех - гладкият плъгин не работи! Може да си струва да конвертирате елементи с помощта на CSS стилове
| 1 | ул |
| 1 | ли |
Следващата стъпка е да получите гладкия архив на плъгина. Това може да стане по няколко начина. Първият е да го изтеглите от страницата Go Get It. Или отидете на страницата на GitHub на автора и вземете zip архива на плъгина от там - гладък GitHub. И в двата случая ще получим архив с името
HTML документ, свързваме готови CSS стилове на гладкия плъгин:В тялото на HTML документа преди затварящия таг
| 1 |
Както можете да видите, в първите два реда библиотеката jQuery-1.11.0 и плъгинът jQuery Migrate 1.2.1 се изтеглят чрез CDN. Трети плъгин
свържете скрипта за инициализация на плъгина: $ (документ). готов (функция ()( $ (".плъзгач") . гладък (( точки : вярно )); ));Крайното HTML маркиране и свързване на CSS таблици и JS скриптове ще изглежда така:
Бих искал да спомена такова полезно нещо като конзолата на браузъра Google Chrome. Защо е полезно? Защото това е вторият път, когато тя ми помага (първият път беше с плъгина jqFancyTransitions - jqFancyTransitions Slider) и ми помага да намеря грешки при свързване на скриптове в HTML документ. Незаменима вещ!
За да илюстрирам пример за използването и полезността на конзолата на Chrome, стартирам файла index.html, който създадох по-рано в браузъра.
И какво?! Извинете, къде е плъзгащият плъгин - къде е слайдерът, създаден с негова помощ? Къде са обещаните красоти, които така нагледно се демонстрират на официалната страница на проекта – Demos?! Странно - но ги няма!
Хех, правилно ли свързах скрипта? Е, нека прегледам отново документацията... Всичко е правилно, но нищо не работи за мен... Може би трябва да пренапиша отново индексната страница? Може би, но ще има много такива „може би“, с различни вариации...
Но нека отворя конзолата на браузъра Google Chrome и отида в раздела „Мрежа“:
Това е причината гладкият плъгин да не работи на страницата ми! Просто библиотеката jQuery 1.11.0 и нейният плъгин jQuery Migrate 1.2.1 не могат да бъдат заредени в браузъра Chrome чрез CDN. Колко повече време и нерви щях да отделя, за да определя причината за „счупването“ с помощта на метода „научен удар“, ако не беше тази конзола, не е известно.
Нямам нито желание, нито време да разбера защо браузърът не успя да зареди и двата файла чрез CDN. Така че просто ще изтегля и двата файла „ръчно“ и ще ги свържа локално:
Пускам отново индексната страница index.html в браузъра Google Chrome и... ето! Гладкият плъгин работи:
Снимките се превъртат автоматично и в долната част можете да видите пагинацията, генерирана от гладкия скрипт според настройките:
точки: вярно, автоматично пускане: вярно... в конфигурационния файл. Освен това бяха генерирани стрелки за ръчно превъртане на изображенията напред и назад (те не се виждат на белия фон на HTML страницата). Други многобройни настройки на гладкия плъгин можете да видите на официалната страница - Настройки.
ЗАБЕЛЕЖКА: Силно препоръчвам да поставите скрипта за инициализация във външен JS файл.
В тази статия не направих това по една проста причина - в името на яснотата на примера и скоростта на неговото създаване.
Редактиране на гладкия плъгинСега всичко, което остава да направим, е само малко - въоръжени с инспектор на елементи на страница (например Firebug), ще „изтеглим“ имената на класовете на елементите, от които се нуждаем, от DOM дървото на нашата страница и лесно ще ги редактираме използвайки CSS правила:
тяло (цвят на фона: изсветляване (#ccc, 5%); .плъзгач (широчина: 300px; марж: 10px автоматично; подложка: 5px; цвят на фона: #ccc; граница: 3px плътен #000; @include border-radius (3px); .slick-dots( bottom : -30px ; ) )Създавам HTML документ за тялото
Ще добавя подложка, заоблена рамка и запълване на фона; Ще го центрирам върху страницата и ще го преместя малко надолу. Аз също ще повдигна блока малко нагоре| 1 | .slick-dots |
Да видим резултата:
Определено ми хареса гладкият плъгин. Лесна инсталация и свързване, генериране на контроли за показване на слайдшоу, голям брой различни настройки. Можете и трябва да разберете различните опции за персонализиране на външния вид на страницата с примери - Демонстрации. И да го коригирате към необходимите специфични условия, ако е необходимо.
Приятно кодиране!
Здравейте, искам да ви разкажа за гладкия слайдер за сайта, който се оказа лек, универсален и лесен за инсталиране. Може да се използва за реализиране на всичко свързано със слайдери и въртележки. Както заявява създателят на плъгина, „последната въртележка, от която някога ще имате нужда“, което може да се тълкува като единствената универсална въртележка, която е подходяща за всяка ваша идея. И наистина е така. Има всичко, което го няма, от обикновен плъзгач до адаптивна въртележка с слайдове в няколко реда.
Плъгинът може лесно да се използва както от начинаещи, така и от опитни уеб разработчици. Това е много силен конкурент на познатия. Извън кутията получаваме инструмент с много задачи.
За да инсталирате слайдер/въртележка на уебсайта си, просто следвайте 3 прости стъпки.
Инсталиране на гладък плъзгач Пример № 1 (Плъзгач)1. Стъпка - Свързване на стиловете на скрипта и плъгина.
вашата html страница.
$(document).ready(function())( $(".your-class").slick(); ));
Трябва да се свържете между таговете на вашата html страница, но след кода, който сте въвели в стъпка №1
В този пример показахме как да инсталирате гладък слайдер като въртележка с един основен слайд.
По-долу можете да видите ясен пример за описаното по-горе.
Пример № 2 (Въртележка)За да инсталирате въртележката, трябва да направите всичко по същия начин, както в предишното описание, но ще променим малко стъпка № 2 и стъпка № 3.
2. Стъпка - вмъкнете html кода на самия слайдер.
Този код трябва да бъде вмъкнат между таговете, на мястото, където искате да се покаже самият слайдер.
3. Стъпка - инициализиране на плъзгача.
$(document).ready(function())( $(".your-class").slick(( infinite: true, slidesToShow: 3, slidesToScroll: 3 )); ));
И в този пример използвахме гладък плъзгач като въртележка (с 3 основни слайда) и за това използвахме някои настройки на плъгина.
Можете да видите как работи тази въртележка, като използвате примера по-долу.
Както можете да видите, само 3 стъпки и ще получите въртележка или плъзгач за вашите нужди. Но има много възможности и настройки за този плъзгач. Ако срещнете затруднения или имате въпроси, задайте ги в коментарите и аз ще се опитам да им отговоря бързо.
