Самая простая карусель изображений для юкоз. Простая карусель на jQuery. AnoSlide – Ультра компактный адаптивный jQuery слайдер
Добро. В этой статье я выкладываю отличный легкий слайдер/карусель на jQuery. Карусель имеет 3D эффект при прокрутке изображений. Центральное фото имеет обычный размер, а чем дальше изображение от центра, тем оно меньше в размере и имеет большую прозрачность.
Карусель никак не стилизована, но зато не нужно убирать лишний css, вы с легкостью накинете свои стили. Установка слайдера также очень проста.
Установка jQuery карусели на сайт 1. Скачиваем архивДля начала нужно скачать архив и разархивировать файлы
2. Заливаем нужные файлы на серверТеперь нужно папки images и js залить в корень вашего сайта. Если такие папки уже существуют, то перенести в эти папки файлы, которые в них лежат.
3. Подключаем скриптыПодключаем библиотеку jquery
и скрипт, отвечающий за работу карусели
а также настройки скрипта
$(document).ready(function () {
var carousel = $("#carousel").waterwheelCarousel({
flankingItems: 3,
movingToCenter: function ($item) {
$("#callback-output").prepend("movingToCenter: " + $item.attr("id") + "
");
},
movedToCenter: function ($item) {
$("#callback-output").prepend("movedToCenter: " + $item.attr("id") + "
");
},
movingFromCenter: function ($item) {
$("#callback-output").prepend("movingFromCenter: " + $item.attr("id") + "
");
},
movedFromCenter: function ($item) {
$("#callback-output").prepend("movedFromCenter: " + $item.attr("id") + "
");
},
clickedCenter: function ($item) {
$("#callback-output").prepend("clickedCenter: " + $item.attr("id") + "
");
}
});
$("#prev").bind("click", function () {
carousel.prev();
return false
});
$("#next").bind("click", function () {
carousel.next();
return false;
});
$("#reload").bind("click", function () {
newOptions = eval("(" + $("#newoptions").val() + ")");
carousel.reload(newOptions);
return false;
});
});
Все это естественно вставляем в тег
4. Подключаем стилиТакже нужно прописать стили, которые вы скорее всего измените, но для базового отображения карусели они нужны. Вот они:
Body { font-family:Arial; font-size:12px; background:#ededed; } .example-desc { margin:3px 0; padding:5px; } #carousel { width:960px; margin: 60px auto; border:1px solid #222; height:300px; position:relative; clear:both; overflow:hidden; background:#FFF; } #carousel img { visibility:hidden; /* hide images until carousel can handle them */ cursor:pointer; /* otherwise it"s not as obvious items can be clicked */ } .split-left { width:450px; float:left; } .split-right { width:400px; float:left; margin-left:10px; } #callback-output { height:250px; overflow:scroll; } textarea#newoptions { width:430px; } .nav { width: 80px; margin: 20px auto }
Вставьте стили либо в уже имеющийся файл css, либо прямо в , обернув их в
5. Вставляем html код каруселиНу и последний шаг: вставляем html код карусели туда, где мы хотим ее видеть.
Prev | Next
jQuery 3D карусель подключена и если вы все сделали правильно, то она заработает. Если этого не произошло Вам нужно проверить все пути к js-скриптам и возможный конфликт скриптов. Всем пока
В настоящее время слайдер – карусель – функционал, который просто необходимо иметь на сайте для бизнеса, сайте — портфолио или любом другом ресурсе. Наряду с полноэкранными слайдерами изображения, горизонтальные слайдеры – карусели хорошо вписываются в любой веб-дизайн.
Иногда слайдер должен занимать одну треть страницы сайта. Здесь слайдер — карусель используется с эффектами переходов и с адаптивными макетами. Сайты электронной коммерции используют слайдер – карусель для демонстрации множества фото в отдельных публикациях или страницах. Код слайдера можно свободно использовать и изменять его в соответствии с потребностями.
Используя JQuery совместно с HTML5 и CSS3 , можно сделать ваши страницы более интересными, снабдив их уникальными эффектами, и обратить внимание посетителей на конкретную область сайта.
Slick – плагин современного слайдера — каруселиSlick – свободно распространяемый jquery – плагин, разработчики которого утверждают, что их решение удовлетворит все ваши требования к слайдеру. Адаптивный слайдер – карусель может работать в режиме «плитки » для мобильных устройств, и, в режиме «перетаскивания » для десктопной версии.
Содержит эффект перехода «затухание », интересную возможность «режим в центре », ленивую загрузку изображений с автопрокруткой. Обновленный функционал включает в себя добавление слайдов и фильтр слайдов. Все для того, чтобы вы настроили плагин в соответствии с вашими требованиями.
Демо-режим | Скачать
Owl Carousel 2.0 – jQuery — плагин с возможностью использования на сенсорных устройствахВ арсенале этого плагина – большой набор функций, подходящий как для новичков, так и для опытных разработчиков. Это обновленная версия слайдера — карусели. Его предшественник именовался точно также.
Слайдер имеет в своем составе некоторые встроенные плагины для улучшения общего функционала. Анимация, проигрывание видео, автозапуск слайдера, ленивая загрузка, автоматическая корректировка высоты – основные возможности Owl Carousel 2.0 .
Поддержка возможности drag and drop
включена для более удобного использования плагина на мобильных устройствах.
Плагин отлично подойдет для отображения больших изображений даже на маленьких экранах мобильных устройств.
Примеры | Скачать
jQuery плагин Silver TrackДовольно маленький, но богатый по функционалу jquery плагин, который позволяет разместить на странице слайдер – карусель, обладающий небольшим ядром и не потребляющий множества ресурсов сайта. Плагин может быть использован для отображения вертикальных и горизонтальных слайдеров, с анимацией и созданием наборов изображений из галереи.
Примеры | Скачать
AnoSlide – Ультра компактный адаптивный jQuery слайдерУльтра компактный jQuery слайдер – карусель, функционал которого намного больше, чем у обычного слайдера. Он включают в себя предварительный просмотр одного изображения, отображение нескольких изображений в виде карусели и слайдера на основе заголовков.
Примеры | Скачать
Owl Carousel – Jquery слайдер — карусельOwl carousel – слайдер с поддержкой сенсорных экранов и технологии drag and drop , легко встраиваемый в HTML — код. Плагин является одним из лучших слайдеров, которые позволяют создавать красивые карусели без какой — либо специально подготовленной разметки.
Примеры | Скачать
3D галерея — карусельИспользует 3D – переходы, основанные на CSS – стилях и немного Javascript кода.
Примеры | Скачать
3D карусель с использованием TweenMax.js и jQueryВеликолепная 3D карусель. Похоже, что это еще бета – версия, потому как я обнаружил пару проблем с ней буквально сейчас. Если вы заинтересованы в тестировании и создании ваших собственных слайдеров – эта карусель будет большим подспорьем.
Примеры | Скачать
Карусель с использованием bootstrapАдаптивный слайдер – карусель с использованием технологии bootstrap как раз для вашего нового веб-сайта.
Примеры | Скачать
Основанный на Bootstrap – фреймворке слайдер — карусель Moving BoxНаиболее востребованный на портфолио и бизнес сайтах. Подобный тип слайдера — карусели часто встречается на сайтах любого типа.
Примеры | Скачать
Tiny CirclesliderЭто слайдер крошечного размера готов работать на устройствах с любым разрешением экрана. Слайдер может работать как в круговом, так и карусельном режиме. Tiny circle представлен как альтернатива другим слайдерам подобного типа. Имеется встроенная поддержка операционных систем IOS и Android .
В круговом режиме слайдер выглядит довольно интересно. Отлично реализована поддержка метода drag and drop и система автоматической прокрутки слайдов.
Примеры | Скачать
Слайдер контента ThumbelinaМощный, адаптивный, слайдер карусельного типа отлично подойдет к современному сайту. Корректно работает на любых устройствах. Имеет горизонтальный и вертикальный режимы. Его размер минимизирован всего до 1 КБ. Ультра компактный плагин ко всему прочему имеет отличные плавные переходы.
Примеры | Скачать
Wow – слайдер — карусельСодержит более 50 эффектов, что может помочь вам в создании оригинального слайдера для вашего сайта.
Примеры | Скачать
Адаптивный jQuery слайдер контента bxSliderИзмените размер окна браузера, чтобы увидеть, как адаптируется слайдер. Bxslider поставляется более чем с 50 вариантами настроек и демонстрирует свои функции с различными эффектами переходов.
Примеры | Скачать
jCarouseljCarousel — jQuery плагин, который поможет организовать просмотр ваших изображений. Вы сможете с легкостью создавать пользовательские карусели изображений из основы который показан в примере. Слайдер адаптивный и оптимизирован для работы на мобильных платформах.
Примеры | Скачать
Scrollbox — jQuery плагинScrollbox компактный плагин для создания слайдера – карусели или текстовой бегущей строки. Основные функции включают в себя эффект вертикальной и горизонтальной прокрутки с паузой при наведении курсора мыши.
Примеры | Скачать
dbpasCarouselПростой слайдер – карусель. Если вам нужен быстрый плагин – этот подойдет на 100%. Поставляется только с основными функциями, необходимыми для работы слайдера.
Примеры | Скачать
Flexisel: адаптивный JQuery плагин слайдера — каруселиСоздатели Flexisel вдохновились плагином старой школы jCarousel , сделав его копию, ориентированную на корректную работу слайдера на мобильных и планшетных устройствах.
Адаптивный макет Flexisel , при работе на мобильных устройствах, отличается от макета, ориентированного на размер окна браузера. Flexisel отлично адаптирован к работе на экранах, как с низким, так и высоким разрешением.
Примеры | Скачать
Elastislide – адаптивный слайдер — карусельElastislide отлично адаптируется под размер экрана устройства. Вы можете задать минимальное количество отображаемых изображений при определенном разрешении. Хорошо работает в качестве слайдера – карусели с галерей изображений, используя фиксированную обертку совместно с эффектом вертикальной прокрутки.
Пример | Скачать
FlexSlider 2Свободно распространяемый слайдер от Woothemes . По праву считается одним из лучших адаптивных слайдеров. Плагин содержит несколько шаблонов и будет полезен как начинающим пользователям, так и экспертам.
Пример | Скачать
Amazing CarouselAmazing Carousel – адаптивный слайдер изображений на jQuery . Поддерживает множество систем управления сайтами, такие как WordPress , Drupal и Joomla . Также поддерживает Android и IOS и настольные варианты операционных систем без каких-либо проблем с совместимостью. Встроенные шаблоны amazing carousel позволяют использовать слайдер в вертикальном, горизонтальном и круговом режимах.
Примеры | Скачать
Делать карусель на чистом JS , с нуля и самому? Зачем изобретать велосипед, когда есть готовые решения, slick / owl слайдеры? На это есть, как минимум две причины:
- в учебных целях
- для выполнения тестовых заданий
При трудоустройстве, даже на вакансию HTML верстальщика, вас попросят, не просто сверстать карусель, но и привести её в действие на JS , без использования сторонних библиотек.
Пример карусели Что делает JavaScript с элементами?Меняет свойства у элементов, с помощью методов, при наступлении событий. Три кита, на которых держится JavaScript :
- свойства
- методы
- события
Пользователь сам запускает событие onclick , при клике по кнопке. Задача программиста, повесить событие клика на нужный элемент и написать инструкции (функцию) для браузера, что должно произойти, при клике.
HTML разметка для каруселиСоздадим контейнер для картинок, вставим сами картинки и две кнопки – Вперед / Назад .
Назад
Вперед
width: 640px;
margin: 20px auto;
text-align: center;
}
#gallery .photos img{
width: 100%;
display: none;
}
#gallery .photos img:first-child{
display: block;
}
Buttons {
margin-top: 20px;
}
Как вообще писать JS код, когда не понимаешь логики, происходящего. При нажатии на кнопку Вперед , текущая картинка исчезает, а на её месте появляется новая. В области видимости, всегда одна картинка, а где тогда остальные? А остальные, мы спрятали, задали для всех картинок display: none , оставив только первую, задав ей display: block , через псевдокласс first-child .
Как сделать так, чтобы при каждом клике по кнопке Вперед , первая картинка исчезала, а появлялась вторая, а вместо второй, третья. Необходимо, переключать свойство display , между none / block , при клике по кнопке.
JS код Делаем выборку элементовПолучим кнопки Вперед / Назад по селектору, применив метод querySelector и положим их в переменные btn_prev / btn_next .
Let btn_prev = document.querySelector("#gallery .buttons .prev");
let btn_next = document.querySelector("#gallery .buttons .next");
Получим все картинки по селектору, через метод querySelectopAll и так же поместим, их в переменную images .
querySelectopAll – получает массив элементов, то есть все картинки.
Let images = document.querySelectorAll("#gallery .photos img");
В массиве, элементы хранятся, уже в пронумерованном виде, начиная с нуля. Поэтому, мы можем обращаться к ним по номеру. Но сначала, создадим новую переменную и поместим в неё, номер первой картинки, той, которая имеет свойство display: block .
Let i = 0; // номер текущей картинки, на экране
Обращаемся к текущей картинке и меняем ей в стилях, свойство display .
Images[i].style.display = "none"; // прячем текущую картину
Сейчас, на экране нет ни одной картинки. Каким образом, там появится следующая картинка? Нам известно, что номер следующей картинки, всегда будет больше номера предыдущей, на единицу.
I++ ; // увеличиваем переменную i на единицу
images.length – это количество картинок, которое может меняться, поэтому не нужно указывать, что у нас 3 картинки, браузер и так это знает. Мы увеличиваем счетчик i , каждый раз на единицу, до тех пор, пока не покажется последняя картинка, а затем принудительно, заставляем карусель, возвращаться снова на первую картинку. Это называется – зацикливанием.
Прописываем условие, что когда счетчик i , станет больше, чем количество, имеющихся картинок, то произойдет возврат, к текущей картинки, под номером 0.
If(i >= images.length){
i = 0; // переменная i равна 0
}
При листании картинок в обратном порядке, счетчик i , должен уменьшаться на единицу. Если значение переменной, станет меньше нуля, то в неё, надо положить номер последней картинки.
Btn_prev.onclick = function(){
images[i].style.display = "none";
i = i - 1;
if(i < 0){
i = images.length - 1;
}
images[i].style.display = "block";
}
Вычитаем из общего количества images.length , единицу и получаем картинку под номером 2. Это и будет последняя картинка, так как исчисление в программировании, начинается с нуля.
Для прохождения теста, на позицию верстальщика, необходимо уверенное понимание JS, как раз ориентирован на верстальщиков.
В интернете можно встретить множество великолепных плагинов для создания jQuery каруселей и слайдеров. Они позволяют реализовать динамический скроллинг с дополнительными эффектами.
Это один из популярнейших трендов в веб-дизайне за последние несколько лет. Кроме этого использование готовых библиотек и jQuery-плагинов позволяет существенно сэкономить время. Все что нужно, это указать ссылку на JavaScript и CSS-файлы , а затем применить эффект к нужным HTML-элементам .
Также можно установить собственные настройки и CSS-стили . Сегодняшняя статья направлена на то, чтобы познакомить вас адаптивными jQuery-плагинами для создания каруселей и слайдеров.
Distractful – jQuery-плагин для создания сенсорного полноэкранного слайдера контента
Адаптивный полноэкранный слайдер карусель jQuery контента с поддержкой сенсорных экранов. Плагин распространяется под лицензионным соглашением GNU GENERAL PUBLIC LICENSE v3 :
Neoslide: простенький и расширяемый плагин jQuery-карусели
Простой и расширяемый jQuery-плагин , который позволит вам использовать полностью настраиваемый слайдер на любой веб-странице:
Hslider: плагин адаптивной галереи изображений на всю ширину страницы
Еще один плагин для демонстрации изображений при помощи адаптивной карусели jQuery с элементами управления и настраиваемой длительностью задержки:
Carousel 3D: плагин jQuery-карусели с трехмерными эффектами вращения
Sleek Slider: адаптивная jQuery-карусель на весь экран
Миниатюрная и привлекательная jQuery-карусель для демонстрации контента и изображений с различными видами навигации (SVG-стрелки с миниатюрами изображений, элементы пагинации или вкладки ):
PaW Carousel: адаптивная карусель на базе jQuery
PaW Carousel (v2) представляет собой миниатюрный плагин для создания адаптивных, простых каруселей jQuery с выводом миниатюр изображений:
Carousel Sharer: jQuery-карусель для репостов в социальные сети
Carousel Sharer – это jQuery-плагин , который позволяет демонстрировать несколько товаров в ряд, и дает возможность посетителям делиться вашими товарами в Facebook , Twitter , Google+ и Pinterest :
Simply Carousel: минималистичная адаптивная карусель изображений
Simply Carousel представляет собой миниатюрный и быстрый jQuery-плагин , который позволяет создавать гибкие адаптивные слайдеры и карусели изображений:
Slides: адаптивная jQuery-карусель и слайд-шоу с поддержкой сенсорных устройств
Slides – миниатюрный jQuery-плагин для создания адаптивных каруселей для сайта jQuery с миниатюрами, стрелочной навигацией и возможностью использовать собственные элементы управления. Реализована поддержка сенсорных экранов:
Карусель для контента на jQuery
Простая адаптивная jQuery-карусель с функциями автоматического воспроизведения, элементами управления и даже callback-функциями :
Slick: адаптивная и гибкая jQuery-карусель
Slick представляет собой «свежий » плагин для создания настраиваемых, адаптивных и оптимизированных под мобильные устройства jQuery каруселей и слайдеров, способных работать с любыми HTML-элементами :
bxSlider: слайдер HTML-контента на jQuery
bxSlider – один из лучших jQuery-слайдеров контента, доступных на сегодняшний день. Этот плагин отлично подойдет для организации слайд-шоу:
CarouFredSel: гибкий и мощный плагин jQuery-карусели
jQuery.carouFredSel представляет собой плагин, который превращает любой HTML-элемент в карусель контента. В нем можно прокручивать один или несколько элементов одновременно как горизонтально, так и вертикально. Также можно включить автоматическое воспроизведение и сделать прокрутку бесконечной:
Циклическая карусель контента на jQuery
Карусель, в которой каждый клик будет раскрывать новый блок контента. Нажатие по крестику приведет к закрытию активного блока и вернет нас на исходную позицию просмотра миниатюр:
Cloud Carousel: 3D-карусель на Javascript
Эта карусель позволяет создать реалистичную перспективу. Многие 3D карусели jQuery применяют эффект перспективы лишь к размеру изображения, а не к его расположению, что приводит к диспропорции элементов на странице:
Elastislide: адаптивная карусель на jQuery
Elastislide представляет собой адаптивную jQuery-карусель , которая подстраивается под экраны любого размера. Вставка карусели в контейнер с гибкой шириной сделает «резиновой » и саму карусель:
jCarousel Lite
С помощью этого плагина вы сможете просматривать изображения или HTML-элементы в виде слайдера. Он весит всего 2Кб, но при этом позволяет использовать собственные настройки:
3D Carousel
Создайте 3D карусель jQuery из изображений с эффектами тени и анимацией, реагирующей на положение курсора:
Плагин JQuery carousel
Настройки этого плагина позволяют определить, сколько элементов будет отображено в карусели, после чего плагин адаптирует ее под нужную ширину:
Вращающийся слайдер изображений на jQuery
Ассиметричный слайдер изображений с небольшим дополнением: при прокрутке изображений они слегка поворачиваются. За счет небольшого смещения элементов слайдер приобретает необычную форму:
JQuery Feature Carousel
Этот плагин предназначен для отображения рекомендованных статей на главной странице, но его также можно использовать для любого другого контента. Он позволяет одновременно показывать до трех изображений, в то время как остальные элементы jQuery карусели контента скрыты:
jQuery Infinite Carousel
Представляет собой jQuery-плагин , который позволяет демонстрировать неограниченное количество изображений и видеороликов в карусели. В отличие от остальных каруселей, Infinite Carousel показывает элементы бесконечным циклом без необходимости пользоваться навигацией:
jQuery-плагин Liquid Carousel
Liquid Carousel представляет собой плагин, предназначенный для создания «текучих » дизайнов. Каждый раз, когда контейнер адаптивной карусели jQuery изменяется в размере, количество отображаемых элементов подстраивается под новую ширину:
Jquery MS Carousel
Одним из эффективных способов привлечения внимания пользователей на странице сайта это создание движущейся анимации. Элементы анимации помогают более наглядно рассказать и показать пользователям о вашем продукте. Последнее время большую популярность получили выезжающие панели, а также ряд других эффектов, которые появляются при прокрутке или нажатии на картинку. Они также известны как слайдеры, карусели и выезжающие панели. В данной статье речь пойдет о создании адаптивного слайдера карусельного типа, с плавным эффектом автопрокрутки.
На сегодняшний день в сети представлено сотни обзоров с ссылками на готовые решения, однако большинство из них содержат множество неиспользуемых функций, которые значительно понижают работоспособность слайдера, также как и замедляют загрузку сайта в целом. Профессиональные веб-разработчики всегда стремились создавать гибкие в настройке программные продукты, с низким порогом вхождения дополнительных библиотек и плагинов. Именно поэтому в работе нашего скрипта задействованы минимальные требования для организации такого слайдера. Функционал работы позволяет задавать интервал переключения, скорость, а также выбор определнного слайда. Ниже приведен ряд перменных, регулирующих работу самого слайдера.
timeList - скорость переключения слайда
TimeView - время показа
RadioBut - кнопки под слайдом, для быстрой навигации. По умолчанию значение true, если использовать false, то кнопки пропадут.
А теперь давайте приступим! Создадим и откроем файл index.htm
В представленном коде как мы видим ничего сложного нет, slider-wrap определяет общее положение и выравнивает слайдер по середине экрана. Параметр active-slide задает размер и высоту картинки согласно ее длине. И slider показывает только активную картинку.
Теперь создадим и откроем файл style.css и пропишем туда нужную нам разметку:
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); body { color: #4f4f5a; font-family: "Roboto", sans-serif; font-size: 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-user-select: none; -o-user-select: none; user-select: none; } #slider{ position: relative; width: calc(100% * 4); top: 0; left: 0; margin: 0; padding: 0; -webkit-transition: 1s; -o-transition: 1s; transition: 1s; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; 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.png) center bottom no-repeat; } .Radio-But .ctrl-select:hover { cursor:pointer; background-position:center center; } .Radio-But .ctrl-select.active { background-position:center top; } #prewbutton, #nextbutton { display:block; width:40px; height:100%; position:absolute; top:0; overflow:hidden; text-indent:-999px; background: url("arrowBg.png") left center no-repeat; 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; }
В свойстве стиля slider-wrap пропишите width – максимальную длину ваших картинок.
В свойстве стиля #slider { width: calc(100% * 4); } и .slide { width: calc(100%/4); } укажите количество картинок в вашем слайдере. В нашем примере их 4.
Если стрелки вперед/назад мешают видимости вашего слайдера их можно сделать невидимыми и появляться они будут при наведении. Для этого в параметрах prewBut и nextBut , задайте свойству opacity значение 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 = function(arrow){ clearTimeout(slideTime); if(arrow == "next"){ 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 = arrow; 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 += "" + index + ""; }); $("" + 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("next")}, 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(function() { clicking = false; }); $(document).mouseup(function(){ clicking = false; }); $(".slide").mousemove(function(e){ if(clicking == true) { if(e.clientX < prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX > prevX) { animSlide("prew"); clearTimeout(slideTime); } clicking = false; } }); $(".slide").hover().css("cursor", "pointer"); rotator(); });
Функция animSlide принимает три вида значений: next, prew, числовое значение. Параметр next переключает следующий слайд, prew возвращает предыдущий, а числовое значение это определенно заданный слайд, выбранный через радио кнопки под слайдом.
В представленном слайдере использовались картинки с веб-ресурса https://pixabay.com/.