Jquery слайдер новин. Добірка адаптивних слайдерів. Потрясне слайд-шоу jQuery "Skitter"
Час не стоїть на місці, а з ним і прогрес. Це торкнулося просторів інтернету. Вже можна побачити як змінюється зовнішній виглядсайтів і особливо великою популярністю користується адаптивний дизайн. У зв'язку з цим адаптивні слайдери для сайтустали дуже популярні та актуальні. З'явилося чимало нових адаптивних jquery слайдерів, галерей та каруселів.
Якщо ви хочете встановити універсальний слайдерабо карусельдо себе на сайт можете перейдіть по
Слайдери для сайту
1. Responsive Horizontal Posts Slider
Адаптивна горизонтальна карусель з детальною інструкцієюпо встановленню. Виконана вона у простому стилі, але ви можете її стилізувати під себе.
2. Слайдер на Glide.js
Цей слайдер підходить для будь-якого сайту. Тут використовується Glide.js із відкритим кодом. Кольори слайдера можна легко змінити.
Адаптивні слайдери для сайту із контентом. Родзинкою даного слайдера є 3d-ефект зображень, а також різні анімації появи у випадковому порядку.
4. Слайдер з використанням HTML5 canvas
Дуже красивий та вражаючий слайдер з інтерактивними частинками. Виконаний він за допомогою HTML5 canvas,
5. Слайдер "Морфінг зображень"
Слайдер із ефектом морфінгу. У цьому прикладі слайдер добре підійде для портфоліо веб-розробника або веб-студії у вигляді портфоліо.
6. Круговий слайдер
Слайдер у вигляді кола із ефектом перевороту зображення.
7. Слайдер із розмитим фоном
Адаптивний слайдер з перемиканням та розмиттям заднього фону.
8. Адаптивний фешн слайдер
Простий, легкий та адаптивний слайдер для сайту.
9. Slicebox - jQuery 3D image slider(ОНОВЛЕНИЙ)
Оновлена версія Slicebox slider з виправленнями та новими можливостями.
Плагін JQuery для створення гнучкої сітки зображення, який перемикатиме знімки, використовуючи різні анімації та таймінги.
Слайдери для сайту – друга частина.
11. Flexslider
Універсальний безкоштовний плагін для вашого сайту. Цей плагін виконаний у кількох варіантах слайдера та каруселях.
12. Фоторама
Fotorama- це універсальний плагін. Має багато налаштувань. Все працює швидко та легко, також є можливість перегляду слайдів на весь екран. Слайдер можна використовувати як у фіксованому розмірі так і адаптивному, з мініатюрами та без, з круговою прокруткою та без та ще багато чого. На основі фоторами можна створити цікаві адаптивні слайдери для сайту.
P.S.Ставив слайдер кілька разів і вважаю що він один із найкращих
13. Безкоштовна та адаптивна 3D галерея-слайдер з мініатюрами.
Експериментальна галерея-слайдер 3DPanelLayoutз сіткою та цікавими ефектами анімації.
14. Слайдер на CSS3
Адаптивний слайдер виконаний за допомогою CSS3 з плавною появоюконтенту та легкою анімацією.
— це слайдер зображень із приголомшливими візуальними ефектамита анімаціями.
17. Elastic
Еластичний слайдер з повною адаптивністю та мініатюрами слайдів.
18. Slit
Це повноекранний адаптивний слайдер із використанням анімації css3. Виконаний слайдер у двох варіантах і анімація зроблена досить незвично.
19. Адаптивна фотогалерея plus
Простий безкоштовний слайдер-галерея із підвантаженням зображень.
20. Адаптивний слайдер для WordPress
Адаптивний та безкоштовний слайдер для WP.
21. Parallax Content Slider
Слайдер з ефектом паралаксу та контролем кожного елемента за допомогою CSS3.
22. Слайдер із прив'язкою музики
Слайдер з використанням відкритого вихідного коду JPlayer. Цей слайдер нагадує презентацію із музикою.
Слайдери для сайту третина.
23. Слайдер із jmpress.js
Адаптивний слайдер заснований на jmpress.js і тому дозволить використовувати деякі цікаві 3D ефекти до слайдів.
24. Fast Hover Slideshow
Слайд-шоу з швидким перемиканням слайдів. Слайди перемикаються під час наведення курсору.
Акордеон зображень за допомогою CSS3.
Це адаптивна галереяяка оптимізована для тач-пристроїв.
29.Image Montage with jQuery
Автоматичне розташування зображень залежить від ширини екрана. Дуже корисна та цікава штука при розробці сайту портфоліо.
33. Багаторівнева фотокартка.
Це багаторівнева карта — галерея зображень дозволяє показувати зображення, пов'язані з розташуванням. В основі лежить google maps. У правій частині показано мініатюру зображення, яку можна переглянути в лайт-боксі при натисканні на нього.
34. Повноекранна галерея з мініатюрами
Адаптивна галерея-слайдер з мініатюрою та описом слайда.
Слайдери для сайту постійно оновлюються і їхня кількість з кожним днем стає все більшою. Якщо у Вас є ваші улюблені слайдери або можливо ви не знайшли того, що шукали, тоді пишіть у коментарі і я постараюся Вам допомогти.
Потрібен простий слайдер з автоматичним прокручуванням. Приступимо...
Опис роботи слайдера
Слайди будуть збудовані в лінію, і через визначений часпрокручуватимуться.
Червоною рамкою показано видиму частину слайдера.
В кінці слайдера потрібно продублювати перший слайд. Це необхідно для того, щоб забезпечити прокручування від третього слайду до першого. Також потрібно додати останній слайд на початок для можливості прокручування у зворотному напрямку від першого слайда до третього. Нижче показано роботу слайдера у прямому напрямку.
Коли слайдер досягає кінця, на місце останнього слайда миттєво поміщається його копія з початку слайдера. Потім цикл знову повторюється. У такий спосіб створюється ілюзія нескінченного слайдера.
HTML розмітка
Для початку зробимо простий слайдер з автоматичним прокручуванням. Для його роботи потрібні два контейнери. Перший задаватиме розмір видимої області слайдера, а другий потрібен для розміщення в ньому слайдерів. Розмітка слайдера матиме такий вигляд:
Стилі слайдера
.slider-box( width : 320px ; height : 210px ; overflow : hidden ; ) .slider( position : relative ; width : 10000px ; height : 210px ;) ;Контейнер.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")); // Поточне зміщення блоку. 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 ) ; // Блок.слiдер зміщується вліво на 1 слайд. } ;У результаті вийшов простий слайдер із нескінченним автоматичним прокручуванням.
1. Чудове jQuery слайд-шоу
Велике ефектне слайд-шоу із використанням jQuery технологій.
2. jQuery плагін "Scale Carousel"
Слайд-шоу, що масштабується, з використанням jQuery. Ви зможете задати розміри для слайд-шоу, які вам найбільше підходять.
3. jQuery плагін "slideJS"
Слайдер зображень із текстовим описом.
4. Плагін "JSliderNews"
5. CSS3 jQuery слайдер
При наведенні курсору на стрілки навігації з'являється кругла мініатюра наступного слайда.
6. Симпатичний jQuery слайдер «Presentation Cycle»
jQuery слайдер з індикатором завантаження зображень. Передбачено автоматичну зміну слайдів.
7. jQuery плагін «Parallax Slider»
Слайдер із об'ємним фоновим ефектом. Родзинка цього слайдера рухається фону, який складається з декількох шарів, кожен з яких прокручується з різною швидкістю. У результаті виходить імітація об'ємного ефекту. Виглядає дуже красиво, ви можете самі переконатися в цьому. Більш плавно ефект відображається в таких браузерах як Opera, Google Chrome, IE.
8. Свіжий, легкий jQuery слайдер "bxSlider 3.0"
На демонстраційній сторінці у розділі «examples» ви зможете знайти посилання на все можливі варіантивикористання цього плагіна.
9. jQuery слайдер зображень, плагін "slideJS"
Стильний jQuery слайдер, безумовно, зможе прикрасити ваш проект.
10. jQuery плагін слайд-шоу "Easy Slides" v1.1
Простий у використанні JQuery плагінстворення слайд-шоу.
11. Плагін «jQuery Slidy»
Легкий jQuery плагін у різному виконанні. Передбачено автоматичну зміну слайдів.
12. jQuery CSS галерея з автоматичною зміною слайдів
Якщо відвідувач протягом певного часу не натисне на стрілки Вперед або Назад, то галерея почне прокручуватися автоматично.
13. jQuery слайдер "Nivo Slider"
Дуже професійний якісний легкий плагін із валідним кодом. Передбачено багато різноманітних ефектів зміни слайдів.
14. jQuery слайдер "MobilySlider"
Свіжий слайдер. jQuery слайдер з різними ефектами зміни зображень.
15. jQuery Плагін «Slider²»
Легкий слайдер із автоматичною зміною слайдів.
16. Свіжий javascript слайдер
Слайдер із автоматичною зміною зображень.
Плагін для реалізації слайд-шоу із автоматичною зміною слайдів. Можна керувати показом за допомогою мініатюр зображень.
jQuery CSS слайдер зображень за допомогою плагіна NivoSlider .
19. jQuery слайдер «jShowOff»
Плагін для ротації вмісту. Три варіанти використання: без навігації (з автоматичною зміною у форматі слайд-шоу), з навігацією у вигляді кнопок, з навігацією у вигляді мініатюр зображень.
20. Плагін "Shutter Effect Portfolio"
Свіжий jQuery плагін для оформлення портфоліо фотографа. У галереї реалізовано цікавий ефектзміни зображень. Фотографії змінюють одна одну з ефектом, схожим на роботу затвора об'єктива.
21. Легкий javascript CSS слайдер "TinySlider 2"
Реалізація слайдера зображень за допомогою javascript і CSS.
22. Неймовірний слайдер «Tinycircleslider»
Стильний круглий слайдер. Перехід між зображеннями здійснюється за допомогою перетягування по колу повзунка у вигляді червоного кола. Відмінно впишеться у ваш сайт, якщо ви використовуєте в дизайні круглі елементи.
23. Слайдер зображень на jQuery
Легкий слайдер "Slider Kit". Слайдер представлений у різному виконанні: вертикальний та горизонтальний. Також реалізовані різні види навігації між зображеннями: за допомогою кнопок «Вперед» та «Назад», за допомогою колеса миші, за допомогою кліка миші за слайдом.
24. Галерея з мініатюрами "Slider Kit"
Галерея "Slider Kit". Прокрутка мініатюр здійснюється як у вертикальному, так і горизонтальному напрямку. Перехід між зображеннями здійснюється за допомогою: колеса миші, натискання миші або наведення курсору на мініатюру.
25. jQuery слайдер вмісту "Slider Kit"
Вертикальний та горизонтальний слайдер контенту на jQuery.
26. jQuery слайд-шоу "Slider Kit"
Слайд-шоу із автоматичною зміною слайдів.
27. Легкий професійний javascript CSS3 слайдер
Акуратний слайдер на jQuery та CSS3, створений у 2011 році.
jQuery слайд-шоу із мініатюрами.
29. Просте jQuery слайд-шоу
Слайд-шоу з навігаційними кнопками.
30. Неймовірне слайд-шоу jQuery «Skitter»
jQuery плагін "Skitter" для створення приголомшливого слайд-шоу. Плагін підтримує 22 (!) види анімаційних ефектів при зміні зображень. Може працювати з двома варіантами навігації за слайдами: за допомогою номерів слайдів та за допомогою мініатюр. Обов'язково подивіться демонстрацію, дуже якісна знахідка. Технології, що використовуються: CSS, HTML, jQuery, PHP.
31. Слайд-шоу "Awkward"
Функціональне слайд-шоу. У вигляді слайдів можуть виступати: прості зображення, зображення з підписами, зображення з підказками, відео-ролики. Для навігації можна використовувати стрілки, посилання на номери слайдів та клавіші праворуч/ліворуч на клавіатурі. Слайд-шоу виконано у кількох варіантах: з мініатюрами та без них. Для перегляду всіх варіантів пройдіть посилання Demo #1 - Demo #6 розташованим зверху на демонстраційній сторінці.
Дуже оригінальне оформлення слайдера зображень, що нагадує віяло. Анімована зміна слайдів. Навігація між зображеннями здійснюється за допомогою стрілок. Передбачено також автоматичну зміну, яку можна вмикати та вимикати за допомогою кнопки Play/Pause, розташованої зверху.
Анімований jQuery слайдер. Фонові зображенняавтоматично масштабуються під час зміни розмірів вікна браузера. Для кожного зображення випливає блок із описом.
34. "Flux Slider" слайдер на jQuery та CSS3
Новий jQuery слайдер. Декілька класних анімованих ефектів при зміні слайдів.
35. jQuery плагін «jSwitch»
Анімована галерея jQuery.
Легке слайд-шоу на jQuery з автоматичною зміною слайдів.
37. Нова версія плагіна "SlideDeck 1.2.2"
Професійний слайдер контенту. Можливі варіанти з автоматичною зміною слайдо, а також варіант із використанням колеса миші для переходу між слайдами.
38. jQuery слайдер «Sudo Slider»
Легкий сладер зображення на jQuery. Багато варіантів реалізації: горизонтальна і вертикальна зміна зображень, з посиланнями на номер слайда і без них, з підписами зображень і без, різні ефекти зміни зображень. Є функція автоматичної змінислайдів. Посилання на всі приклади реалізації можна знайти на сторінці демонстрації .
39. jQuery CSS3 слайд-шоу
Слайд-шоу із мініатюрами підтримує режим автоматичної зміни слайдів.
40. jQuery слайдер "Flux Slider"
Слайдер із безліччю ефектів зміни зображень.
41. Простий jQuery слайдер
Стильний слайдер зображення на jQuery.
Потрібно додати кнопки "вперед" та "назад".
Для цього потрібно доповнити написаний код раніше.
HTML код для нового слайдера
Уся структура слайдера залишиться незмінною. До розмітки додадуться два контейнери, які виконуватимуть функцію кнопок.
Стилі слайдера
Кнопки займуть своє місце завдяки абсолютному позиціонуванню щодо контейнера.
Slider-box (position: relative; width: 320px; height: 210px; overflow: hidden;) .slider(position: relative; width: 10000px; height: 210px;) .prev , .slider-box .next( position : absolute ; top : 100px ; display : block ; width : 29px ; height : 29px ; cursor : pointer ; ). ../images/slider_controls.png ) no-repeat 0 0 ; ) .slider-box .next( right : 10px ; background : url (../images/slider_controls.png ) no-repeat -29px 0 ; )
Скрипт
Слайдер автоматично прокручується. За замовчуванням рух йде ліворуч, але при необхідності можна змінити напрямок його руху за допомогою змінної course. При зміні значення змінної з 1 на -1 відбудеться зміна напрямку руху слайдера.
Зображення в слайдері не повинні змінюватися, коли курсор знаходиться в межах слайдера. Навіщо це робиться? Все просто. Якщо курсор миші розташований на слайдері, то відвідувач сайту зацікавився його вмістом. У цей час не варто змінювати слайди автоматично.
$(function () ( var slider = $(".slider" ) , sliderContent = slider.html () , // Вміст слайдера slideWidth = $(".slider-box" ) .outerWidth () , // Ширина слайдера slideCount = $(".slider img" ) .length , // Кількість слайдів prev = $(".slider-box .prev" ) , // Кнопка "назад" next = $(".slider-box .next" ) , // Кнопка "вперед" sliderInterval = 3300 , // Інтервал зміни слайдів animateTime = 1000, // Час зміни слайдів course = 1, // Напрямок руху слайдера (1 або -1) margin = - slideWidth; // Початкове усунення слайдів$(".slider img:last" ) .clone () .prependTo (".slider" ) ; // Копія останнього слайду міститься на початок.$(".slider img" ) .eq (1 ) .clone () .appendTo (".slider" ) ; // Копія першого слайду міститься наприкінці.$(".slider" ) .css ("margin-left" - slideWidth) ; // Контейнер.slider зсувається ліворуч на ширину одного слайду. function nextSlide() ( // Запускається функція animation(), що виконує зміну слайдів. interval = window.setInterval (animate, sliderInterval) ; ) function animate() ( if (margin==- slideCount* slideWidth- slideWidth) ( // Якщо слайдер дійшов до кінця slider.css (( "marginLeft" :- slideWidth) ) ; // то блок.slider повертається у початкове положення margin = - slideWidth * 2; ) else if (margin== 0 && course==- 1 ) ( // Якщо слайдер знаходиться на початку та натиснута кнопка "назад" slider.css (( "marginLeft" :- slideWidth* slideCount) ) ; // блок.slider переміщається в кінцеве положення margin=- slideWidth* slideCount+ slideWidth; ) else ( // Якщо умови вищі не спрацювали, margin = margin - slideWidth * (course); // значення margin встановлюється для показу наступного слайду) slider.animate (("marginLeft": margin), animateTime); // Блок.слiдер зміщується вліво на 1 слайд.) function sliderStop() ( // Функція, що зупиняє роботу слайдера window.clearInterval (interval) ; ) prev.click (function () ( // Натиснута кнопка "назад" var course2 = course; course = - 1; animate(); // Виклик функції animate() course = course2; )); next.click (function () ( // Натиснута кнопка "назад" if (slider.is (":animated" ) ) ( return false ; ) // Якщо не відбувається анімація var course2 = course; // Тимчасова змінна для зберігання значення course course = 1; // Встановлюється напрямок слайдера праворуч наліво animate(); // Виклик функції animate() course = course2; // Змінна course набуває первісного значення)); slider.add (next) .add (prev) .hover (function () ( // Якщо курсор миші в межах слайдера sliderStop() ; // Викликається функція sliderStop() для припинення роботи слайдера), nextSlide); // Коли курсор виходить зі слайдера, анімація відновлюється. nextSlide() ; // Виклик функції nextSlide() } ) ;Вийшов такий слайдер з кнопками "вперед" та "назад"
В даний час слайдер - карусель - функціонал, який просто необхідно мати на сайті для бізнесу, на сайті - портфоліо або будь-якому іншому ресурсі. Поряд із повноекранними слайдерами зображення, горизонтальні слайдери – каруселі добре вписуються у будь-який веб-дизайн.
Іноді слайдер повинен займати третину сторінки сайту. Тут слайдер - карусель використовується з ефектами переходів та адаптивними макетами. Сайти електронної комерції використовують слайдер – карусель для демонстрації величезної кількості фото в окремих публікаціях або сторінках. Код слайдера можна вільно використовувати та змінювати його відповідно до потреб.
Використовуючи 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 варіантами налаштувань і демонструє свої функції з різними ефектами переходів.
приклади | завантажити
jCarousel
jCarousel - jQuery плагін, який допоможе організувати перегляд ваших зображень. Ви зможете з легкістю створювати користувацькі каруселі зображень з основи, який показаний у прикладі. Слайдер адаптивний та оптимізований для роботи на мобільних платформах.
приклади | завантажити
Scrollbox - jQuery плагін
Scrollbox компактний плагін для створення слайдера – каруселі або текстового рядка, що біжить. Основні функції включають ефект вертикальної і горизонтальної прокрутки з паузою при наведенні курсору миші.
приклади | завантажити
dbpasCarousel
Простий слайдер – карусель. Якщо вам потрібен швидкий плагін – це підійде на 100%. Постачається лише з основними функціями, необхідними для роботи слайдера.
приклади | завантажити
Flexisel: адаптивний JQuery плагін слайдера – каруселі
Творці Flexisel надихнулися плагіном старої школи jCarousel, зробивши його копію, орієнтовану на коректну роботу слайдера на мобільних та планшетних пристроях.
Адаптивний макет Flexisel при роботі на мобільних пристроях відрізняється від макета, орієнтованого на розмір вікна браузера. Flexisel відмінно адаптований до роботи на екранах, як з низькою, так і високою роздільною здатністю.
приклади | завантажити
Elastislide – адаптивний слайдер – карусель
Elastislide відмінно адаптується до розміру екрана пристрою. Ви можете встановити мінімальну кількість відображених зображень за певної роздільної здатності. Добре працює як слайдер – каруселі з галерей зображень, використовуючи фіксовану обгортку спільно з ефектом вертикального прокручування.
приклад | завантажити
FlexSlider 2
Вільний слайдер від Woothemes . По праву вважається одним із найкращих адаптивних слайдерів. Плагін містить кілька шаблонів і буде корисний як користувачам-початківцям, так і експертам.
приклад | завантажити
Amazing Carousel
Amazing Carousel – адаптивний слайдер зображень на jQuery. Підтримує безліч систем управління сайтами, такі як WordPress, Drupal та Joomla. Також підтримує Android та IOS та настільні варіанти операційних систем без будь-яких проблем із сумісністю. Вбудовані шаблони amazing carousel дозволяють використовувати слайдер у вертикальному, горизонтальному та круговому режимах.
приклади | завантажити