Простая карусель на jQuery. Как создать карусель используя только HTML и CSS jQuery плагин Silver Track

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

Иногда слайдер должен занимать одну треть страницы сайта. Здесь слайдер — карусель используется с эффектами переходов и с адаптивными макетами. Сайты электронной коммерции используют слайдер – карусель для демонстрации множества фото в отдельных публикациях или страницах. Код слайдера можно свободно использовать и изменять его в соответствии с потребностями.

Используя JQuery совместно с HTML5 и CSS3 , можно сделать ваши страницы более интересными, снабдив их уникальными эффектами, и обратить внимание посетителей на конкретную область сайта.

Slick – свободно распространяемый jquery – плагин, разработчики которого утверждают, что их решение удовлетворит все ваши требования к слайдеру. Адаптивный слайдер – карусель может работать в режиме «плитки » для мобильных устройств, и, в режиме «перетаскивания » для десктопной версии.

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

Демо-режим | Скачать

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

Слайдер имеет в своем составе некоторые встроенные плагины для улучшения общего функционала. Анимация, проигрывание видео, автозапуск слайдера, ленивая загрузка, автоматическая корректировка высоты – основные возможности Owl Carousel 2.0 .

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

Примеры | Скачать

Довольно маленький, но богатый по функционалу jquery плагин, который позволяет разместить на странице слайдер – карусель, обладающий небольшим ядром и не потребляющий множества ресурсов сайта. Плагин может быть использован для отображения вертикальных и горизонтальных слайдеров, с анимацией и созданием наборов изображений из галереи.

Примеры | Скачать

Ультра компактный jQuery слайдер – карусель, функционал которого намного больше, чем у обычного слайдера. Он включают в себя предварительный просмотр одного изображения, отображение нескольких изображений в виде карусели и слайдера на основе заголовков.

Примеры | Скачать

Owl carousel – слайдер с поддержкой сенсорных экранов и технологии drag and drop , легко встраиваемый в HTML — код. Плагин является одним из лучших слайдеров, которые позволяют создавать красивые карусели без какой — либо специально подготовленной разметки.

Примеры | Скачать

Использует 3D – переходы, основанные на CSS – стилях и немного Javascript кода.

Примеры | Скачать

Великолепная 3D карусель. Похоже, что это еще бета – версия, потому как я обнаружил пару проблем с ней буквально сейчас. Если вы заинтересованы в тестировании и создании ваших собственных слайдеров – эта карусель будет большим подспорьем.

Примеры | Скачать

Адаптивный слайдер – карусель с использованием технологии bootstrap как раз для вашего нового веб-сайта.

Примеры | Скачать

Наиболее востребованный на портфолио и бизнес сайтах. Подобный тип слайдера — карусели часто встречается на сайтах любого типа.

Примеры | Скачать

Это слайдер крошечного размера готов работать на устройствах с любым разрешением экрана. Слайдер может работать как в круговом, так и карусельном режиме. Tiny circle представлен как альтернатива другим слайдерам подобного типа. Имеется встроенная поддержка операционных систем IOS и Android .

В круговом режиме слайдер выглядит довольно интересно. Отлично реализована поддержка метода drag and drop и система автоматической прокрутки слайдов.

Примеры | Скачать

Мощный, адаптивный, слайдер карусельного типа отлично подойдет к современному сайту. Корректно работает на любых устройствах. Имеет горизонтальный и вертикальный режимы. Его размер минимизирован всего до 1 КБ. Ультра компактный плагин ко всему прочему имеет отличные плавные переходы.

Примеры | Скачать

Содержит более 50 эффектов, что может помочь вам в создании оригинального слайдера для вашего сайта.

Примеры | Скачать

Измените размер окна браузера, чтобы увидеть, как адаптируется слайдер. Bxslider поставляется более чем с 50 вариантами настроек и демонстрирует свои функции с различными эффектами переходов.

Примеры | Скачать

jCarousel — jQuery плагин, который поможет организовать просмотр ваших изображений. Вы сможете с легкостью создавать пользовательские карусели изображений из основы который показан в примере. Слайдер адаптивный и оптимизирован для работы на мобильных платформах.

Примеры | Скачать

Scrollbox компактный плагин для создания слайдера – карусели или текстовой бегущей строки. Основные функции включают в себя эффект вертикальной и горизонтальной прокрутки с паузой при наведении курсора мыши.

Примеры | Скачать

Простой слайдер – карусель. Если вам нужен быстрый плагин – этот подойдет на 100%. Поставляется только с основными функциями, необходимыми для работы слайдера.

Примеры | Скачать

Создатели Flexisel вдохновились плагином старой школы jCarousel , сделав его копию, ориентированную на корректную работу слайдера на мобильных и планшетных устройствах.

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

Примеры | Скачать

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

Пример | Скачать

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

Пример | Скачать

Amazing Carousel – адаптивный слайдер изображений на jQuery . Поддерживает множество систем управления сайтами, такие как WordPress , Drupal и Joomla . Также поддерживает Android и IOS и настольные варианты операционных систем без каких-либо проблем с совместимостью. Встроенные шаблоны amazing 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/.

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

Поэтому я предложу свой альтернативный вариант совсем простой карусели на jQuery.

Она может использоваться как карусель изображений, так и карусель новостей или любого другого контента =)

Единственный небольшой наворот, что я себе позволил - это тень у блока карусели.

UPD: 6.07.2014

Выглядеть оно будет примерно так:
ДЕМО Скачать

Структура примет следующий вид:

TJ simple adaptive carusel

Опишем стили:

Carousel { max-width: 1080px; /* ширина всего блока */ margin: 50px auto; width:100%; } .carousel-wrapper { margin: 10px 30px; /* отступы для стрелок */ overflow: hidden; /* скрываем содержимое, выходящее за рамки основной области */ position:relative; } .carousel-items { width: 10000px; /* устанавливаем большую ширину для набора элементов */ position: relative; /* позиционируем блок относительно основной области карусели */ } .carousel-block { float: left; /* выстраиваем все элементы карусели в ряд */ width: 250px; /* задаём ширину каждого элемента */ padding: 10px 10px 10px 0px; /* делаем оступы, чтобы элементы не сливались */ } .carousel-block img{ display:block; } /*********** BUTTONS ***********/ .carousel-button-left a, .carousel-button-right a{ width: 25px; height: 36px; position: relative; top: 80px; cursor: pointer; text-decoration:none; } .carousel-button-left a{ float: left; background: url(../images/carousel-left.png); } .carousel-button-right a{ float: right; background: url(../images/carousel-right.png); } /*********** SHADOW ***********/ .shadow{ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6); }

И, наконец, как оно должно работать:

//Обработка клика на стрелку вправо $(document).on("click", ".carousel-button-right",function(){ var carusel = $(this).parents(".carousel"); right_carusel(carusel); return false; }); //Обработка клика на стрелку влево $(document).on("click",".carousel-button-left",function(){ var carusel = $(this).parents(".carousel"); left_carusel(carusel); return false; }); function left_carusel(carusel){ var block_width = $(carusel).find(".carousel-block").outerWidth(); $(carusel).find(".carousel-items .carousel-block").eq(-1).clone().prependTo($(carusel).find(".carousel-items")); $(carusel).find(".carousel-items").css({"left":"-"+block_width+"px"}); $(carusel).find(".carousel-items .carousel-block").eq(-1).remove(); $(carusel).find(".carousel-items").animate({left: "0px"}, 200); } function right_carusel(carusel){ var block_width = $(carusel).find(".carousel-block").outerWidth(); $(carusel).find(".carousel-items").animate({left: "-"+ block_width +"px"}, 200, function(){ $(carusel).find(".carousel-items .carousel-block").eq(0).clone().appendTo($(carusel).find(".carousel-items")); $(carusel).find(".carousel-items .carousel-block").eq(0).remove(); $(carusel).find(".carousel-items").css({"left":"0px"}); }); } $(function() { //Раскомментируйте строку ниже, чтобы включить автоматическую прокрутку карусели auto_right(".carousel:first"); }) // Автоматическая прокрутка function auto_right(carusel){ setInterval(function(){ if (!$(carusel).is(".hover")) right_carusel(carusel); }, 3000) } // Навели курсор на карусель $(document).on("mouseenter", ".carousel", function(){$(this).addClass("hover")}) //Убрали курсор с карусели $(document).on("mouseleave", ".carousel", function(){$(this).removeClass("hover")})

Соответственно, тенюшку можно убрать. А для применения нужно всего лишь в css заменить размер основного блока и вложенных "скроллящихся" блоков. Так же очень легко зациклить этот процесс, дабы он скроллился автоматически (в данном случае, достаточно раскомментировать вызов функции auto_right). То есть сделать из этой простенькой галереи можно все, что нужно в рамках поставленной задачи!

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

Owl Carousel - jQuery плагин с поддержкой touch, позволяющий создать отзывчивый (адаптивный) слайдер (карусель).
Это очень удобны, простой и адаптивный плагин для создания слайдеров, каруселей и т.д
В этой статье я постараюсь объяснить и показать вам как он работает.

Установка плагина Owl Carousel
Для начала нам нужно скачать архив с плагином

Ниже я покажу пример установки плагина в шаблон DataLife Engine.

Теперь нам необходимо эти файлы подключить для того чтобы они работали в нашем шаблоне.
Открываем файл main.tpl aперед строкой вписываем следующие строки:
Папку css меняем на ту в которой у вас находятся css стили!
Затем в самом низу перед строкой вписываем такую строку:
Ну вот и всё! С установкой мы закончили.

Теперь нам необходимо вставить и настроить сам слайдер.
Я покажу на примере topnews т.е выведу популярные новости через нашу owl карусель.

На странице с документацией описаны все параметры, демо, и способы использования нашего плагина Owl Carousel.
Переходим по ссылке и выбираем любой понравившийся слайдер.
Для наших topnews я выбрал самый первый с названием Images. Во вкладке jаvascript копируем эти строки:
$(document).ready(function() { $("#owl-demo").owlCarousel({ autoPlay: 3000, items: 4, itemsDesktop: , itemsDesktopSmall: }); }); и вставляем их в файле main.tpl перед строкой

Затем во вкладке CSS копируем строки:
#owl-demo .item{ margin: 3px; } #owl-demo .item img{ display: block; width: 100%; height: auto; } и подключаем их в любой css файл либо в файл main.tpl перед строкой но после строки !
Теперь мы разберем наш HTML код и подключим к topnews. В файле main.tpl в нужное место вставляем тег {topnews} который в свою очередь выводит список популярных новостей, внешний вид которых можно настроить в файле topenews.tpl, об этом чуть ниже.
Наш код с тегом должен выглядеть вот так:
{topnews} Ну и теперь нам осталось настроить сами новости.
Открываем файл t opnews.tpl и в самое начало вписываем:
в самом конце закрываем атрибут

Если вы пользуетесь одним из моих шаблонов с Bootstrap то как вариант можно использовать следующие строки в файле topnews.tpl:
{title limit="55"}

{text limit="100"}

Читать Новости будут выводится в таком виде

Этот плагин можно использовать практически в любом месте, так же и с использованием тега {custom category}
Им же можно заменить и стандартную галерею DLE, об этом я опубликую отдельную статью. Пользуйтесь на здоровье;)

С уважением admin. download Внимание: Достигнут лимит на скачивание. Приходите завтра =)

Добро. В этой статье я выкладываю отличный легкий слайдер/карусель на jQuery. Карусель имеет 3D эффект при прокрутке изображений. Центральное фото имеет обычный размер, а чем дальше изображение от центра, тем оно меньше в размере и имеет большую прозрачность.

Карусель никак не стилизована, но зато не нужно убирать лишний css, вы с легкостью накинете свои стили. Установка слайдера также очень проста.

Для начала нужно скачать архив и разархивировать файлы

Теперь нужно папки images и js залить в корень вашего сайта. Если такие папки уже существуют, то перенести в эти папки файлы, которые в них лежат.

Подключаем библиотеку 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; }); });

Все это естественно вставляем в тег

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

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, либо прямо в , обернув их в

Ну и последний шаг: вставляем html код карусели туда, где мы хотим ее видеть.

Prev | Next

jQuery 3D карусель подключена и если вы все сделали правильно, то она заработает. Если этого не произошло Вам нужно проверить все пути к js-скриптам и возможный конфликт скриптов. Всем пока