Простой адаптивный тач jQuery слайдер. Простой слайдер с кнопками управления вперед и назад Слайдер с описание на jquery

Некоторое время назад, я начал осваивать jQuery. Думаю, все знают, что так называется самая популярная библиотека для разработки и создания сценариев (скриптов) на JavaScript. С её помощью очень просто создавать эффектные и интерактивные элементы сайта.

В этой статье, хочу рассказать, как создать простой универсальный слайдер с использованием jQuery. На самом деле, в сети очень большое количество разнообразных готовых слайдеров, которые порой выглядят очень заманчиво, и достаточно функциональны, но мы сделаем его с нуля.

Итак, какие особенности нашего слайдера на jQuery (который я назвал HWSlider) можно отметить?

Простота использования и оформления – я хотел создать простой сценарий без наворотов, поэтому, я не использовал анимации на CSS3, а код получился очень универсальным и понятным.
Возможность вставлять в слайды как изображения, так и любой HTML – код.
Возможность прокручивать слайды как по порядку (вперёд - назад), так и выбирать каждый слайд (1,2,3,4…)
Автоматически формирующиеся ссылки (предыдущий – следующий, и с номерами слайдов). Вам нужно лишь вставить нужное количество div-ов, а всё остальное рассчитается само. Ну и можно отметить, что количество слайдов неограниченно.

Скрипт совместим со всеми современными браузерами: IE, Opera, Firefox, Safari, Chrome, (т.к. слайдер не использует CSS3).

Начнём с HTML разметки. В нужное место html страницы или шаблона нужно вставить.

Здесь содержание слайда 1 Здесь содержание слайда 2 Здесь содержание слайда 3

Здесь всё просто, как видно, вы можете вставлять сколько угодно слайдов путём создания новых div-ов. Внутрь их можно вставлять любой html код, например картинку или блок с текстом. Не забудьте только подключить саму библиотеку на jQuery в вместе со всеми js - скриптами. Если не знаете как, смотрите в примере.

#slider-wrap{ /* Оболочка слайдера и кнопок */ width:660px; } #slider{ /* Оболочка слайдера */ width:640px; height:360px; overflow: hidden; border:#eee solid 10px; position:relative;} .slide{ /* Слайд */ width:100%; height:100%; } .sli-links{ /* Кнопки смены слайдов */ margin-top:10px; text-align:center;} .sli-links .control-slide{ margin:2px; display:inline-block; width:16px; height:16px; overflow:hidden; text-indent:-9999px; background:url(radioBg.png) center bottom no-repeat;} .sli-links .control-slide:hover{ cursor:pointer; background-position:center center;} .sli-links .control-slide.active{ background-position:center top;} #prewbutton, #nextbutton{ /* Ссылка "Следующий" и "Педыдущий" */ display:block; width:15px; height:100%; position:absolute; top:0; overflow:hidden; text-indent:-999px; background:url(arrowBg.png) left center no-repeat; opacity:0.8; 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;}

Давайте разберём его подробнее. Сначала мы даём основному блоку с идентификатором "slider-wrap", нужную ширину. Так как в него вставляются все остальные блоки, то высоту можно не задавать, она будет зависеть от того, что будет внутри. Затем нам нужно задать размеры контейнера в котором будут находиться слайды. Это – #slider. Зададим ему ширину и высоту, а так же, к примеру, границу в 10 пикселей. Здесь ширина – 640px это меньше чем ширина родителя, так как мы добавляем границы шириной по 10px справа и слева. От ширины этого div-а так же зависит и ширина самих слайдов (.slide).

И последнее: нам нужно обязательно задать position:relative для контейнера слайдов так как слайды внутри - с абсолютным позиционированием. Для самих слайдов в CSS задаётся только ширина и высота. Остальные свойства задаются уже в jQuery скрипте.

Селектор.sli-links это блок, в котором будут находится кнопки перехода на необходимый слайд. Эти кнопки представляют из себя простые элементы вида номер, которые вставятся в необходимом количестве автоматически, вместе и с их родителем.sli-links. Для кнопок мы задаём красивый вид, а именно делаем каждую кнопку квадратной, выравниваем их все по центру, а так же, благодаря overflow:hidden и text-indent:-9999px, убираем текст, оставляя только фоновые иконки, которые так же меняются при наведении на этот элемент курсора. Для удобства я использовал спрайты, что уменьшило количество изображений.

Далее оформляется активная кнопка. Просто изменяем положение фона. Затем переоформим ссылки для перехода на сдедующий и предыдущий слайды. Вы можете дать им любое оформление, так же как и кнопкам. Данные ссылки вставляются автоматически внутрь #slider. Но чтобы их было видно, я задал им абсолютное позиционирование и верхний слой (z-index:3), чтобы они были отображены над слайдами. Думаю с CSS здесь всё понятно и просто: вы можете поменять практически все свойства, чтобы оформить слайдер так, как вам необходимо.

Давайте теперь рассмотрим сам сценарий:

Var hwSlideSpeed = 700; var hwTimeOut = 3000; var hwNeedLinks = true; $(document).ready(function(e) { $(".slide").css({"position" : "absolute", "top":"0", "left": "0"}).hide().eq(0).show(); var slideNum = 0; var slideTime; slideCount = $("#slider .slide").size(); var animSlide = function(arrow){ clearTimeout(slideTime); $(".slide").eq(slideNum).fadeOut(hwSlideSpeed); if(arrow == "next"){ if(slideNum == (slideCount-1)){slideNum=0;} else{slideNum++} } else if(arrow == "prew") { if(slideNum == 0){slideNum=slideCount-1;} else{slideNum-=1} } else{ slideNum = arrow; } $(".slide").eq(slideNum).fadeIn(hwSlideSpeed, rotator); $(".control-slide.active").removeClass("active"); $(".control-slide").eq(slideNum).addClass("active"); } if(hwNeedLinks){ var $linkArrow = $("") .prependTo("#slider"); $("#nextbutton").click(function(){ animSlide("next"); }) $("#prewbutton").click(function(){ animSlide("prew"); }) } var $adderSpan = ""; $(".slide").each(function(index) { $adderSpan += "" + index + ""; }); $("" + $adderSpan +"").appendTo("#slider-wrap"); $(".control-slide:first").addClass("active"); $(".control-slide").click(function(){ var goToNum = parseFloat($(this).text()); animSlide(goToNum); }); var pause = false; var rotator = function(){ if(!pause){slideTime = setTimeout(function(){animSlide("next")}, hwTimeOut);} } $("#slider-wrap").hover(function(){clearTimeout(slideTime); pause = true;}, function(){pause = false; rotator(); }); rotator(); });

Сначала в переменных сохраняются настройки: hwSlideSpeed - скорость перелистывания слайдов, hwTimeOut - время спустя которое происходит автоматическая смена слайда, hwNeedLinks - управляет ссылками "Следующий " и "Предыдущий" - если значение этой переменной равно true, то эти ссылки будут отображаться, а если false, то соответственно их не будет (как на главной странице моего блога).

Далее мы устанавливаем необходимые CSS свойства для слайдов с помощью метода.css(). Блоки со слайдами мы накладываем друг на друга используя абсолютное позиционирование, затем скрываем их все.hide(), а затем показываем только первый. Переменная slideNum - это номер активного слайда, то есть счётчик.

Основная логика работы нашего jQuery слайдера - это функция animSlide. Она принимает один параметр. Если мы передадим в неё строки "next" или "prew", то сработают условные операторы и будет отображён соответственно следующий или предыдущий слайд. Если же мы пошлём в качестве значения цифру, то это число станет активным слайдом и он будет показан.

Таки образом эта функция скрывает текущий div, высчитывает новый и показывает его.

Обратите внимание, что методу.fadeIn(), который делает видимым активный слайд, задан второй аргумент. Это, так называемая функция обратного вызова. Она выполняется, когда слайд полностью появится. В данном случае это сделано для обеспечения автоматической прокрутки слайдов. Функция rotator, определённая ниже, вызывает снова функцию animSlide для перехода на следующий слайд через необходимый нам интервал времени: мы получим замыкание, обеспечивающее постоянную прокрутку.

Всё работает нормально, но нам нужно остановить выполнение автоматики, если пользователь подводит курсор к слайдеру, или нажимает кнопки. Для этого создана переменная pause. Если её значение положительно - true, значит автоматического переключения не будет. С помощью метода.hover(), мы указываем: очистить таймер если он запущен - clearTimeout(slideTime), и установить pause = true. А после отвода курсора, отключить паузу и запустить замыкание rotator().

Дополнительно нам нужно создать новые элементы на странице и поместить их в нужное место. Используя цикл each() для каждого слайда (div-а с классом.slide), создадим элемент span внутри которого бует число - номер слайда. Это число используется в функции анимации, для перехода к слайду с этим номером. Обернём всё в div с нужными классами, и в итоге получим такую разметку:

0 1 2 3

Казалось бы, зачем мы создаём разметку внутри скрипта, а не в HTML коде?. Дело в том, что например, если у пользователя отключены скрипты - он не увидит элементов, которые не будут работать, и это не введёт его в замешательство. Кроме того упрощается код, что неплохо для SEO.

В итоге разметка слайдера будет выглядеть примерно так (в качестве слайдов я использовал изображения, и установил 5 штук):

0 1 2 3

Ниже вы можете посмотреть, как работает наш jQuery слайдер на демо странице, и скачать все необходимые исходники.

На напоследок, пару моментов об интеграции этого слайдера с Drupal. Вы можете добавить этот код в файл шаблона, например в page.tpl.php, и прикрепить скрипт отдельными js-файлом к теме. Jquery в Drupal включен по умолчанию, но работает в режиме совместимости (). Есть два варианта доработки. Либо обернуть весь js код:

(function ($) { // Весь ваш код... })(jQuery);

или заменить символы $ во всём скрипте на jQuery. Вот так:

JQuery(document).ready(function(e) { jQuery(".slide").css({"position" : "absolute", "top":"0", "left": "0"}).hide().eq(0).show(); var slideNum = 0; var slideTime; slideCount = jQuery("#slider .slide").size(); var animSlide = function(arrow){ // и т. д.

В примере уже реализован первый метод.

Спасибо за прочтение! Оставляйте комментарии, приходите ещё. А так же вы можете подписаться на RSS, чтобы получать обновления блога первыми!

Добавлено: Это ещё не всё. Читайте . Там мы добавим новые возможности к данному скрипту.

Но так как мы разбираем с вами основы JS, то для изучения базы я опишу, как создать простейший слайдер только при помощи языка JavaScript. Ну что ж, давайте приступим к разбору материала!

Какие виды слайдеров бывают и где они могут понадобится?

Создание удобных галерей для просмотра изображений требуется на всех веб-сервисах, где есть хоть какие-то фотографии. Это могут быть интернет-магазины, сайты-портфолио, новостные и обучающие сервисы, сайты компаний и развлекательных заведений с фотоотчетами и т.д.

Однако это стандартное применение слайдеров. Подобные технологии также используют для привлечения клиентов к акционным товарам, услугам или же для описания преимуществ предприятий.

В основном заказчики просят внедрять на веб-страницы галереи типа «Карусель». Это удобный инструмент для просмотра изображений в крупном размере с возможностью переключения юзером слайдов вперед и назад. При этом сами картинки обычно переключаются автоматически через определенное время. Каруселью такой механизм прозвали из-за того, что показ картинок повторяется по кругу.

На сегодняшний день при желании в интернете можно найти самые необычные и привлекательные плагины для просмотра набора фотографий.

Самостоятельная деятельность

Ну а теперь займемся созданием своего слайдера. На данном этапе обучения для его реализации я предлагаю вам использовать чистый JavaScript . Это будет автоматический переключатель картинок по кругу.

Ниже я прикрепил программный код своего приложения. По ходу кода я оставлял для вас комментарии.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

/*Описываю внешний вид каркаса, основы для будущего слайдера */ #slides{ position: relative; height: 415px; width: 100%; padding: 0px; list-style-type: none; box-shadow: 0 0 7px #010, 0 0 10px blue, 0 0 15px #010, 0 0 35px #010; } /* Редактирую отображение картинок*/ img { width: auto; height: 390px; padding: 13px; } /*Указываю, что содержимое пунктов списка будет отображаться по центру элемента-родителя, т.е. в данном случае по центру элемента ul - основы для слайдов */ li { text-align: center; } /*Описываю внешний вид самих слайдов */ .slide{ position: absolute; opacity: 0; top: 0px; left: 0px; height: 100%; z-index: 3; width: 100%; background: blue; -moz-transition: opacity 1.5s; transition: opacity 1.5s; -webkit-transition: opacity 1.5s; } /*При отображении объект становится видимым и выдвигается на передний план*/ .showing{ opacity: 1; z-index: 4; }

var MySlider = document.querySelectorAll("#slides .slide"); var currentPicture = 0; var IntervalForChange = setInterval(nextSlide,2700); function nextSlide(){ MySlider.className = "slide"; currentPicture = (currentPicture+1)%MySlider.length; MySlider.className = "slide showing"; }

Автоматический переключатель изображений /*Описываю внешний вид каркаса, основы для будущего слайдера */ #slides{ position: relative; height: 415px; width: 100%; padding: 0px; list-style-type: none; box-shadow: 0 0 7px #010, 0 0 10px blue, 0 0 15px #010, 0 0 35px #010; } /* Редактирую отображение картинок*/ img { width: auto; height: 390px; padding: 13px; } /*Указываю, что содержимое пунктов списка будет отображаться по центру элемента-родителя, т.е. в данном случае по центру элемента ul - основы для слайдов */ li { text-align: center; } /*Описываю внешний вид самих слайдов */ .slide{ position: absolute; opacity: 0; top: 0px; left: 0px; height: 100%; z-index: 3; width: 100%; background: blue; -moz-transition: opacity 1.5s; transition: opacity 1.5s; -webkit-transition: opacity 1.5s; } /*При отображении объект становится видимым и выдвигается на передний план*/ .showing{ opacity: 1; z-index: 4; }

Я надеюсь, что никаких проблем с кодом на css и html у вас не возникло. А вот работу скрипта я считаю нужным разобрать. Поэтому давайте перейдем к расшифровке написанного.

Итак, сначала при помощи метода querySelectorAll переменной MySlider я присваиваю список всех элементов в переделах указанных. Указывает это запись

document.querySelectorAll ("#slides .slide")

Таким образом, в MySlider хранится коллекция из четырех элементов.

Далее я задаю, с какого изображения начинать показ, присваивая переменной currentPicture нуль. После указываю, что смена слайдов происходит через 2,7 секунды и при этом должна быть вызвана функция обработки nextSlide .

Переходим к самой функции.

Изначально для текущего элемента списка я меняю описание классов, т.е. переписываю «slide showing » на «slide ». Следовательно, изображение становится невидимым.

Теперь определяю новый элемент коллекции, который будет отображаться на экране. Для этого я беру текущую позицию +1. Вы могли заметить, что я также использую деление с остатком (%) на количество имеющихся слайдов. Этот финт ушами необходим для того, чтобы запустить показ по новому кругу. Вот как это будет выглядеть буквально.

То иногда приходится решать задачи, связанные с фронтэндом, несмотря на то, что я его недолюбливаю 🙂

О моём отношению к всему, что связано с «прекрасным» вы, собственно говоря, могли оценить по дизайну данного сайта, который разрабатывался мною единолично 🙂

Однако, сравнительно недавно я столкнулся с необходимостью реализации слайдера на JavaScript, причём сделать это нужно было без каких-либо готовых библиотек и даже без всеми любимого jQuery.

Вызвана данная необходимость была тем, что в результате должен был получиться JS скрипт, который через сторонний сервис подключался бы на сайт. Следовательно, готовые карусели на JavaScript сразу отпадали, т.к. для их интеграции нужно было в HTML код сайта добавлять подключение библиотеки через тэг script и копировать сами файлы либы на сервер или тянуть их по cdn, но для этого снова потребовалось бы править код ресурса.

Как сделать JavaScript слайдер: начало

Сегодня, думаю, что каждый, кто попадал в похожую ситуацию, начинал с поисков имеющихся наработок, т.к. когда задача сделать JS карусель стоит в рамках работы — это всегда должно быть сделано максимально быстро. И при таких условиях сидеть и выдумывать свои велосипеды, ясное дело, никто не позволит.

Заказчикам всегда наплевать на то, как код написан, какая у него архитектура, главное — видеть результат!

В итоге, как вы поняли, перед тем, как написать слайдер на JavaScript без jQuery, я решил подыскать готовый и доработать его под свои нужды. Почему без jQuery? Да потому что на целевом ресурсе, куда я планировал подключать свой слайдер через сервис, вызов jQuery в коде был расположен позже скрипта, подключаемого сервисом. Поэтому jQuery конструкции в моём коде просто не воспринимались.

В качестве основы я взял этот JavaScript слайдер изображений — https://codepen.io/gabrieleromanato/pen/pIfoD.

Остановиться я решил именно на нём, т.к. его JS код был написан с применением принципов ООП и классы в нём основываются на прототипах, а не на банальных функциях.

Честно говоря, я глубоко не понимаю и не признаю сегодняшнюю шумиху вокруг JavaScript с использование ООП, фреймворков и прочих архитектурных штук в языке, который изначально задумывался как простенький язык динамических сценариев. Равно как и сам JS я откровенно недолюбливаю с его синтаксическим винегретом, позволяющим одни и те же конструкции писать несколькими способами.

Но, к сожалению, в современном мире мои позиции мало кто разделяет, т.к. данный язык развивается сумасшедшими темпами и предпринимает даже попытки завоевать умы бэкенд разработчиков с помощью Node.js как альтернативы Java, PHP, C#, Ruby и других монстров.

В итоге, чтобы банально не остаться без работы, приходится по-тихоньку с JavaScript разбираться. А в выбранной мною реализации слайдера на чистом JavaScript я встретил то, что, как вы поняли, презираю в данном языке. Поэтому я её и выбрал, чтобы был хоть какой-то повод поработать и разобраться с JavaScript ООП и прототипными классами — иначе я бы к ним добровольно никогда в жизни не прикоснулся бы 🙂

На базе найденного мною кода мне необходимо было разработать слайдер на чистом JS во всплывающем окне (такую штуку ещё называют popup, попап и т.д.), который имел бы кнопки переключения слайдов и кликабельные индикаторы текущего слайда. Также нужно было сделать кнопку для закрытия данного окна.

Вот, что у меня получилось в итоге.

Делаем библиотеку JS слайдера

Сперва я решил всё реализовать по уму и сделать JavaScript слайдер для сайта в виде библиотеки, подключаемой на сайт одним-единственным скриптом, в котором будут вызываться компоненты слайдера, разбитые по подкаталогам. Назвать её я решил popupSlider.js в честь её изначального предназначения.

Её код можно найти на GitHub по этому адресу — https://github.com/Pashaster12/popupSlider.js

Структура библиотеки вышла следующая:

Папка slides предназначена для картинок слайдов. В controls размещены картинки элементов управления JS каруселью (кнопки закрытия слайдера и переключения слайдов). А в assets — статические элементы JS слайдера: HTML разметка и файл с CSS стилями.

Ну, а файл popupSlider.js — это и есть сердце самой библиотеки, в котором прописаны действия JavaScript карусели и устанавливается связь с остальными файлами. Именно его мы и будем подключать на сайте, а он уже будет вызывать остальные.

Я решил начать с HTML разметки нашей JS карусели картинок, которая в моём случае выглядит так:

Text 1 Text 2 Text 3

Для оформления слайдера на JavaScript в виде попапа я использовал следующие стили:

#slider { margin: auto; width: 600px !important; overflow: hidden; } #slider-wrapper { width: 9999px; height: 343px; position: relative; transition: left 400ms linear; } .slide { float: left; width: 600px; position: relative; overflow: hidden; } .caption { width: 600px; height: 110px; line-height: 1.5; font-size: 15px; font-weight: 300; text-align: center; color: #000; display:table; } .caption-container { display: table-cell; vertical-align: middle; padding: 0 20px; } #slider-nav { position: absolute; bottom: -36px; text-align: center; left: 50%; transform: translateX(-50%); } #slider-nav a { width: 8px; height: 8px; text-decoration: none; color: #000; display: inline-block; border-radius: 50%; margin: 0 5px; background-color: #fafafa; } #slider-nav a.current { background-color: #337ab7; } .horizontal-controls { position: absolute; display: inline-block; width: 12px; height: 20px; top: 50%; margin-top: -10px; } #prev { background: url(../controls/arrow_left_inactive.png); left: -40px; } #prev:hover { background: url(../controls/arrow_left_active.png); } #next { background: url(../controls/arrow_right_inactive.png); right: -40px; } #next:hover { background: url(../controls/arrow_right_active.png); } #cq-popup { width: 600px; z-index: 23; left: calc(50%); top: calc(50%); position: fixed !important; background-repeat: no-repeat; background-position: right; background-color: #fff; font-family: "Roboto","Segoe UI","Helvetica","Georgia","Calibri","Verdana"; transform: translate(-50%, -50%) scale(1); } #cq-popup .header { display: inline-block; font-size: 17px; font-weight: 500; } #cq-popup > div { width: 500px; font-size: 22px; line-height: 36px; } #cq-popup-btclose { text-decoration: none; position: absolute; right: -40px; top: 0; background: url(../controls/btn_delete_inactive.png); height: 16px; width: 16px; } #cq-popup-btclose:hover { background: url(../controls/btn_delete_active.png); } #cq-popup-bg { position: fixed; top:0; width: 100%; height: 100%; background: rgba(51,51,51,0.8); z-index: 22; }

В результате применения данных стилей JS карусель выглядит следующим образом:

И HTML разметку, и CSS стили я вынес в отдельные файлы popupSlider.html и popupSlider.css, которые расположены в директории assets библиотеки слайдера на JavaScript. Я сделал это специально, чтобы пользователи при использовании данного кода могли без проблем корректировать разметку и оформление, не лазя в JS коде, где вынесенное нужно было бы прописать напрямую.

Кроме того, многие ещё любят минимизировать JS для ускорения загрузки сайта. Так что кастомизировать данное решение при указанных условиях было бы очень сложно.

В итоге, я решил просто подключать готовые файлы в главном файле библиотеки popupSlider.js, который для моей постановки задачи принял следующий вид:

Function Slider(element) { this.loadStatic(); this.el = document.querySelector(element); this.init(); } Slider.prototype = { init: function () { this.links = this.el.querySelectorAll("#slider-nav a"); this.wrapper = this.el.querySelector("#slider-wrapper"); this.nextBtn = this.el.querySelector("#next"); this.prevBtn = this.el.querySelector("#prev"); this.navigate(); }, navigate: function () { var self = this; for (var i = 0; i < this.links.length; ++i) { var link = this.links[i]; link.addEventListener("click", function (e) { self.slide(this); }); } self.prevBtn.style.display = "none"; self.nextBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var nextSlide = document.querySelector(""); nextSlide.click(); }, false); self.prevBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var prevSlide = document.querySelector(""); prevSlide.click(); }, false); self.close(); }, slide: function (element) { this.setCurrentLink(element); var index = parseInt(element.getAttribute("data-slide"), 10) + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + index + ")"); this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; if (index < this.links.length) this.nextBtn.style.display = "block"; else if (index == this.links.length) this.nextBtn.style.display = "none"; if (index > 1) this.prevBtn.style.display = "block"; else if (index == 1) this.prevBtn.style.display = "none"; }, setCurrentLink: function (link) { var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; this.currentElement = link; for (var j = 0; j < a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } }, loadStatic: function () { var self = this; var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "assets/popupSlider.css"; document.head.appendChild(link); var sliderHTML = ""; var xhr = new XMLHttpRequest(); xhr.open("GET", "assets/popupSlider.html", false); xhr.send(); if (xhr.status != 200) { alert("Can not load the popupSlider.html. Got the error " + xhr.status + ": " + xhr.statusText); } else { sliderHTML = xhr.responseText; } var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div); }, close: function () { document.getElementById("cq-popup-btclose").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove(); } } };

Немного комментариев по поводу приведённого кода. Содержимое файла popupSlider.js является одним JavaScript классом Slider, который, как и в PHP, содержит конструктор и методы класса. Только в JS определение конструктора, в отличие от PHP, является обязательным.

Конструктор определяется с помощью следующей конструкции:

Function Slider(element) { //код конструктора }

Внутри конструктора должны быть прописаны действия, которые будут выполняться при создании объекта класса.

Сами методы класса будут находиться внутри прототипа и будут доступны для всех экземпляров данного JavaScript класса. JS прототип в моём случае описывается следующей конструкцией:

Slider.prototype = { //методы }

Вызываться за пределами тела класса они будут следующим образом:

Var slider = new Slider(); slider.class_method();

А внутри самого кода класса доступен следующий способ:

This.class_method();

Главное только не забывать, что в JavaScript значение this зависит от контекста вызова, поэтому в телах некоторых методов, в которых нужно было вызывать методы и свойства класса, присутствует такая конструкция:

Var self = this; self.class_method(); //чтобы обратиться к методу, находящемся на уровень выше кода описываемого метода

Вроде обо всех нюансах написания кода я рассказал. Теперь пару слов о методах нашего JavaScript класса, внутри которых содержатся описания действий JS карусели картинок.

loadStatic()

Самый первый метод, вызывающийся при создании экземпляра класса в конструкторе. Отвечает за добавление в HTML кода страницы сайта HTML разметки слайдера и файла со стилями.

Сначала в памяти создаётся новый тэг link с помощью JavaScript функции document.createElement() и ему присваиваются значения всех необходимых атрибутов, в том числе и путь к CSS файлу со стилями JS слайдера. И, в конце-концов, он добавляется в HTML страницы с помощью JavaScript метода appendChild() в конец секции head, где и должны стилей.

Далее мы делаем то же самое для файла с HTML разметкой нашего слайдера на чистом JavaScript. Вот только здесь есть маленький нюанс: просто так HTML файл внутри такого же подключить нельзя, как мы сделали это с CSS файлом. Для этого есть специальные библиотеки, например, для того, чтобы подключить HTML в HTML, отлично подходит либа от w3.org — https://www.w3schools.com/howto/howto_html_include.asp

Но тогда её пришлось бы или подключать в саму библиотеку слайдера, или просить о самостоятельной её установке пользователей. Но всё это неоптимально, т.к. требует много телодвижений и замедляет скорость загрузки сайта за счёт дополнительных скриптов.

В итоге, я решил получать содержимое HTML файла внутри JavaScript кода и загружать его в новый div элемент, создаваемый в памяти, как я делал это ранее для подключения CSS файла в JavaScript. Сгенерированный элемент подключается в самый конец секции body HTML кода страницы сайта.

Если хотите вставить div с разметкой слайдера не просто в конец body, а в какой-то конкретный контейнер, то можете вместо следующего кода:

Var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div);

Прописать следующее, указав нужный идентификатор целевого контейнера (в моём случае HTML JS слайдера будет расположен в элементе с id popupSlider):

Var target = document.querySelector("#popupSlider"); target.innerHTML = sliderHTML;

Метод, который вызывается в конструкторе после loadStatic(), и нужен для инициализации свойств класса, соответствующих основным HTML элементам, к которым мы будем обращаться в следующем коде.

В конце вызывается метод navigate().

navigate()
В данном методе происходит указание действий, происходящих при клике на кнопки переключения слайдов и элементы навигации, расположенные под самим слайдером, в виде кружочков.

Сам JavaScript код смены слайдов для удобства я вынес в отдельный метод slide(), а в данном я только навешиваю его на событие click для каждой круглой кнопки в цикле.

При клике на кнопки «предыдущий слайд»/»следующий слайд» я, как видите, решил всего лишь эмулировать нажатие на соответствующий кружочек, определяя нужный относительно текущего, у которого имеется CSS класс current.

slide(element)

Метод, «отвечающий за магию» самой JavaScript карусели, в котором содержится код, меняющий слайды местами. В самом начале вызывается метод setCurrentLink(), о котором мы поговорим чуточку позже.

В качестве входного параметра в него передаётся объект кнопки навигации JS слайдера в виде кружочка.

Само переключение слайдов работает следующим образом:

Все слайды у нас оформлены в виде блоков одинаковых размеров, идущих друг за другом. Окно слайдера — это лишь видимая часть элемента, содержащего все слайды.

Мы определяем смещение левого края текущего слайда от левого края родительского элемента с помощью свойства offsetLeft.

И сдвигаем родительский элемент на это значение, чтобы в окне слайдера у нас отображался необходимый элемент.

В конце метода описано поведение для кнопок «предыдущий слайд»/»следующий слайд», оформленных в виде стрелок влево/вправо соответственно. Если текущий слайд — первый из всего списка, то кнопка перехода к предыдущему слайду скрывается. Если последний, то убираем кнопку перехода к следующему слайду.

setCurrentLink(link)

Данный метод нашего класса JavaScript слайдера отвечает за подсветку навигационной круглой кнопки, соответствующей текущему элементу. Т.е. если у нас выбран второй слайд, то будет подсвечиваться вторая кнопочка.

В качестве входного параметра в функцию передаётся объект кнопки, которая должна быть выделена как текущая.

Логика выделения текущего элемента проста:

Получаем объект родительского элемента, которым в нашем случае выступает контейнер с идентификатором slider-nav .

Получаем все навигационные элементы в виде массива ссылок.

Выделяем элемент, полученный на входе, путём добавления ему классу current .

В цикле перебираем все навигационные элементы и у всех, кроме текущего, очищаем значение класса. Это нужно для того, чтобы снять выделение с элемента, которым был текущим до данного вызова функции.

Самый последний метод класса, в котором определяется действие при нажатии на кнопку закрытия слайдера в виде крестика. Здесь, собственно говоря, код самый понятный из всего, содержащегося в классе JS слайдера.

При нажатии на кнопку закрытия, доступ к которой получается по её идентификатору, происходит удаление со страницы элемента слайдера и элемента, задающего полупрозрачный фон. Они также, в свою очередь, получаются по уникальным идентификаторам.

Сам метод вызывается внутри описанного ранее navigate(), который содержит в себе все сценарии действий, происходящих на нашем JavaScript слайдере.

Кстати, если вы захотите сделать закрытие слайдера при клике за его пределами, то достаточно в данный метод добавить следующий код:

Document.getElementById("cq-popup-bg").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove();

JavaScript слайд шоу на базе разработанной библиотеки

Иногда на практике может потребоваться сделать JS карусель с прокруткой, которую часто называют слайд шоу. В моём случае этого не требовалось, но я всё же решил сделать такую на базе итогового кода библиотеки для случая, когда это может пригодиться.

На самом деле, реализация JavaScript слайд шоу отличается от обычного слайдера совсем незначительно. Разница заключается лишь в том, что в слайд шоу слайды переключаются автоматически с заданным временным интервалом, а в случае обычной JS карусели они меняются вручную с помощь элементов навигации.

SlideShow: function (timeout) { var sliderCount = this.links.length; var self = this; this.slideCycle = setInterval(function () { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var slideId = parseInt(currentSlideNumber, 10) + 1; self.slide(document.querySelector("")); }, timeout); }

Что здесь происходит — думаю, понятно. Для создания данного метода я скопировал код из события клика на кнопки ручного переключения слайдов и разместил его внутри вызова JavaScript функции setInterval(), которая выполняет указанное действие через заданный промежуток времени.

Сценарий действия передаётся первым аргументом в виде анонимной функции, а временной интервал — вторым, который я решил сделать в виде переменной, значение которой передаётся при вызове slideShow().

Единственная модификация кода внутри setInterval(), которая потребовалась, — это определение количества слайдов и сравнение с ним индекса текущего слайда для зацикленности автоматического переключения.

Ну, и для того, чтобы данный код заработал, сам метод необходимо вызвать. Я решил сделать это всё в том же navigate(), который как раз и является сборником всяких сценариев. Вызов я разместил в самом конце, передав в качестве аргумента значение временного интервала для автоматической смены слайдов в нашем JS слайд шоу (я выбрал 2000 милисекунд или 2 секунды, вы можете по необходимости изменять это число):

self.slideShow(2000);

После этого проверяйте работу JavaScript слайдера, не забыв при этом почистить и браузера.

По идее, всё должно работать. Если нет — изучайте ошибки в консоли браузера и делитесь ими в комментариях.

В итоге, у нас получилось JS слайд шоу, в котором слайды переключаются автоматически и по кругу, т.е. при достижении последнего слайда шоу переходит на новый цикл, и показ снова начинается с самого первого элемента.

При работе с различными библиотеками JS каруселей картинок и отзывов я заметил, что данную практику разработчики активно применяют, но с некоторым дополнением. Во всех увиденных мною решениях автоматический показ слайдов прерывается, если пользователь сделал ручное переключение. Поэтому я решил сделать подобное и в своей библиотеке.

Для прерывания автоматического показа слайдов JavaScript карусели я решил воспользоваться стандартной JS функцией clearInterval(), которой в качестве аргумента передаю идентификатор временного интервала, возвращаемого функцией setInterval() при его установке.

В итоге, получился следующий код, который я решил не оформлять отдельным методом:

ClearInterval(self.slideCycle);

И разместил его в местах описания действий при кликах на различные элементы навигации, т.е. в следующих:

Link.addEventListener("click", function (e) {...}); self.prevBtn.addEventListener("click", function (e) {...}); self.nextBtn.addEventListener("click", function (e) {...});

Вызов clearInterval() лучше делать поближе к самому событию клика, главное, чтобы перед ним, а не после.

Интеграция JavaScript слайдера на сайт

Итак, наш слайдер на чистом JS готов. Осталось теперь только подключить его на сайт.

Для этого необходимо выполнить последовательно следующие шаги, которые являются стандартными действиями при интеграции каких-либо сторонних JavaScript библиотек вообще.

Шаг 1 . Копируем файлы библиотеки к себе на сайт в отдельный каталог.
Шаг 2 . Добавляем следующий код в HTML страниц, на которых необходимо будет отображение слайдера, разместив его перед закрывающимся тэгом body:

Шаг 3 . Размещаем следующий код вызова JS карусели в каком-либо существующем JavaScript файле, который подключается на странице после подключения самого слайдера:

Var aSlider = new Slider("#slider");

Как видите, данный код, — это, по сути, создание объекта класса Slider, который содержится в popupSlider.js. Именно поэтому его вызов должен быть только после подключения самого файла класса на страницу.

Добавление новых слайдов в JavaScript карусель

Здесь всё очень просто. Поскольку слайды у нас берутся из отдельной директории библиотеки slides , то при добавлении новых картинок нужно будет просто закинуть в неё нужные файлы, задав им предварительно такой же размер, как и у других.

А затем в коде файла assets/popupSlider.html добавить новый блок в контейнер с id slider-wrapper :

Text

В принципе, можете просто скопировать аналогичный существующий и изменить в нём путь к файлу изображения и текст подписи (если она вообще будет нужна).

Также необходимо будет добавить новый элемент навигации в виде кружочка, т.к. на данный момент автоматическое его добавление пока не реализовано. Для этого нужно будет добавить следующий код в контейнер с id slider-nav , прописав его в самом конце:

Значение атрибута data-slide должно быть больше самого большого у остальных элементов. Достаточно всего лишь увеличить максимальное текущее на единицу.

Упаковка JS карусели в единый скрипт

Всё, слайдер на JavaScript готов и подключен. Я лично рекомендую использовать данный вариант на практике, если он вам вообще пригодится 🙂

Для ускорения работы его, кстати, можете ещё дополнительно сжать статические компоненты: CSS, HTML и JavaScript файлы. Я не стал этого делать и предлагать вам минифицированный код, потому что систем сборок фронтэнда сейчас очень много: Gulp, Grunt, Webpack и другие. И у каждой из них свои алгоритмы сжатия и подключения файлов.

К тому же, минифицированные результаты на разных ОС могут работать по-разному. В общем, причин много.

Да и сами исходники у меня вышли, я считаю, не такие уж тяжеловесные, что нуждаются в данной процедуре. Но если же вам они будут необходимы, то настройте минификацию самостоятельно с учётом вашей ОС и сборщика.

Как я писал в самом начале, для решения поставленной мне изначально задачи нужно было получить единый JS файл для корректного использования моего слайдера через сторонний сервис на сайте. По этой причине я, собственно говоря, и не стал пользоваться готовыми сторонними библиотеками.

Тогда вариант единого скрипта JavaScript карусели вам придётся как нельзя кстати, т.к. весь контент будет содержаться прямо в нём, в том числе и HTML/CSS код, который в случае библиотеки хранится в отдельных файлах.

Скрипт в моём случае состоит из двух частей. В первой части располагалось содержимое файла popupSlider.js, которое я второй раз не буду приводить. Вставьте его самостоятельно, убрав из кода класса описание метода loadStatic() и его вызов, т.к. они нам не понадобятся.

Вторая же часть единого скрипта JavaScript слайдера для сайта представляет собой обработчик события DOMContentLoaded, которое наступает при загрузке содержимого страницы.

Там у нас будет происходить добавление на страницу HTML/CSS кода JS карусели и создание объекта класса Slider, что равносильно активации самого слайдера.

Схематично код выглядит следующим образом:

/* содержимое popupSlider.js без описания метода loadStatic() и его вызова */ document.addEventListener("DOMContentLoaded", function(){ var str = "\ \ /*css код*/ \ /* html код */ "; var div = document.createElement("div"); div.innerHTML = str; document.body.appendChild(div); var aSlider = new Slider("#slider");

Поскольку в моём случае вариант загрузки файлов на сервер был вообще закрыт, мне пришлось загрузить файлы картинок элементов управления JavaScript каруселью на облако и вместо путей к ним в HTML и CSS коде прописать ссылки, сгенерированные при сохранении.

Если у вас таких сложностей нет, то можете ничего не менять, но не забыть скопировать каталоги slides и controls библиотеки на сервер и указать правильные пути к ним.

Самописный JS слайдер — перспективы развития

Честно скажу, что заниматься целенаправленной поддержкой и развитием созданного мною решения я заниматься не планирую 🙂 На данный момент подобных слайдеров существует вагон и маленькая тележка, которые, в отличие от моего имеют свою историю, тщательно оттестированы и поддерживаются обширным комьюнити пользователей и разработчиков.

Мне же начинать весь этот путь с нуля в одиночку и создавать ещё один велосипед как-то не интересно, да и времени на это толком нет. Но, зато данный JavaScript слайдер является отличной возможностью попрактиковаться в разработке путём рефакторинга его кода и реализации новых интересных функций, которых, возможно, на данный момент ещё нет.

Так что если вам, как и мне, нужна будет кодовая база для экспериментов и вы располагаете хоть каким-то лишним свободным временем — копируйте себе код описанного мною JavaScript слайдера или присоединяйтесь к контрибьюторам на GitHub. Репозиторий открытый, а ссылку на него я предоставил в начале статьи.

Если вы хотите прокачать свои фронтэнд скилы на моём творении, могу вам даже подкинуть небольшой список правок и доработок, в которых нуждается код и которые, возможно, будут интересны вам в плане их реализации:

сделать внешний конфиг, чтобы можно было удобно настраивать слайдер;

сделать возможность встраивания слайдера внутрь страницы (сейчас оформлен только в виде попапа);

асинхронная загрузка HTML кода (сейчас сделана синхронная, которая многими браузерами помечается как устаревший вариант);

оформить библиотеку в виде пакета, NPM, Bower или другого пакета, чтобы его можно было устанавливать и оперировать зависимостями с помощью пакетных менеджеров;

сделать вёрстку адаптивной для использования JS карусели на различных устройствах;

сделать переключение слайдов по событию Swipe для мобильных пользователей.

Приведённый мною список правок, естественно, не конечный и может быть дополнен. Пишите о своих предложениях, мыслях и пожеланиях в комментариях под статьёй и делитесь со своими друзьями через социальные сети, чтобы их также привлечь к разработке.

Прошу мой код строго не судить, т.к., я как я уже говорил, Frontend спецом я себя не считаю и не являюсь. Также я открыт для всех ваших замечаний по стилю кодирования и надеюсь, что смогу что-то у вас перенять, а вы — у меня, т.е. выполнить основное предназначение разработки и поддержки OpenSource продукции.

Вступайте в сообщества проекта, подписывайтесь на обновления и можете даже помочь мне материально с помощью формы прямо под самой статьёй, если я чем-то смог вам помочь или вам просто нравится то, чем я занимаюсь 🙂

У меня всё! Всем добра! 🙂

P.S. : если вам нужен сайт либо необходимо внести правки на существующий, но для этого нет времени и желания, могу предложить свои услуги.

Более 5 лет опыта профессиональной разработки сайтов. Работа с PHP , OpenCart , WordPress , Laravel , Yii , MySQL , PostgreSQL , JavaScript , React , Angular и другими технологиями web-разработки.

Опыт разработки проектов различного уровня: лендинги , корпоративные сайты , Интернет-магазины , CRM , порталы . В том числе поддержка и разработка HighLoad проектов . Присылайте ваши заявки на email [email protected] .

Простой, легкий (21Кб в сжатом виде) слайдер, написанный на чистом Javascript, не имеющий никаких зависимостей, т.е. работает без jQuery.

Протестирован в следующих браузерах:

Chrome 26.0
Firefox 20.0
Safari 5.1.7
IE 10
Opera 16.0

Есть неполная поддержа IE8/9 (нет эффектов).

Особенности

Вы можете добавить на страницу неограниченное количество слайдеров, даже разместить один в другом.
Изменяет размеры с зависимости от содержимого, но можно и запретить.
Навигация с помощью клавиатуры - когда курсор находится на слайдере, можно переключать слайдеры с стрелками.
Поддержка мобильных touch событий.

Подключение

Перед закрывающимся тегом необходимо подключить slidr.js или slidr.min.js файл.

HTML разметка

slidr.js может работать с любыми inline , inline-block , block элементами, имеющими аттрибут id . Допускается использовать любые дочерние элементы первого уровня с атрибутом data-slidr , например:

apple
banana
coconut

apple banana coconut

Javascript

После подключения slidr.js станет доступен глобальный объект slidr . Самый простой способ создания slidr:

Slidr.create("slidr-id").start();

Вызов с заданием всех настроек:

Slidr.create("slidr-id", { after: function(e) { console.log("in: " + e.in.slidr); }, before: function(e) { console.log("out: " + e.out.slidr); }, breadcrumbs: true, controls: "corner", direction: "vertical", fade: false, keyboard: true, overflow: true, theme: "#222", timing: { "cube": "0.5s ease-in" }, touch: true, transition: "cube" }).start();

Настройки

Все доступные настройки для slidr.js приведены в таблице ниже.

Параметр Тип По умолч. Description

after	function		callback-функция после смены слайда
before	function		callback-функция до смены слайда
breadcrumbs	bool	false	Показать хлебные крошки для управления слайдами. true или false .
controls	string	border	Расположение стрелок для управления слайдами. border , corner or none .
direction	string	horizontal	Направление по умолчанию для новых слайдов. horizontal или h , vertical или v .
fade	bool	true	Включить эффект затемнения для смены слайдов (fade-in/out). true или false .
keyboard	bool	false	Включить смену сладов с помощью клавиатуры. true или false .
overflow	bool	false	Включить overflow для блока со слайдером. true или false .
pause	bool	false	Не менять слайды автоматически при наведении мыши (необходимо запустить auto()). true или false .
theme	string	#fff	Цвет элементов управления слайдером (хлебных крошек и стрелок). #hexcode или rgba(value) .
timing	object	{}	Custom animation timings to apply. {"transition": "timing"} .
touch	bool	false	Задействовать touch управление на мобильных устройствах. true или false .
transition	string	linear	Эффект смены слайдов. cube , linear , fade или none .

Функции обратного вызова after и before получают следующие данные:

{ id: "slidr-id", in: { el: #, slidr: "data-slidr-in", trans: "transition-in", dir: "direction-in" }, out: { el: #, slidr: "data-slidr-out", trans: "transition-out", dir: "direction-out" } }

Slider.js global API

Глобальное пространство имен slidr предоставляет следующие функции:

/** * Текущая версия * @return {string} major.minor.patch. */ function version() {}; /** * Доступные эффекты перехода. * @return {Array} of transitions. */ function transitions() {}; /** * Создаёт и возвращает Slidr. * Вызов этой функции дважды на одном и том же элементе возвратит уже созданный объект Slidr. * @param {string} id элемента для Slidr. * @param {Object=} opt_settings Настройки для слайдера. */ function create(id, opt_settings) {};

Slider API // Инициализация Slidr со своими настройками var s = slidr.create("slidr-api-demo", { breadcrumbs: true, overflow: true }); // Добавить горизонтальные слайды со стандартным эффектом перехода. // дублирующий элемент массива "one" в конце позводяет Slidr // прокручивать слайды бесконечно s.add("h", ["one", "two", "three", "one"]); // Добавляет вертикальный слайд с эффектом перехода "куб". s.add("v", ["five", "four", "three", "five"], "cube"); // Запуск слайдера. s.start();

Короткая запись

Var s = slidr.create("slidr-api-demo", { breadcrumbs: true, overflow: true }).add("h", ["one", "two", "three", "one"]) .add("v", ["five", "four", "three", "five"], "cube") .start();

Полный список функци API Slidr.js представлен ниже

/** * Start the Slidr! * Automatically finds slides to create if nothing was added prior to calling start(). * @param {string} opt_start `data-slidr` id to start on. * @return {this} */ function start(opt_start) {}; /** * Check whether we can slide. * @param {string} next a direction ("up", "down", "left", "right") or a `data-slidr` id. * @return {boolean} */ function canSlide(next) {}; /** * Slide! * @param {string} next a direction ("up", "down", "left", "right") or a `data-slidr` id. * @return {this} */ function slide(next) {}; /** * Adds a set of slides. * @param {string} direction `horizontal || h` or `vertical || v`. * @param {Array} ids A list of `data-slidr` id"s to add to Slidr. Slides must be direct children of the Slidr. * @param {string=} opt_transition The transition to apply between the slides, or uses the default. * @param {boolean=} opt_overwrite Whether to overwrite existing slide mappings/transitions if conflicts occur. * @return {this} */ function add(direction, ids, opt_transition, opt_overwrite) {}; /** * Automatically advance to the next slide after a certain timeout. Calls start() if not already called. * @param {int=} opt_msec The number of millis between each slide transition. Defaults to 5000 (5 seconds). * @param {string=} opt_direction "up", "down", "left", or "right". Defaults to "right". * @param {string=} opt_start The `data-slidr` id to start at (only works if auto is called to start the Slidr). * @return {this} */ function auto(opt_msec, opt_direction, opt_start) {}; /** * Stop auto transition if it"s turned on. * @return {this} */ function stop() {}; /** * Set custom animation timings. * @param {string|Object} transition Either a transition name (i.e. "cube"), or a {"transition": "timing"} object. * @param {string=} opt_timing The new animation timing (i.e "0.5s ease-in"). Not required if transition is an object. * @return {this} */ function timing(transition, opt_timing) {}; /** * Toggle breadcrumbs. * @return {this} */ function breadcrumbs() {}; /** * Toggle controls. * @param {string=} opt_scheme Toggle on/off if not present, else change layout. "border", `corner` or `none`. * @return {this} */ function controls(opt_scheme) {};

Скрол страницы во время смены слайдов

В некоторых браузерах появляется этот неприятный баг. Чтобы исправить его нужно добавить стиль к body:

Body { overflow: hidden; }

Динамическое изменение размера

Slidr сам "понимает", нужно ли изменять размеры слайдера под изображение. Если у блока слайдера указаны размеры, то Slidr не будет автоматически их менять. Если указаны свойства min-width и min-height, то слайдер будет менять свой размер под контент, учитывая эти значения. В противном случае определение размеров будет проходить в автоматическом режиме.

Автоматическое изменение размеров

good gorgeous unbelievable

Статические размеры

good gorgeous unbelievable

Элементы управления Slidr

Разметка элементов управления следующая:

Вы можете кастомизировать любой элемент управления слайдером с помощью CSS селекторов:

Aside .slidr-control.right { width: 50px !important; height: 50px !important; top: 50% !important; margin-top: -25px !important; right: -25px !important; border-radius: 25px; background: url("/static/images/arrow_right.png") 14px 13px no-repeat black; opacity: 0.4; } aside .slidr-control.right:hover { opacity: 1; }

Элемент управления "стрелка" реализован с помощью псевдоселектора:after , поэтому, чтобы его скрыть, используйте следующий код:

// Hide a single arrow within a single controller. aside .slidr-control.right:after { border-color: transparent !important; } // Hide all arrows within a single controller. aside .slidr-control:after { border-color: transparent !important; } // Hide all Slidr arrows. aside .slidr-control:after { border-color: transparent !important; }

Хлебные крошки Slidr

Хлебные крошки имеют простую HTML разметку. Каждый ul обозначает всю строку, а каждый li отдельную хлебную крошку:

...

Стилизация хлебных крошек с помощью CSS:

// Customize the position, size, border color and background color. aside { right: 50% !important; margin-right: -41px !important; } aside .slidr-breadcrumbs li { width: 15px !important; height: 15px !important; margin: 3px !important; } aside .slidr-breadcrumbs li.normal { border-color: white !important; } aside .slidr-breadcrumbs li.active { background-color: black !important; }

Лицензия

Это программное обеспечение может свободно использовать под лицензией MIT.

Нужен простой слайдер с автоматической прокруткой. Приступим...

Описание работы слайдера.

Слайды будут выстроены в линию, и через определенное время будут прокручиваться.

Красной рамкой показана видимая часть слайдера.

В конец слайдера нужно продублировать первый слайд. Это нужно для того, чтоб обеспечить прокрутку от третьего слайда к первому. Также нужно добавить последний слайд в начало для возможности прокрутки в обратном направлении от первого слайда к третьему. Ниже показана работа слайдера в прямом направлении.

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

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 скрываются все элементы которые не входят в область внутри элемента.

Для контейнера.slider задается большая ширина. Это нужно для того, чтоб в него встрочку поместились все слайды.

Слайды выравниваются с помощью свойства float:left.

Ниже показано схематичное расположение блоков слайдера.

Скрипт

Движение слайдов будет осуществляться с помощью плавного изменения свойства margin-left контейнера.slider.

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

В итоге получился простой слайдер с бесконечной автоматической прокруткой.