В данном уроке мы сделаем отличный слайдер 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; -webkit-animation-fill-mode: forwards; -moz-animation-name: anim_slides; -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; } /* Задержки css3 */ .slides ul li:nth-child(2), .slides ul li:nth-child(2) div { -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0s; } .slides ul li:nth-child(3), .slides ul li:nth-child(3) div { -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; } .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

Еще один адаптивный слайдер, управление которого основано на радиокнопках. Чтобы посмотреть как этот слайдер будет смотреться на разных устройствах — Вы можете либо самостоятельно изменять окно браузера, либо на странице со слайдером есть специальные иконки разных устройств, кликая на которые, Вы увидите будет смотреться слайдер на компьютере, планшете или на смартфоне.

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

Кроме всех слайдеров, которые представлены выше, я хочу порадовать Вас еще одним. Этот слайдер отлично подойдет для создания галереи изображений. Словами не объяснишь то что он делает, поэтому лучше смотрите всё на видео:

Вывод

С помощью слайдеров можно красиво оформлять галереи изображений, размещая их более компактно, вставить слайдер в первый экран (часть страницы, которую видно без прокрутки) продающей страницы, чтобы сразу показать посетителю главные выгоды, которые он получит. Можно еще найти массу способ где и как можно применить слайдеры, но одно понятно точно — они несут пользу при правильном использовании.

Пункты, которые были рассмотрены в статье.

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

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 into sass map and then add proper 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

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

Made by Arden
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 cannot 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

Приветствую вас вновь на моем блоге. Сегодня в 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); }

Также указываем ширину и высоту как и у слайда. Значение inherit позволяет наследовать значение родительского блока. С помощью свойств 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-коде нужно найти кусок, отвечающий за сами слайды. Вот он на скриншоте:

Как видите, я вставил внутрь первого и второго слайда ссылки. Итак, при клике на первый слайд произойдет переход на Гугл, при клике на второй — на Яндекс. Хочу отметить, что ссылка будет открываться в этом же окне, то есть текущая страница со слайдером в таком случае исчезнет. Если вам нужно открывать ссылки со слайдов в новом окне, в каждый тег необходимо добавить атрибут target = "_blank".

Но это не все, что нужно сделать! Сейчас еще ничего не работает, чтобы картинки стали кликабельны, нужно добавить в css вот что:

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

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

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.