Час не стоїть на місці, а з ним і прогрес. Це торкнулося і просторів інтернету. Вже можна побачити як змінюється зовнішній виглядсайтів, особливо великою популярністю користується адаптивний дизайн. І у зв'язку з цим з'явилося чимало нових адаптивних jquery слайдерів, галереї, каруселі або подібні плагіни.
1. Responsive Horizontal Posts Slider

Адаптивна горизонтальна карусель з детальною інструкцієюіз встановлення. Виконана вона у простому стилі, але ви можете її стилізувати під себе.

2. Слайдер на Glide.js

Цей слайдер підходить для будь-якого сайту. Тут використовується Glide.js із відкритим кодом. Кольори слайдера можна легко змінити.

3. Tilted Content Slideshow

Адаптивний слайдер із контентом. Родзинкою цього слайдера є 3d ефект зображень, а також різні анімації появи у випадковому порядку.

4. Слайдер з використанням HTML5 canvas

Дуже красивий та вражаючий слайдер з інтерактивними частинками. Виконаний він за допомогою HTML5 canvas,

5. Слайдер «Морфінг зображень»

Слайдер з ефектом морфінгу (плавна трансформація з одного об'єкта до іншого). У цьому прикладі слайдер добре підійде для портфоліо веб-розробника або веб-студії у вигляді портфоліо.

6. Круговий слайдер

Слайдер у вигляді кола із ефектом перевороту зображення.

7. Слайдер із розмитим фоном

Адаптивний слайдер з перемиканням та розмиттям заднього фону.

8. Адаптивний фешн слайдер

Простий, легкий та адаптивний слайдер для сайту.

9. Slicebox - jQuery 3D image slider(ОНОВЛЕНИЙ)

Оновлена ​​версія Slicebox slider із виправленнями та новими можливостями.

10.Free Animated Responsive Image Grid

Плагін JQuery для створення гнучкої сітки зображення, який перемикатиме знімки, використовуючи різні анімації та таймінги. Це може добре виглядати як фон або декоративний елемент на сайті, оскільки ми можемо налаштувати вибіркову появу нових зображень та їх переходів. Плагін виконаний у кількох варіантах.

11. Flexslider

Універсальний безкоштовний плагін для вашого сайту. Цей плагін виконаний у кількох варіантах слайдера та каруселях.

12. Фоторама

Fotorama- Це універсальний плагін. У нього багато налаштувань, все працює швидко і легко, є можливість перегляду слайдів на весь екран. Слайдер можна використовувати як у фіксованому розмірі так і адаптивному, з мініатюрами та без, з круговою прокруткою та без та ще багато чого.

P.S.Ставив слайдер кілька разів і вважаю що він один із найкращих

13. Безкоштовна та адаптивна 3D галерея-слайдер з мініатюрами.

Експериментальна галерея-слайдер 3DPanelLayoutз сіткою та цікавими ефектамианімації.

14. Слайдер на CSS3

Адаптивний слайдер виконаний за допомогою css3 з плавною появою контенту та легкою анімацією.

15. WOW Slider

WOW Slider- це слайдер зображень із приголомшливими візуальними ефектами.

17. Elastic

Еластичний слайдер з повною адаптивністю та мініатюрами слайдів.

18. Slit

Це повноекранний адаптивний слайдер із використанням анімації css3. Виконано слайдер у двох варіантах. анімація зроблена досить незвичайно і красиво.

19. Адаптивна фотогалерея plus

Простий безкоштовний слайдер-галерея із підвантаженням зображень.

20. Адаптивний слайдер для WordPress

Адаптивний слайдер для WP.

21. Parallax Content Slider

Слайдер з ефектом паралаксу та контролем кожного елемента з допомогою CSS 3.

22. Слайдер із прив'язкою музики

Слайдер із використанням відкритого вихідного коду JPlayer. Цей слайдер нагадує презентацію з музикою.

23. Слайдер із jmpress.js

Адаптивний слайдер ґрунтується на jmpress.js і тому дозволить використовувати деякі цікаві 3D ефекти до слайдів.

24. Fast Hover Slideshow

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

25. Image Accordion with CSS3

Акордеон зображень за допомогою css3.

26. A Touch Optimized Gallery Plugin

Це адаптивна галереяяка оптимізована для тач-пристроїв.

27. 3D Галерея

3D Wall Gallery- створена для браузера Safari, де буде видно 3D-ефект. Якщо дивитися на іншому браузері, то функціональність буде в порядку, але не буде видно 3D ефект.

28. Слайдер із пагінацією

Адаптивний слайдер із нумерацією сторінок за допомогою повзунка JQuery UI. ідея полягає в тому, щоб використовувати просту концепцію навігації. Є можливість перемотування всіх зображень або перемикання послайдів.

29.Image Montage with jQuery

Автоматичне розташування зображень залежить від ширини екрана. Дуже корисна річ при розробці сайту портфоліо.

30. 3D Gallery

Прості 3D круговий слайдер на css3 і jQuery.

31. Повноекранний режимз 3D ефектом на css3 та jQuery

Слайдер із можливістю повно-екранного перегляду зображень із гарним переходом.

Collection of free HTML та CSS slider code examples: card, comparison, fullscreen, responsive, simple, etc. Update of June 2018 колекції. 7 нових елементів.

Table of Contents

Related Articles

About the code

Set of onboarding screens in HTML/CSS/JS. Personal experiment with layering PNG icons, CSS3 transitions, & flexbox.

HTML, CSS та JavaScript інформаційна картка slider.
Made by Andy Tran
November 23, 2015

Photo slider працює на робочому столі та мобільних браузеров.
Made by Taron
September 29, 2014

Comparison (Before/After) Sliders

About the code

Силовий і чистий зображення comparison slider, fully responsive and touch ready made with CSS and jQuery.

About the code

Попереду і після шпигуна з тільки html і css.

About the code

Грати разом з новою ідеєю, використовуючи мою два літери перед/зображення знімка. Keeping it minimal. Keeping it vanilla. Like it if it"s useful:)

Vanilla JS, minimal, nice to look.
Made by Huw
July 3, 2017

About the code

A "split-screen" slider element with JavaScript.

Малий experiment for before & after slider all inside a SVG. Masking makes it pretty simple. Since it's all SVG, зображення і дзвінки штрих nicely together. GreenSock's Draggable and ThrowProps plugins були використані для контролера.
Made by Craig Roblewsky
April 17, 2017

Використовується customised range input for slider.
Made by Dudley Storey
October 14, 2016

Responsive image comparison slider with HTML, CSS and JavaScript.
Made by Ege Görgülü
August 3, 2016

HTML5, CSS3 та JavaScript відео до comparison slider.
Made by Dudley Storey
April 24, 2016

Добре draggable slider до quickly compare 2 images, powered by CSS3 and jQuery.
Made by CodyHouse
September 15, 2014

Fullscreen Sliders

About the code

Simple slider базується на radio inputs. 100% pure HTML + CSS. Works also with arrow keys.

Responsive: yes

Dependencies: -

About the code

Nice transition ефект для fullscreen slider.

About the code

Horizontal parallax sliding slider with Swiper.js.

About the code

Responsive smooth 3D perspective slider on mouse move.

Fullscreen hero image slider (свійні аркуші теми) з HTML, CSS і JavaScript.
Made by Tobias Bogliolo
June 25, 2017

Використовуйте лінію взаємини, що використовує Velocity and Velocity effects (UI Pack) для збільшення animation. Animation is triggered via arrow keys, nav click, або scrolling jack. Ця версія включає межі як частина з interaction.
Made by Stephen Scaff
May 11, 2017

Simple slider в minimal style до show off images. Частина зображення зображень на одному з них.
Made by Nathan Taylor
January 22, 2017

The thing is pretty easy customizable. Ви можете безпечно змінити font, font size, font color, animation speed. The first Letter of new string in array in JS will appear on a new slide. Easy to create (or delete) a new slide: 1. Add new city in the array in JS. 2. Зміна номера знімків variable і put aw image in scss list in CSS.
Made by Ruslan Pivovarov
October 8, 2016

1. Clip-path for image masking rectangle border (webkit only).
2. Blend-mode for this mask.
3. Smart color system, just put your color name and value in sass map and then add property class with this color name to elements and everything will work!
4. Cool credits side-menu (click small button in the center of demo).
5. Vanilla js with just< 200 lines of code (basically it’s just adds/removes classes).

Made by Nikolay Talanov
October 7, 2016

Це сквоєний шпилька з скручуванням, що базується на чистому JS і CSS (без libraries).
Made by Victor Belozyorov
September 3, 2016

Slider animation with Pokemon design.
Made by Pham Mikun
August 18, 2016

HTML, CSS і JavaScritp slider with complex animation and half-colored angled text.
Made by Ruslan Pivovarov
July 13, 2016

Slider parallax effect with HTML, CSS and JavaScript.
Made by Manuel Madeira
June 28, 2016

HTML, CSS та JavaScript slider with ripple effect.
Made by Pedro Castro
May 21, 2016

Clip-Path revealing slider with HTML, CSS and JavaScript.
Made by Nikolay Talanov
May 16, 2016

GSAP + Slick slider with preview of previous/next slides.
Made by Karlo Videk
April 27, 2016

HTML, CSS та JavaScript full page slider.
Made by Joseph Martucci
February 28, 2016

Full slider prototype with HTML, CSS and JavaScript.
Made by Gluber Sampaio
January 6, 2016

A fullscreen, sort responsive, slideshow animated with Greensocks TweenLite/Tweenmax.
Made by Arden
December 12, 2015

Made by Arden
December 5, 2015

Full-Screen slider (GSAP Timeline) #1 з HTML, CSS та JavaScript.
Made by Diaco M.Lotfollahi
November 23, 2015

HTML та CSS slider with custom effects.
Made by Nikolay Talanov
November 12, 2015

Fullscreen drag-slider with parallax with HTML, CSS and JavaScript.
Made by Nikolay Talanov
November 12, 2015

Proof of concept rotating slider. За допомогою clip-path and lots of math.
Made by Tyler Johnson
April 16, 2015

A simple fullscreen CSS & jQuery slider використовуючи translateX and translate3d smoothness!
Made by Joseph
August 19, 2014

Responsive Sliders

About the code

Images Opacity Slider

Images opacity slider in HTML і CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Stacked Flexible Slides Layout

Ці приклади показують, як створити список зразків, що вилучаються на всіх інших (особливо можливих для зйомки в/в період). Це "використовується без надання їх глибокого і глибокого становища: абсолютно; якщо вони є повністю flexible і приємно, щоб потрапити в звичайну page flow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Responsive Slider

Animated responsive slider в HTML, CSS і JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: animate.css

About the code

Slider With Masked Text

CSS є тільки слайдером з маскованим текстом.

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Image and content with parallax effect.

About the code

CSS тільки slide gallery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Pure HTML/CSS Slider

Pure HTML/CSS slider with circular SVG progress bar.

Compatible browsers: Chrome, Edge (partial), Firefox (partial), Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

About the code

Досліджує, щоб створити повно відповідний vertical slider with thumbnails using only CSS, and retaining aspect ratio of the images.

About the code

A simple Flexbox image slider/carousel made with vanilla JavaScript.

About the code

Це experiment that simulates a motion blur effect every time a slide is switched. Це так багато SVG Gaussian Blur filter і деякі CSS keyframes animation. Більшість ефектів не потребує будь-якого Javascript для роботи в цілому, в цьому прикладі Javascript є тільки використаним для функціонерів.

About the code

Cool animates slider with JS.

About the code

Це є experiment on how SVG patterns can help us create masked-like images for CSS-only image slider.

Exploring деякі slider transitions. Swiper slider with parallax option enabled. Playing with CSS filters найбільше тут.
Made by Mirko Zorić
June 12, 2017

Simple GSAP slider with some subtle tween animations.
Made by Goran Vrban
June 9, 2017

Slider UI with HTML, CSS та JavaScript.
Made by Mergim Ujkani
June 6, 2017

Slider GSAP 2.
Made by Em An
May 4, 2017

A little slicey transition slider using a simple add class deal. Вони мають глибокий від сприймання битви і вирішують на кращому пристрої для мобільного (just stack, ad to touch events, make images full viewport, etc.) щоб зробити зображення зображення viewport в їхній невідомий штат, який є kinda cool як добре.
Made by Stephen Scaff
January 3, 2017

Leveraged CSS border-image & clip-path для створення сміття animation effect.
Made by Emily Hayman
December 31, 2016

Little slider built with flexbox. Деякийвідповідний, і може бути fixed elements довкола slider area.
Made by Robert
November 28, 2016

HTML, CSS canvas slider.
Made by Nvagelis
October 29, 2016

HTML, CSS та JavaScript 3D smooth slider.
Made by Eduardo Allegrini
October 19, 2016

HTML та CSS cupcake slider with sprinkles!
Made by Jamie Coulter
October 14, 2016

Made by mario s maselli
October 12, 2016

Exploring UI animation #2 with HTML, CSS and JavaScript.
Made by mario s maselli
September 22, 2016

Exploring UI animation #3 with HTML, CSS and JavaScript.
Made by mario s maselli
September 22, 2016

Ecommerce Slider v2.0 з HTML, CSS і JavaScript.
Made by Pedro Castro
September 17, 2016

HTML, CSS та JavaScript clean slider with curved background.
Made by Ruslan Pivovarov
September 13, 2016

Exploring UI animation #1 with HTML, CSS and JavaScript.
Made by mario s maselli
September 8, 2016

Насолоджуйтесь Power CSS: Up & down each middle image and paginated slider with lightbox.
Made by Kseso
August 15, 2016

Double exposure is photographic technique that combines 2 different images in single image.
Made by Misaki Nakano
August 3, 2016

Slider using CSS3 property clip.
Made by Pedro Castro
May 1, 2016

Responsive CSS slider.
Made by geekwen
April 19, 2016

Це є simple slider experiment displaying words with beautiful meanings which cannot be directly translated. Фокус: elegant typography і simple yet alluring transitions.
Made by Joe Harry
April 5, 2016

Анімація ідея є зміною значення CSS кліп path, тому що роблячи ефект.
Made by Bhakti Al Akbar
March 31, 2016

Dot slider with HTML, CSS та JavaScript.
Made by Derek Nguyen
March 16, 2016

Prism effect slider with HTML, CSS and JavaScript.
Made by victor
March 12, 2016

Sliding background gallery with HTML, CSS and JavaScript.
Made by Ron Gierlach
November 30, 2015

HTML, CSS та JavaScript slider solution.
Made by Jürgen Genser
September 30, 2015

A product slider powered by Sequence.js. Sequence.js - The responsive CSS animation framework для створення unique sliders, presentations, banners, і інші Step-based applications.
Made by Ian Lunn
September 15, 2015

Tiny circle customized slider.
Made by Bram de Haan
August 11, 2015

Responsive GTA V slider with HTML, CSS та JavaScript.
Made by Eduard Mayer
January 24, 2014

It's like a slider but it rotates cubeishly for reasons unknown.
Made by Eric Brewer
December 4, 2013

Made by Hugo DarbyBrown
August 28, 2013

Simple Sliders

Image overlay slider with HTML, CSS and vanilla JavaScript.
Made by Yugam
June 7, 2017

HTML і CSS featured image slider.
Made by Joshua Hibbert
June 16, 2016

Multi Axis Image Slider

Multi axis image slider with HTML, CSS та JavaScript.
Made by Burak Can
July 22, 2013

Cube slider, мало experiment with HTML5/CSS3 3d transforms.
Made by Ilya K.
June 26, 2013

Якщо вам потрібно додати на свій сайт якісний JQuery-слайдер зображень, то в цій статті ви знайдете опис потрібних плагінів. Незважаючи на те, що JQuery суттєво спростив роботу з JavaScript, ми, як і раніше, потребуємо плагінів, щоб прискорити процес створення веб-дизайну.

Ми можемо вносити зміни до деяких з цих плагінів та створювати нові слайдери, які набагато більше відповідають завданням нашого сайту.

Для інших слайдерів досить просто додати заголовки, зображення та вибрати ефекти для зміни слайдів, які постачаються разом із слайдером. Всі ці плагіни супроводжуються докладною документацією, так що додати до них нові ефекти або функції не складе великої праці. Ви навіть можете змінити тригери, які залежать від подій, якщо ви є досвідченим програмістом JQuery .

Останні тенденції, такі як адаптивний дизайн, дуже важливі для веб-проектів, незалежно від того, чи ви реалізуєте плагін або скрипт. Всі ці елементи роблять кожен із цих плагінів дуже гнучкими. Все, що вийшло у 2014 році, включено до цього списку.

JQuery-слайдери зображень

Jssor Responsive Slider

Нещодавно я натрапила на цей функціональний JQuery-слайдер, і змогла на власні очі переконатися, що він справляється зі своєю роботою дуже добре. Він містить безмежні можливості, які можна розширити за рахунок відкритого вихідного коду слайдера:

• Адаптивний дизайн;
• Більше 15 параметрів налаштування;
• Більше 15 ефектів зміни зображення;
• Галерея зображень, каруселі, підтримка повноекранного розміру;
• Вертикальний ротатор банерів; список слайдів;
• Підтримка відео.

Демо | завантажити

PgwSlider - адаптивний слайдер на основі JQuery / Zepto

Єдиним завданням цього плагіна є демонстрація слайдів зображень. Він дуже компактний, тому що розмір JQuery-файлів складає всього 2,5 КБ, що дозволяє підвантажувати його дійсно швидко.

• Адаптивний макет;
• SEO-оптимізація;
• Підтримка різними браузерами;
• Прості переходи зображень;
• Розмір архіву лише 2,5 КБ.

Демо | завантажити

Jquery Vertical News Slider

Гнучкий і корисний JQuery -слайдер, призначений для ресурсів новин з переліком публікацій з лівого боку і виведенням зображення праворуч:

• Адаптивний дизайн;
• Вертикальна колонка перемикання новин;
• Розширені заголовки.

Демо | завантажити

Wallop Slider

Цей слайдер не містить JQuery , але я хотів би представити його, тому що він дуже компактний і дозволяє значно зменшити час завантаження сторінок. Дайте мені знати, якщо він вам сподобається:

• Адаптивний макет;
• Простий дизайн;
• Різні варіанти зміни слайдів;
• Мінімальний код JavaScript;
• Розмір всього 3КБ.

Демо | завантажити

Flat-style Polaroid gallery

Галерея у стилі розкиданих на столі документів із гнучким макетом та гарним дизайном має зацікавити багатьох із вас. Більше підходить для планшетів та великих дисплеїв:

• Адаптивний слайдер;
• Плоский дизайн;
• Випадкова зміна слайдів;
• Повний доступ до вихідного коду.

Демо | завантажити

A-Slider

Демо | завантажити

HiSlider – HTML5, jQuery та WordPress слайдер зображень

HiSlider представив новий безкоштовний плагін JQuery-слайдера, за допомогою якого можна створювати різноманітні галереї зображень із фантастичним переходами:

• Адаптивний слайдер;
• Не потребує знання програмування;
• Декілька дивовижних шаблонів і скінів;
• Гарні ефекти переходів;
• Підтримка різних платформ;
• Сумісність із WordPress, Joomla, Drupal;
• Можливість відображення контенту різних типів: зображень, відео YouTubeта відео Vimeo;
• Гнучка настройка;
• корисні додаткові функції;
• Необмежений обсяг контенту, що відображається.

Демо |

Wow Slider

WOW Slider – це адаптивний JQuery-слайдер зображень із дивовижними візуальними ефектами ( доміно, поворот, розмиття, переворот і спалах, виліт, жалюзі) та професійними шаблонами.

WOW Slider поставляється разом із майстром установки, що дозволяє створювати фантастичні слайдери за лічені секунди без необхідності розбиратися в коді та редагувати зображення. Також доступні для скачування версії плагіна під Joomla та WordPress:

• Повністю адаптивний;
• Підтримка всіх браузерів та всіх типів пристроїв;
• Підтримка сенсорних пристроїв;
• Проста установка на WordPress;
• Гнучкість у налаштуванні;
• SEO -оптимізований.

Демо |

Nivo Slider – безкоштовний jQuery-плагін

Nivo Slider відомий усьому світу як найкрасивіший і найпростіший у використанні слайдер зображень. Плагін Nivo Slider є безкоштовним і випускається за ліцензією MIT:

• Потрібний JQuery 1.7 і вище;
• Прекрасні ефекти переходу;
• Простий та гнучкий у налаштуванні;
• Компактний та адаптивний;
• відкритий код;
• Потужний та простий;
• Декілька різних шаблонів;
• Автоматичне обрізання зображення.

Демо |

Простий JQuery слайдер із технічною документацією

Ідея була навіяна слайдерами від Apple, у яких кілька маленьких елементів можуть вилітати з різними ефектами анімації. Розробники спробували втілити цю концепцію з урахуванням мінімальних вимог для створення простого дизайну інтернет-магазину, в якому елементи, що «вилітають», є різними категоріями:

• Адаптивний макет;
• Мінімалістичний дизайн;
• Різні ефекти випадання та зміни слайдів.

Демо |

Повнорозмірний JQuery-слайдер зображень

Дуже простий слайдер, що займає 100% ширини сторінки та підлаштовується під розміри екранів мобільних пристроїв. Він працює з CSS переходами, а зображення «укладаються» разом із анкорами. Анкор може бути замінений або видалений, якщо ви не хочете прив'язувати до зображення посилання.

У разі встановлення слайдер розгортається на 100% ширини екрана. Також він може автоматично зменшувати розмір зображень слайдів:

• Адаптивний JQuery-слайдер;
• Повнорозмірний;
• Мінімалістичний дизайн.

Демо |

Elastic Content Slider + посібник

Elastic Content Slider автоматично регулює ширину та висоту залежно від розмірів батьківського елемента. Це простий JQuery-слайдер. Він складається із слайд-зони вгорі, і панелі навігаційних вкладок у нижній частині. Слайдер підлаштовує свою ширину та висоту відповідно до розмірів батьківського контейнера.

При перегляді на маленьких по діагоналі екранах вкладки навігації перетворюються на маленькі іконки:

• Адаптивний дизайн;
• Прокручування кліком миші.

Демо |

Free 3D Stack Slider

Експериментальний слайдер, що перегортає зображення в 3D. Два стеки нагадують стоси паперу, з яких при прогортанні зображення виводяться в центр слайдера:

• Адаптивний дизайн;
• Flip-перехід;
• 3D-ефекти.

Демо |

Fullscreen Slit Slider на основі JQuery та CSS3 + посібник

З посібника ви дізнаєтеся, як створити слайдер із родзинкою: ідея полягає в тому, щоб «розрізати» і вивести в такому вигляді поточний слайд, в той час, коли ви відкриваєте наступне або попереднє зображення. Використовуючи JQuery та CSS-анімацію, ми можемо створювати унікальні ефекти переходів:

• Адаптивний дизайн;
• Спліт-перехід;
• Повноекранний слайдер.

Демо |

Unislider – дуже маленький JQuery-слайдер

Жодних непотрібних наворотів та розмітки, розмір менше 3КБ. Використовуйте будь-який HTML-код для своїх слайдів, розширюйте його за допомогою CSS. Все, що пов'язано з Unslider, розміщується на GitHub:

• Підтримка різними браузерами;
• Підтримка клавіатури;
• Регулювання за висотою;
• Адаптивний дизайн;
• Підтримка сенсорного введення.

Демо | завантажити

Minimal Responsive Slides

Простий та компактний плагін ( розмір всього 1 Кб), що створює адаптивний слайдер, використовуючи елементи всередині контейнера. ResponsiveSLides.js працює з великою кількістю браузерів, включаючи всі версії IE від IE6 та вище:

• Повністю адаптивний;
• Розмір 1 КБ;
• CSS3 переходи з можливістю запуску через JavaScript;
• Проста розмітка із використанням маркованого списку;
• Можливість налаштування ефектів переходів та тривалості перегляду одного слайду;
• Підтримує можливість створення кількох слайд-шоу;
• Автоматична та ручна прокручування.

Демо |

Camera – безкоштовний JQuery слайдер

Camera — плагін із безліччю ефектів переходів, адаптивним макетом. Простий у налаштуванні, підтримується мобільними пристроями:

• Повністю адаптивний дизайн;
• Підписи;
• Можливість додавання відео;
• 33 різних кольорів ікон.

Демо |

SlidesJS, адаптивний JQuery плагін

SlidesJS - це адаптивний плагін для JQuery (1.7.1 і вище) з підтримкою сенсорних пристроїв та CSS3-переходів. Поекспериментуйте з ним, спробуйте кілька готових прикладів, які допоможуть вам розібратися, як додати SlidesJS до свого проекту:

• Адаптивний дизайн;
• CSS3 -переходи;
• Підтримка сенсорних пристроїв;
• Простий у налаштуванні.

Демо | завантажити

BX Jquery Slider

Це безкоштовний адаптивний JQuery слайдер:

• Повністю адаптивний - підлаштовується під будь-який пристрій;
• Горизонтальна, вертикальна зміна слайдів;
• Слайди можуть містити зображення, відео або HTML-контент;
• Розширена підтримка сенсорних пристроїв;
• Використання CSS-переходів для слайд-анімації ( апаратне прискорення);
• API зворотних викликів та повністю публічні методи;
• Невеликий розмір файлу;
• Простий у реалізації.

Демо |

FlexSlider 2

Найкращий адаптивний слайдер. Нова версіябула доопрацьована з метою збільшення швидкості роботи, компактності.

Демо | завантажити

Galleria – адаптивна фотогалерея на основі JavaScript

Galleria використовується на мільйонах сайтів для створення галереї зображень у високій якості. Кількість позитивних відгуків про її роботу просто зашкалює:

• Повністю безкоштовний;
• Режим повноекранного перегляду;
• 100% адаптивний;
• Не потрібний досвід програмування;
• Підтримка iPhone, IPad та інших сенсорних пристроїв;
• Flickr, Vimeo, YouTube та багато іншого;
• Декілька тем.

Демо | завантажити

Blueberry – простий адаптивний JQuery-слайдер зображень

Я представляю вам JQuery-слайдер зображень, написаний спеціально для адаптивного веб-дизайну. Blueberry - це експериментальний плагін слайдера зображень з відкритим вихідним кодом, яка була написана спеціально для роботи з адаптивними шаблонами.

У цьому уроці ми зробимо чудовий слайдер CSS3. Він використовуватиме ефект загасання між слайдами. Додатково можна використовувати опис кожного зображення. Для організації інформації використовуватиметься невпорядкований список. Слайди будуть автоматично перемикатися за допомогою анімацій CSS3.

Розмітка HTML

Розмітка HTML дуже проста. У прикладі є чотири слайди. Кожен із них складається із зображення (як фон) та тексту опису в елементі div . Додаткові слайди просто вставити.

CSS

Для слайдера використовуються анімації CSS3 anim_slides та anim_titles . Перша застосовується окремих слайдів, друга - для тексту описи. Для опису також змінюється положення та прозорість.

/* Слайдер */ .slides ( height:300px; margin:50px auto; overflow:hidden; position:relative; width:900px; ) .slides ul ( list-style:none; position:relative; ) /* Кадри анімації # anim_slides */ @-webkit-keyframes anim_slides ( 0% ( opacity:0; ) 6% ( opacity:1; ) 24% ( opacity:1; ) 30% ( opacity:0; ) 100% ( opacity:0; ) ) @-moz-keyframes anim_slides ( 0% ( opacity:0; ) 6% ( opacity:1; ) 24% ( opacity:1; ) 30% ( opacity:0; ) 100% ( opacity:0; ) ) . slides ul li (opacity:0; position:absolute; top:0; /* анімація css3 */ -webkit-animation-name: anim_slides; -webkit-animation-duration: 24.0s; -webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; : forwards; -moz-animation-name: anim_slides; -moz-animation-duration: 24.0s; ration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; ) /* Затримки css3 */ .slides ul li:nth-child(2), .slides ul li:nth-child(2) div ( -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0 s; ) .slides ul li :nth-child(3) . slides ul li:nth-child(4), .slides ul li:nth-child(4) div ( -webkit-animation-delay: 18.0s; -moz-animation-delay: 18.0s; ) .slides ul li img ( display:block; ) /* Кадри анімації #anim_titles */ @-webkit-keyframes anim_titles ( 0% ( left:100%; opacity:0; ) 5% ( left:10%; opacity:1; ) 20% ( left:10%; opacity:1; ) 25% ( left:100%; opacity:0; ) 100% ( left:100%; opacity:0; ) ) @-moz-keyframes anim_titles ( 0% ( left:100 %; opacity:0; ) 5% ( left:10%; opacity:1; ) 20% ( left:10%; opacity:1; ) 25% ( left:100%; opacity:0; ) 100% ( left :100%; opacity:0; ) ) .slides ul li div ( background-color:#000000; border-radius:10px 10px 10px 10px; box-shadow:0 0 5px #FFFFFF inset; color:#FFF FFF; font-size:26px; left: 10%; margin:0 auto; padding:20px; position:absolute; top:50%; width:200px; /* Анімація css3 */ -webkit-animation-name: anim_titles; -webkit-animation-duration: 24.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: anim_titles; -moz-animation-duration: 24. 0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; )