Листопад 4, 2019 Запис була оновлена
Юрій Німець
Слайдери на чистому CSS + бонусний слайдер
Слайдери на CSS мають деяку перевагу перед слайдерами на Javascript. Одне з таких переваг - це швидкість завантаження. Мало того що зображення для слайдерів використовуються великих розмірів (якщо немає оптимізації під різні екрани), так ще й на завантаження скриптів витрачається деякий час. Але в статті Ви побачите тільки слайдери на чистому CSS.
Ось що я знайшов на сайті на тему слайдеров:
1. CSS3 слайдер зображень
Слайдер на CSS, який використовує для навігації по слайдах радиокнопки. Ці радиокнопки знаходяться під слайдеров. Також крім радіокнопок навігація здійснюється за допомогою стрілок ліворуч і праворуч. Щоб стежити за тим, яке зображення зараз відображати - використовуються псевдокласи: checked.
2. CSS3 слайдер зображень зі слайдами
На відміну від минулого слайдера на CSS, тут замість радіокнопок внизу розташовані мініатюри всіх зображень, що також буває зручно при створенні галереї зображень. Зображення змінюються зі своєрідним ефектом: плавно зникають при збільшенні.
3. Галерея на CSS
А ось цей слайдер на CSS відмінно підійде для продають сторінок. Як правило, багато веб-розробники при розробці Лендінзі (продають сторінок) розміщують слайдер на самому початку, щоб в першому екрані (без прокрутки) відвідувач відразу бачив все вигоди, які є для нього на цій сторінці. Крім усього, цей слайдер є адаптивним, що також радує.
4. Слайдер на CSS без посилань
Відразу хочу зауважити що цей слайдер не використовує посилань! За замовчуванням крім головного зображення (слайд) видно ще 2 слайди. Вони розташовані позаду основного. Зміна слайдів відбувається в красивому режимі: спочатку розсуваються два слайди і по центру стає той слайд, який потім стане головним. Потім слайд збільшується і поміщається попереду інших.
5. Адаптивний слайдер на CSS3
Ще один адаптивний слайдер, управління якого заснована на радіокнопку. Щоб подивитися як цей слайдер буде виглядати на різних пристроях - Ви можете або самостійно змінювати вікно браузера, або на сторінці зі слайдером є спеціальні іконки різних пристроїв, клікаючи на які, Ви побачите буде виглядати слайдер на комп'ютері, планшеті або на смартфоні.
*** бонусних СЛАЙДЕР ***
Крім всіх слайдерів, які представлені вище, я хочу порадувати Вас ще одним. Цей слайдер відмінно підійде для створення галереї зображень. Словами не поясниш те що він робить, тому краще дивіться все на відео:
висновок
За допомогою слайдерів можна красиво оформляти галереї зображень, розміщуючи їх більш компактно, вставити слайдер в перший екран (частина сторінки, яку видно без прокручування) продає сторінки, щоб відразу показати відвідувачеві головні вигоди, які він отримає. Можна ще знайти масу спосіб де і як можна застосувати слайдери, але одне зрозуміло точно - вони несуть користь при правильному використанні.
Пункти, які були розглянуті в статті.
C ollection of free HTML and CSS slider code examples: card, comparison, fullscreen, responsive, simple, Etc. Update of June 2018 collection. 7 new items.
Table of Contents
Related Articles
About the code
A set of onboarding screens in HTML / CSS / JS. A personal experiment with layering PNG icons, CSS3 transitions, & flexbox.
HTML, CSS and JavaScript information card slider.
Made by Andy Tran
November 23, 2015
Photo slider working on desktop and mobile browsers.
Made by Taron
September 29, 2014
Comparison (Before / After) Sliders
About the code
A simple and clean image comparison slider, fully responsive and touch ready made with CSS and jQuery.
About the code
A before and after slider with only html and css.
About the code
Playing around with a new idea using my two layer before / after image slider. 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.
A little experiment for a before & after slider all inside a SVG. Masking makes it pretty simple. Since it's all SVG, the images and captions scale nicely together. GreenSock's Draggable and ThrowProps plugins were used for the slider control.
Made by Craig Roblewsky
April 17 2017
Uses 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 and JavaScript video before-and-after comparison slider.
Made by Dudley Storey
April 24, 2016
A handy draggable slider to quickly compare 2 images, powered by CSS3 and jQuery.
Made by CodyHouse
September 15, 2014
Fullscreen Sliders
About the code
Simple slider based on radio inputs. 100% pure HTML + CSS. Works also with arrow keys.
Responsive: yes
Dependencies: -
About the code
Nice transition effect for 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 (swipe panels theme) with HTML, CSS and JavaScript.
Made by Tobias Bogliolo
June 25 2017
A slider interaction thing using Velocity and Velocity effects (UI Pack) to enhance the animation. Animation is triggered via arrow keys, nav click, or scrolling jack. This version includes borders as part of the interaction.
Made by Stephen Scaff
May 11 2017
Simple slider in a minimal style to show off images. Part of the image pops out on each slide.
Made by Nathan Taylor
Jannuary 22 2017
The thing is pretty easy customizable. You can safely change font, font size, font color, animation speed. The first letter of a 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. Change number of slides variable and put a new image in scss list in CSS.
Made by Ruslan Pivovarov
October 8, 2016
- Clip-path for image masking rectangle border (webkit only).
- Blend-mode for this mask.
- Smart color system, just put your color name and value into sass map and then add proper class with this color name to elements and everything will work!
- Cool credits side-menu (click small button in the center of demo).
- Vanilla js with just< 200 lines of code (basically it’s just adds/removes classes).
October 7, 2016
This skewed slider with scrolling based on pure JS and CSS (without libraries).
Made by Victor Belozyorov
September 3, 2016
A slider animation with Pokemon design.
Made by Pham Mikun
August 18, 2016
HTML, CSS and JavaScritp slider with complex animation and half-collored 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 and 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 and 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 of responsive, slideshow animated with Greensocks TweenLite / Tweenmax.
Made by Arden
December 12, 2015
December 5, 2015
Full-Screen slider (GSAP Timeline) # 1 with HTML, CSS and JavaScript.
Made by Diaco M.Lotfollahi
November 23, 2015
HTML and 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. Uses clip-path and lots of math.
Made by Tyler Johnson
April 16, 2015
A simple fullscreen CSS & jQuery slider using translateX and translate3d smoothness!
Made by Joseph
August 19, 2014
Responsive Sliders
About the code
Images Opacity Slider
Images opacity slider in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code
Stacked Flexible Slides Layout
This example illustrates how to create layout of slides stacked on each other (especially useful for fade in / out transitions). It "s achieved without setting their height and avoiding position: absolute; so they are fully flexible and easy to keep in normal page flow.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code
Responsive Slider
Animated responsive slider in HTML, CSS and JavaScript.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: animate.css
About the code
Slider With Masked Text
CSS only slider with masked text.
Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code
Image and content with parallax effect.
About the code
CSS only 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
An experiment to create a completely responsive vertical slider with thumbnails using only CSS, and retaining the aspect ratio of the images.
About the code
A simple Flexbox image slider / carousel made with vanilla JavaScript.
About the code
This is an experiment that simulates a motion blur effect every time a slide is switched. It takes advantage of SVG Gaussian Blur filter and some CSS keyframes animation. Although the effect does not require any Javascript to properly work, in this example Javascript is only used for the slider functionality.
About the code
Cool animates slider with JS.
About the code
This is an experiment on how SVG patterns can help us create masked-like images for a CSS-only image slider.
Exploring some slider transitions. Swiper slider with parallax option enabled. Playing with CSS filters mostly here.
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 and JavaScript.
Made by Mergim Ujkani
June 6 2017
Slider GSAP virsion 2.
Made by Em An
May 4 2017
A little slicey transition slider using a simple add class deal. Have to smooth out the timings a bit and decide on the best approach for mobile (just stack, add touch events, make images full viewport, etc. Supports scrollwheel (scroll jacking), nav buttons and arrow keys. Can also increase the content wrapper to make the images fill viewport in their non animating state, which is kinda cool as well.
Made by Stephen Scaff
January 3 2017
Leveraged CSS border-image & clip-path to create a slider animation effect.
Made by Emily Hayman
December 31, 2016
Little slider built with flexbox. Somewhat responsive, and can have fixed elements alongside the slider area.
Made by Robert
November 28, 2016
HTML, CSS canvas slider.
Made by Nvagelis
October 29, 2016
HTML, CSS and JavaScript 3D smooth slider.
Made by Eduardo Allegrini
October 19, 2016
HTML and 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 with HTML, CSS and JavaScript.
Made by Pedro Castro
September 17, 2016
HTML, CSS and 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
Enjoy the power of 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 into a 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
This is a simple slider experiment displaying words with beautiful meanings which can not be directly translated. Focus: elegant typography and simple yet alluring transitions.
Made by Joe Harry
April 5, 2016
The animation idea is to change the value of CSS clip path, thus make a masking effect.
Made by Bhakti Al Akbar
March 31, 2016
Dot slider with HTML, CSS and 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 and 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 for creating unique sliders, presentations, banners, and other 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 and 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 and CSS featured image slider.
Made by Joshua Hibbert
June 16, 2016
Multi Axis Image Slider
Multi axis image slider with HTML, CSS and JavaScript.
Made by Burak Can
July 22, 2013
Cube slider, a small 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;
- Розмір всього 3KБ.
демо | завантажити
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 - це експериментальний плагін слайдера зображень з відкритим вихідним кодом, який був написаний спеціально для роботи з адаптивними шаблонами.
Одним з ефективних способів залучення уваги користувачів на сторінці сайту це створення рухається анімації. Елементи анімації допомагають більш наочно розповісти і показати користувачам про ваш продукт. Останнім часом великої популярності набули виїжджають панелі, а також ряд інших ефектів, які з'являються під час переміщення або натисканні на картинку. Вони також відомі як слайдери, каруселі та виїжджають панелі. У даній статті мова піде про створення адаптивного слайдера карусельного типу, з плавним ефектом автопрокрутки.
На сьогоднішній день в мережі представлено сотні оглядів з посиланнями на готові рішення, проте більшість з них містять безліч невикористовуваних функцій, які значно знижують працездатність слайдера, також як і уповільнюють завантаження сайту в цілому. Професійні веб-розробники завжди прагнули створювати гнучкі в налаштуванні програмні продукти, з низьким порогом входження додаткових бібліотек і плагінів. Саме тому в роботі нашого скрипта задіяні мінімальні вимоги для організації такого слайдера. Функціонал роботи дозволяє задавати інтервал перемикання, швидкість, а також вибір определнного слайда. Нижче наведено ряд перменная, що регулюють роботу самого слайдера.
timeList - швидкість перемикання слайда
TimeView - час показу
RadioBut - кнопки під слайдом, для швидкої навігації. За замовчуванням значення true, якщо використовувати false, то кнопки пропадуть.
А тепер давайте приступимо! Створимо і відкриємо файл index.htm
У представленому коді як ми бачимо нічого складного немає, slider-wrap визначає загальний стан і вирівнює слайдер з середини екрану. параметр active-slide задає розмір і висоту картинки згідно її довжині. І slider показує тільки активну картинку.
Тепер створимо і відкриємо файл style.css і пропишемо туди потрібну нам розмітку:
@import url ( "https://fonts.googleapis.com/css?family\u003dOpen+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.p ng) 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 \u003d 700; var TimeView \u003d 5000; var RadioBut \u003d true; var slideNum \u003d 1; var slideTime; slideCount \u003d $ ( "# slider .slide"). Length; var animSlide \u003d function (arrow) (clearTimeout (slideTime); if (arrow \u003d\u003d "next") (if (slideNum \u003d\u003d slideCount) (slideNum \u003d 1;) else (slideNum ++) translateWidth \u003d - $ ( "# active-slide") .width () * (slideNum - 1); $ ( "# slider"). css (( "transform": "translate (" + translateWidth + "px, 0)"));) else if (arrow \u003d\u003d " prew ") (if (slideNum \u003d\u003d 1) (slideNum \u003d slideCount;) else (slideNum- \u003d 1) translateWidth \u003d - $ (" # active-slide "). width () * (slideNum - 1); $ (" #slider "). css ((" transform ":" translate ( "+ translateWidth +" px, 0) "));) else (slideNum \u003d arrow; translateWidth \u003d - $ (" # 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 \u003d $ ( "<>") .PrependTo (" # active-slide "); $ (" # nextbutton "). Click (function () (animSlide (" next "); return false;)) $ (" # prewbutton "). Click (function () (animSlide ( "prew"); return false;))) var adderSpan \u003d ""; $ ( ". slide"). each (function (index) (adderSpan + \u003d " "+ Index +""; }); $("
функція animSlide приймає три види значень: next, prew, числове значення. Параметр next перемикає наступний слайд, prew повертає попередній, а числове значення це безперечно заданий слайд, обраний через радіо кнопки під слайдом.
У представленому слайдері використовувалися картинки з веб-ресурсу https://pixabay.com/.