У цьому уроці ми зробимо чудовий слайдер 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;-moz-animation-timing-function: linear; -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:#FFFFFF; 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; )

Листопад 4, 2019 Запис було оновлено

Юрій Німець

Слайдери на чистому CSS + бонусний слайдер

Слайдери CSS мають деяку перевагу перед слайдерами на Javascript. Однією з таких переваг є швидкість завантаження. Мало того, що зображення для слайдерів використовуються великих розмірів (якщо немає оптимізації під різні екрани), так ще й на завантаження скриптів витрачається деякий час. Але у статті Ви побачите лише слайдери на чистому CSS.

Ось що я знайшов на сайті на тему слайдерів:

1. CSS3 слайдер зображень

Слайдер CSS, який використовує для навігації по слайдах радіокнопки. Ці радіокнопки знаходяться під слайдером. Крім радіокнопок навігація здійснюється за допомогою стрілок зліва і справа. Щоб стежити за тим, яке зображення зараз відображати, використовуються псевдокласи :checked .

2. CSS3 слайдер зображень із мініатюрами

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

3. Галерея на CSS

А ось цей слайдер на CSS відмінно підійде для сторінок, що продають. Як правило, багато веб-розробників при розробці лендингів (продають сторінок) розміщують слайдер на самому початку, щоб у першому екрані (без прокручування) відвідувач відразу бачив усі вигоди, які є для нього на цій сторінці. Крім того, цей слайдер є адаптивним, що також тішить.

4. Слайдер на CSS без посилань

Відразу хочу помітити, що цей слайдер не використовує посилань! За замовчуванням, крім головного зображення (слайда), видно ще 2 слайди. Вони розташовані за основним. Зміна слайдів відбувається в гарному режимі: спочатку розсуваються два слайди і в центрі стає той слайд, який потім стане головним. Потім слайд збільшується і поміщається попереду інших.

5. Адаптивний слайдер на CSS3

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

*** БОНУСНИЙ СЛАЙДЕР ***

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

Висновок

За допомогою слайдерів можна красиво оформлювати галереї зображень, розміщуючи їх компактніше, вставити слайдер в перший екран (частина сторінки, яку видно без прокручування) сторінки, що продає, щоб відразу показати відвідувачу головні вигоди, які він отримає. Можна знайти масу спосіб де і як можна застосувати слайдери, але одне зрозуміло точно - вони несуть користь при правильному використанні.

Пункти, що були розглянуті у статті.

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. Перший лист з нового string в array в JS буде з'явитися на новий рівень. 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. 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. as well.
Made by Stephen Scaff
January 3, 2017

Leveraged CSS border-image& clip-path для створення slider 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

Вітаю вас знов на моєму блозі. Сьогодні в CSS завдяки новим селекторам з'явилася можливість робити слайдер без скриптів. Отже, у цій статті я покажу вам, як зробити адаптивний слайдер на CSS3?

План уроку

Отже, сьогодні я докладно покажу вам, як створити свій слайдер без скриптів, адаптувати його під будь-які пристрої і легко змінювати в майбутньому його зовнішній вигляд, а також додавати нові слайди. Ми зробимо всього 3 слайди, які будуть перемикатися вручну при натисканні на кнопки. Що ж, приступимо!

Розмітка слайдера

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

Кожна отримує свій, унікальний ідентифікатор, а одна обрана за промовчанням.

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

А тепер весь цей код слід обернути в один загальний контейнер. Нехай це буде блок із класом wrap.

Починаємо створювати слайдер – початкові стилі для сторінки

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

* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}

До речі, * означає всі селектори. Тобто такий універсальний та глобальний селектор.

Оформляємо контейнер. Саме сам блок, який містить у собі всі 3 наші важливі частини – кнопки, слайди та підписи.

Wrap (
height: 350px;
margin: 0 auto;
position: relative;
width: 600px;
}

Ширину та висоту ви можете виставляти БУДЬ, залежно від того, які розміри будуть ваші фотографії для слайдів. Я заздалегідь обрізав фотографії до розмірів 600 на 350 пікселів, тому вказую такі розміри. Margin: 0 auto вирівняє контейнер по центру сторінки, а відносне позиціонування дозволить точно розмістити кнопки в самому контейнері пізніше.

Оформляємо слайдер та слайди

Спочатку такі стилі:

Slider (
background-color: #999;
height: inherit;
overflow: hidden;
position: relative;
width: inherit;
}

Вкажемо слайдеру такі самі ширину і висоту, як і загальному контейнеру. Також вказуємо колір та позиціонування, а властивість overflow: hidden обрізає все, що не потрапляє до блоку.

Наступною справою потрібно оформити самі слайди:

Slides (
height: inherit;
opacity: 0;
position: absolute;
width: inherit;
z-index: 0;
}
.auto1 ( background-image: url(bmw.jpg); )
.auto2 ( background-image: url(audi.jpg); )
.auto3 ( background-image: url(porshe.jpg); )

Також вказуємо ширину та висоту як і у слайду. Значення вherit дозволяє успадковувати значення батьківського блоку. За допомогою властивостей z-index та opacity ми зробимо наші картинки невидимими. Нижче ми чітко прописуємо фонові зображення.

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

Оформляємо кнопки перемикачі

Тепер потрібно прибрати стандартні радіо-кнопки та замість них стилізувати підписи.

Wrap > input (
display: none;
}

Забираємо радіо-кнопки.

Wrap .control (
position: absolute;
margin-left: -50px;
left: 50%;
}

За допомогою цих стилів ми відцентруємо блок із кнопками по центру.

Wrap label (
cursor: pointer;
display: inline-block;
height: 25px;
margin: 10px;
position: relative;
width: 25px;
border: 2px solid grey;
border-radius: 30%/10px;
}

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

Тепер у нас є три кнопки по центру нижче за слайди, це просто сірі рамки. Давайте зробимо так, щоб при натисканні на кнопці в ній з'являлося якесь зображення, що свідчить про те, що кнопка активна в Наразі. До речі, такий самий прийом, тільки з чекбоксами, я показую в цій статті.

Оскільки ми з вами перемикаємо зображення автомобілів, я знайшов у мережі іконку керма, зменшив її до розмірів приблизно 20 на 20. Тепер справа невелика — додавати фонове зображення кнопці, якщо на неї клікнули.

#point1:checked ~ .control label:nth-of-type(1),
#point2:checked ~ .control label:nth-of-type(2),
#point3:checked ~ .control label:nth-of-type(3) (
background: url(wheel.png) no-repeat 50% 50%;
}

Це робиться за допомогою таких селекторів. Що вони роблять? По суті це складний селектор, в ньому записана ціла умова. Це чимось схоже на програмування. Він позначає наступне: якщо радіо-кнопка обрана, то потрібно застосувати стиль до підпису, який йде десь далі у розмітці. Тепер при натисканні на кнопки у них усередині з'являється зображення керма!

Найважливіший етап – змушуємо працювати перемикання!

Насправді нам залишилося зробити зовсім трішки. А саме, зробити так, щоб замість сірої області в слайдері з'явилися зображення з автомобілями, які успішно перегорталися б. Для цього потрібно застосувати ще одні складні селектори:

#point1:checked ~ .slider > .auto1,
#point2:checked ~ .slider > .auto2,
#point3:checked ~ .slider > .auto3 (
opacity: 1;
z-index: 1;
}

Що відбувається? Зараз, якщо ви спробуєте слайдер у дії, він буде повністю робітником. Цими селекторами ми вказуємо наступне: якщо натиснута радіо-кнопка, зроби видимим потрібний слайд, який лежить десь у html-коді (далі радіо-кнопок).

Таким чином, при кліку на першу кнопку, нам показується автомобіль BMW, при кліку на другу Audi, при кліку на третю Porshe. А ще весь цей час при перемиканні іконка керма з'являється в кнопці, слайд для якої активний.

Отже, ми зробили слайдер. Залишилось його адаптувати.

Адаптуємо слайдер під перегляд на мобільних пристроях

Поки що наш слайдер має фіксовану ширину в 600 пікселів. Відповідно, на екранах менше цієї ширини почнуть виникати проблеми. Зокрема, з'явиться горизонтальна смуга прокручування. Щоб цього уникнути, нам трохи потрібно підправити вже написаний код. Ось що потрібно змінити:

1. Для блоку wrap, тобто головного контейнера, задати не width, а max-width: 600px. Це дозволить контейнеру стискатися, якщо вікно стає меншим за шириною.
2. Слайдеру (slider) необхідно прописати width: 100%;
3. У слайдів (slides) нічого не змінюємо.

Усього зміни можна побачити в цьому коді:

Wrap(
max-width: 600px;
}
.slider(
width: 100%;
}

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

До речі, докладно про медіа-запити та їх застосування я написав у цій статті. Раджу ознайомитися з нею тим, хто не має жодного уявлення про адаптивний дизайн.

Відповідно, щоб на ширині 650 пікселів і менше все відображалося добре, я пропоную таку зміну стилів:

@media screen and (max-width: 650px)(
.wrap(
max-width: 480px;
height: 280px;
}
.slides(
background-size: cover;
}
}

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

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

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

@media screen and (max-width: 400px)(
.wrap(
max-width: 320px;
height: 180px;
}
.slides(
background-size: cover;
}
}

Все те саме, тільки знову зменшуємо ширину і висоту контейнера. Відмінно тепер наш слайдер повністю адаптивний! Навіть на мобільному телефоніз шириною 320 пікселів він виглядатиме відмінно. Втім, дивіться самі:

Завдяки медіа-запитам зображення пропорційно зменшуються, зберігаючи пропорції.

Додаємо слайдеру ефекти під час переходів

Ну і бонус У цій статті ви можете побачити кілька ефектів, які можна реалізовувати при наведенні на блоки. Так от, достатньо вибрати будь-який з них, і прописати його слайдам (. slides), а при появі зображення скасовувати дію ефекту. Щоб побачити результат, вам потрібно обов'язково задати слайдам властивість transition, щоб переходи були плавними. Приклад ефекту:

Slides(
transform: rotate(50deg);
transition: 1s;
}

Тепер достатньо селектору, який робить слайд видимим, прописати скасування трансформації:

#point1:checked ~ .slider > .auto1(
transform: none;
}

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

Додаток — як зробити так, щоб при натисканні на слайд відбувався перехід по прив'язаному до слайду посиланню?

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

Як бачите, я вставив усередину першого та другого слайду посилання. Отже, при натисканні на перший слайд відбудеться перехід на Google, при натисканні на другий — на Яндекс. Хочу зазначити, що посилання відкриватиметься у цьому вікні, тобто поточна сторінка зі слайдером у разі зникне. Якщо вам потрібно відкривати посилання зі слайдів у новому вікні, у кожний тег потрібно додати атрибут target = "_blank".

Але ж це не все, що потрібно зробити! Зараз ще нічого не працює, щоб картинки стали клікабельними, потрібно додати в css ось що:

Slides a(
display: block;
width: 100%;
height: 100%;
}

Тобто для всіх слайдів робимо посилання блоковим елементом і вказуємо їй ширину і висоту 100%, щоб вона займала весь простір картинки. Тепер все має працювати, можете перевірити. Просто замініть адреси в посиланнях і можна скористатися. Сподіваюся пояснив максимально зрозуміло.

Хвилинку вашої уваги:Усі ми хочемо розміщувати свої сайти на надійному хостингу. Я проаналізував сотні хостингів і знайшов найкращий - HostIQУ мережі сотні позитивних відгуківпро нього, середня оцінка користувачів - 4.8 з 5. Нехай вашим сайтам буде добре.