Вертикальная карусель jquery. Простая карусель на 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 -каруселей позволяют отображать содержимое веб-сайтов в более привлекательном виде. С помощью таких плагинов можно создавать красивые презентации прямо на страницах сайтов, и привлекать внимание посетителей.

1. Bootstrap Ambilight Slider

Bootstrap Ambilight Slider – плагин для создания слайдеров/каруселей с эффектом окружающего свечения и функционалом Bootstrap.

2. jQuery TouchSwipe Carousel

jQuery -плагин TouchSwipe Carousel позволяет определять прикосновения к сенсорному экрану и имитировать нажатие клавиши мыши.

3. ItemSlide

ItemSlide.js представляет собой jquery -плагин для создания карусели, которая будет работать как на настольных ПК, так и на мобильных сенсорных устройствах.

– jquery -плагин для создания адаптивных каруселей/слайдеров.

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

6. SilverTrack

SilverTrack – jQuery -плагин с возможностью расширения. Состоит из небольшого ядра, к которому на выбор можно подключать удобные плагины.

7. Owl Carousel 2

Owl Carousel 2 – полностью адаптивная карусель для jQuery/Zepto с поддержкой сенсорных экранов.

8. UtilCarousel

UtilCarousel – плагин jQuery -карусели с плавными переходами, реализованными за счет аппаратного ускорения. Он полностью адаптивен. Плагин поддерживает сенсорные экраны, и в нем используется трехмерная CSS3 -анимация с аппаратным ускорением. Благодаря этому плагин будет хорошо смотреться как на настольных ПК, так и на мобильных устройствах. Управлять UtilCarousel можно при помощи касаний, навигации или колесика мыши.

9. Slick

Slick представляет собой адаптивную jQuery -карусель, в которой есть все, что может понадобиться.

10. CodingJack 3D Carousel

Эта карусель поддерживается устройствами на iOS и Android и оснащена функционалом сенсорного перелистывания. Отлично смотрится на планшетах и смартфонах.

11. jQuery Slideshow

jQuery Slideshow представляет собой карусель и слайдер с поддержкой управления жестами на сенсорных устройствах. Архив плагина весит всего 2 килобайта.

12. FlimRoll

FlimRoll – миниатюрная jQuery -карусель, которая фокусирует внимание пользователя на определенном объекте, располагая его в центре экрана.

13. Tikslus

Tikslus представляет собой полностью адаптивную карусель на jQuery с множеством функций и свойств. А высокая адаптивность плагина позволяет не указывать размеры изображений. Кроме того, стоит отметить поддержку произвольной анимации, основанной на CSS3 -классах. Tikslus можно использовать с плагиномJquery Mobile .

14. Scrollbox

Scrollbox – простой, миниатюрный jQuery -плагин, который превращает списки в карусель или бегущую строку.

15. Sky Touch Carousel

Sky Touch Carousel - плагин jQuery -карусели с богатым набором функций. Плагин адаптивен, поддерживает сенсорные экраны, и при этом работает быстро и плавно. Настройки позволяют изменять внешний вид карусели с помощью CSS .

16.

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

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

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

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

После того как мы скачали архив, открываем его и распределяем файлы следующим образом:
Файл owl.carousel.css и owl.transitions.css помещаем в папку style ну или css.
Файл owl.carousel.js помещаем в папку js

Теперь нам необходимо эти файлы подключить для того чтобы они работали в нашем шаблоне.
Открываем файл 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.

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

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

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). То есть сделать из этой простенькой галереи можно все, что нужно в рамках поставленной задачи!

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

/* Тут начинается наша карусель. Блок.carousel-wrapper спозиционирован относительно, абертки.carousel-item абсолютно. . */ .carousel-wrapper{ position:relative; /* Абсолютно спозиционированные блоки получают высоту и ширину от родителя. Мы сделали их прозрачными по умолчанию, и потом они будут плавно появляться по нажатию на ссылки.arrow-prevи.arrow-next. */ .carousel-item{ position:absolute; top:0; bottom:0; left:0; right:0; padding:25px50px; opacity:0; transition:all0.5sease-in-out; /* Заметили padding слева и справа по 50px? Таким способом мы можем позиционировать наши ссылки! Каждая будет по 50px шириной. Кроме того, я использую пустые ссылки с фоновым рисунком таким образом, что ссылки выглядят как стрелки. Проверьте, поменяли ли вы URL ссылок с оригинальным URL, чтобы ваши ссылки не были просто прозрачными прямоугольниками. */ .arrow{ position:absolute; top:0; display:block; width:50px; height:100%; -webkit-tap-highlight-color:rgba(0,0,0,0); background:url("/carousel-arrow-dark.png")50%50%/20pxno-repeat; /* Давайте вернем нашу стрелку налево. */ &.arrow-prev{ left:0; } /* А вторую направо. Поскольку я использую одно и то же изображение для стрелки, я поворачиваю его на 180 градусов. */ &.arrow-next{ right:0; -webkit-transform:rotate(180deg); transform:rotate(180deg); } } /* Мне очень нравится, как слайды карусели смотрятся на темном фоне, и если блок.carousel-itemимеет класс "light", мы изменим его текст на белый и используем белые стрелки вместо серых. Проверьте еще раз, правильно ли указан путь к изображению стрелки */ &.light{ color:white; .arrow{ background:url("/carousel-arrow-light.png")50%50%/20pxno-repeat; } } /* Напишем медиа-запрос для изменения размера стрелок на устройствах с меньшим размером экрана.*/ @media(max-width:480px){ .arrow,&.light.arrow{ background-size:10px; background-position:10px50%; } } } /* Установим целям для ссылок значение display: none; Таким образом, мы избавляемся от постоянного перепрыгивания браузера в самый верх карусели при каждом нажатии на стрелки. Это свойство действует для любых элементов, чей идентификатор начинается на "target-item". */ { display:none; } /* Выше мы сделали все наши слайды карусели прозрачными, а это значит, что во время загрузки карусели мы будем получать вместо нее большое пустое поле. Изменим значение прозрачности для первого слайда на 1 для отображения. Так же устанавливаем z-index значение 2, позиционируя его выше остальных слайдов. */ .item-1{ z-index:2; opacity:1; } /* Но нам не нужно, чтобы первый слайд всегда имел значение прозрачностиopacity: 1; в противном случае нам придется пробираться через этот слайд, во время ротации остальных. */ *:target~.item-1{ opacity:0; } /* ..но если #target-item-1 в фокусе, и мы хотим показать первый слайд, тогда выбираем его с помощью значка ~ и устанавливаем прозрачность опять в 1:-) */ #target-item-1:target~.item-1{ opacity:1; } /* Если другие target-item-# в фокусе, выбираем их используя ~ селектор, плавно показываем, и размещаем их сверху с помощьюz-index: 3. Тут вы можете добавить дополнительные spanс идентификатором target-item, если их у вас будет больше трех. Может сразу и добавить 10 штук.. */ #target-item-2:target~.item-2,#target-item-3:target~.item-3{ z-index:3; opacity:1; } }