Как сделать слайдер в html и css

Create a slider with pure CSS

Actually, there is a clever way to do this with pure CSS, and not a single line of JS. And yes, that includes navigation buttons and breadcrumbs!

Take a quick look at the result we will get:

Read on to find out how.

Step 1 — create your slider layout

First you need to create a space for your slider to go into, and of course, some slides!

So here we have:

• slider-container is just the element on your site that you want the slider to go in.
• slider is like the ‘screen’, or the viewport that will display all your slides.
• slides will hold your slides. This is the element that actually scrolls to give the slider effect.
• slide is each individual slide. Note that you need the slide class, and a unique id for each one.

Then we need the CSS:

slider-container can be anything — I’ve just used a flexbox to make it easy to centre the slider. But if you prefer, you can use CSS Grid (it’s a question of preferences, as we explained in this CSS Grid Vs. Flexbox article)

slider just sets the size of your slider — you can adjust this to suit your needs.

Next, we’ll style the slides element:

OK, this is where the magic happens. If we set overflow-x to scroll, anything that doesn’t fit in our slider viewport will be accessible only by scrolling.

Setting scroll-behavior to smooth and scroll-snap-type to x mandatory means that if we jump-link to any child element of slides , the browser will scroll to it smoothly, rather than just jumping immediately to that element.

Right, next let’s style the slides themselves:

Match the size of slide to be the same as slider . The final three properties, transform-origin , transform , and scroll-snap-align , are key. These ensure that when we jump-link to any particular slide, the slide will ‘snap’ into the middle of the slider viewport.

OK, so far we have this:

If you click inside the slider, then press the arrow keys, you’ll see the smooth scrolling and snapping behaviour in action.

But of course we don’t want our users to have to do this! We want to put some navigation buttons on the slider instead — and we should probably get rid of that scrollbar too!

Step 2 — Adding the slider navigation buttons

In the HTML, I’ve added two a elements to each slide:

• The one going backwards has the slide__prev class, and the one going forwards has the slide__next class.
• the href contains the jump link to the slide we want to move to. You have to set these manually.

Now for the css:

You can style and position these buttons however you want — I’ve chosen to have arrows pointing in each direction. Sometimes the simple option is the best — but you can make your own choice!

Step 3 — Removing the scrollbar with CSS

. just add overflow: hidden; to .slider . This also bring the border radius into play.

That gives us this:

OK, pretty good — but ideally we don’t want the buttons to be locked to each slide. Sliders typically have buttons fixed in place.

But is that possible with CSS?

Step 4 — Fixing the navigation buttons in place

We don’t need to change the HTML for this, but we do need to update our CSS a bit:

OK so what’s going on here? Well first, we’ve taken the background and border off of the a element. This makes our buttons effectively invisible.

Then, we’ve added before and after pseudo elements to slider . These have the same style that we previously had on the a elements — the nice simple arrow. And we’ve positioned them exactly on top of our now invisible buttons, and set pointer-events to none .

Because they are attached to the slider element and not slide , they will remain fixed in place as the user scrolls through the slides. But. when the user clicks on one, they are actually clicking on the invisible button attached to the actual slide.

This gives the illusion of fixed navigation buttons! Nice eh?

It looks like this:

OK, now we’ve got a pretty good, pure CSS slider!

Aha, I hear you say, but what about breadcrumbs, can we add those too?

Glad you asked — yes we can!

Step 5 — Add breadcrumbs to the slider

To add the breadcrumbs to the slider, we are really using the same techniques we’ve just been through — just in a slightly different way.

Each breadcrumb will just be another jump link pointing to the relevant slide, and we’ll position it absolutely in the slider element.

So here’s the HTML (put this in slider , below the slides element):

See? Same links as we used before. Now to style it:

Again, you are free to style these however your heart desires!

And here is the final result:

A pretty cool slider, and no JavaScript in sight. Hope that’s useful to you!

Conclusion

This is a useful trick that lets you create slider functionality — even for people with JS turned off. But of course, without JS, you’re really limited in what you’re able to do and how you can integrate it with your existing site.

If you wanted to harness the power of JS to create beautiful, responsive, full-page sliders, check out fullPage.js. It’s got slider functionality right out of the box, and includes support for:

• Breadcrumb navigation — which you can move around and style easily
• Autoplay — so your visitors get to see more of your awesome content even if they don’t click the navigation buttons!
• Lazy loading — speed up your site by only loading assets when needed
• Lots, lots more

It’s also super-easy to set up — so give it a try!

And if you still hungry for sliders, get inspired by this list of amazing animated sliders or this another one with cool Webflow sliders.

[вёрстка] Как сделать слайдер на CSS и HTML, без Javascript

В одной из предыдущих статей мы рассмотрели, как сделать вкладки на CSS при помощи трюка с радио-кнопками. В этой статье мы при помощи аналогичного подхода создадим симпатичный слайдер, не требующий Javascript для работы.

Слайдеры, как правило делаются с использованием Javascript. Обычно для этого задействуют библиотеку JQuery. Хотя CSS и не позволяет создать полнофункциональный слайдер с кучей возможностей, таких как анимация по таймеру, листание пальцем на тач-скрине и т.п., во многих случаях такие продвинутые возможности и не требуются.

Простой слайдер для блога гораздо проще сверстать на чистом HTML и CSS, чем задействовать для этого возможности Javascript. Во-первых, код стилей слайдера получится гораздо проще и понятнее, чем код слайдера на Javascript. Во-вторых, та часть пользователей, которая параноидально не доверяет сайтам и заходит на незнакомые сайты только с аддоном NoScript, вырезающим весь JS-код, тоже сможет воспользоваться вашим слайдером.

Простой слайдер с анимированным переключением кадров

Примечание: В этом примере я буду ориентироваться на самые новые возможности CSS. Код не предназначен для работы в старых браузерах.

Начнём создание слайдера с такого кода:

Контейнер слайдера — div с классом sliderA. Каждый кадр слайдера описывается трёмя тегами:

• Радиокнопкой (input type=»radio»), отвечающей за состояние данного кадра (видно / не видно)
• Меткой label, отвечающей за отображение кнопки перехода на данный слайдер.
• Тегом div в котором находится содержимое кадра.

Радиокнопки внутри одного слайдера должны иметь одинаковое имя name. Также, все радиокнопки должны иметь уникальные (различные) идентификаторы id. Метка в поле for должна содержать значение id соответствующей радиокнопки. (Если вам не понятно, почему и зачем всё это делается читайте статью про вкладки. Там всё это объяснено подробно.)

Начинаем работать над стилями. Контейнер:

Мы задаём фиксированные размеры контейнера. Я установил их равными размеру изображений, которые я буду использовать в этом примере. Свойство position: relative необходимо, чтобы задать новую точку отсчёта позиций вложенных контейнеров. Свойство text-align: center я добавил, чтобы выровнять по центру полосу меток-кнопок, которые я буду позиционировать как inline-элементы.

Отображение радиокнопок нам не нужно, скрываем их:

Оформляем метки-кнопки. Кода много, но ничего сложного нет:

Я устанавливаю свойство display: inline-block, что позволит разместить метки одной строкой и выровнять их по центру как строчные элементы, и вместе с тем задать им фиксированные размеры как блокам. Затем я задаю ширину и высоту, а также радиус скругления углов, цвет фона и цвет границы. Всё это приводит к тому, что наши метки будут отображаться в виде маленьких круглых кнопок.

Свойство cursor позволяет задать внешний вид курсора мыши при наведении на кнопку. Я установил значение pointer, т.е. вид указателя мыши будет такой же, как при наведении на ссылку («указательный палец»).

Свойство z-index необходимо для того, чтобы метки-кнопки лежали поверх кадров слайдера. Для этого же установлено свойство position: relative — иначе z-index не будет работать.

margin-right добавляет отступы между кнопками, а top: 90% сдвигает их в нижнюю часть контейнера. Можно было задать вертикальную позицию кнопок более грамотно, но здесь я ограничусь этим способом.

Также я задаю цвет фона для нажатой кнопки и кнопки, на которую наведена мышь. Свойство transition определяет анимацию для смены фона.

Также нам следовало устранить все пробелы и переводы строк между тегами слайдера, так как при использовании display: inline-block они дадут нам лишние зазоры между кнопками. Так мы поступали в предыдущей статье. Я не стал сейчас этого делать для упрощения восприятия кода HTML.

Получилась вот такая заготовка слайдера:

Добавляем стили для div-ов, в которых будет находиться содержимое кадра:

Все кадры будут занимать одно и то же положение. position: absolute позволяет изъять блоки из потока и разместить из произвольным образом. top, left, right, bottom задают координаты кадра таким образом, что кадр занимает весь контейнер слайдера целиком. z-index отправляет кадры под кнопки переключения кадров, иначем мы не сможем эти кнопки ни увидеть, ни нажать.

Теперь самая главная часть слайдера — показ и скрытие кадров в зависимости от нажатой кнопки. Традиционный подход скрытия элементов страницы с использованием свойства display: none нам не совсем подходит. Ведь для слайдера хотелось бы сделать плавное переключение кадров, но CSS не позволяет задать анимацию значения display при помощи правил transition.

Для плавного скрытия и появления кадров нам понадобятся два свойства: opacity и visibility; а также упомянутый transition.

Свойство opacity позволяет в виде десятичной дроби задать уровень прозрачности элемента страницы, от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Например, opacity: 0.5 — прозрачность 50%.

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

Чтобы полностью отключить элемент и сделать его прозрачным для щелчков мышью, понадобится второе свойство: visibility: hidden. Однако visibility не позволяет задать частичную прозрачность. Элемент либо виден, либо нет.

Поэтому мы будем при помощи transition анимировать оба свойства, чтобы добиться нужного нам эффекта. Суть метода в следующем:

How to make a pure HTML & CSS slider using `:checked`!

On my journey to becoming a Full Stack Web Developer, I’ve begun cloning the Plasso homepage as my first real project. Despite thinking the slider is “kiddy stuff”, I posted a story on Instagram showing it. Mentioning I used nothing but HTML and CSS, a handful of people asked how they could do it too. That’s when I realised, it may seem like a novice task but a lot of people can still benefit from reading the code, and beginners could benefit from a walkthrough.

See it in action here.

Lets Get Started

Firstly, to keep things organised and semantic, everything related to the slider is contained in section.slider on line 1. It contains the backgrounds, slides and paginations.

Backgrounds Markup

You can’t use transition on a background that contains a gradient. For example, this won't work:

However, this will:

For that reason, we need a background for each slider. This could’ve been approached in three ways:

1. Use linear-gradient() to create a solid block of color, a gradient, another solid block of color, then skewY() .
2. Make two backgrounds for each slide, one with the solid block of color, another with the gradient. Apply skewY() to both.
3. Same as number two, but instead of using skewY() , use polygon() .

For all three solutions, we need to apply a fade out transition on opacity , while applying a fade in transition to the incoming slides background. This has the added benefit of improving performance by avoiding the paint process.

Solution one below creates jagged edges, for which I couldn’t find a solution.

We’re left with solutions two and three. I went with solution three based on my own preference.

Background Styling

We want all the .slider__backgrounds classes to be positioned the same. If we were to not position .slider , we'd need to relative position all .slider__background divs and then use top: -100% for the second .slider__backgrounds , then top: -200% for the next and so on. Using absolute avoids all those extra lines of code and places the backgrounds exactly where we need them using a single line of code.

Since all the divs are empty (in terms of HTML elements) and all the .slider__background divs will remain empty, a height and width is added to give them some life.

To get the required shape for .slider__backgrounds__bottom and .slider__backgrounds__top , polygon() from solution three is used.

The modifier classes for .backgrounds__slider__bottom and .backgrounds__slider__top come in handy for easily applying the different backgrounds, as well making it easy to read and understand the CSS.

Slides Markup and Layout

As all the divs above .slider__slides are absolute positioned, it is positioned exactly where we need it to be. This is because the aforementioned divs are taken out of the normal flow.

Using display: grid , the basic structure of each slide is complete in two lines. This causes an overflow as .slider__slides now has a layout of three columns that are 300% wide combined. If you apply overflow: hidden to .slider__slides , it solves the problem, almost. There won’t be an overflow, but the drop shadow on the .slider__slides_slide will be cut off on the top. The solution to this was to add overflow: hidden to the parent div of .slider__slides , which in this case is body .

I used will-change to aid in smoother framerates.

The will-change CSS property provides a way for authors to hint browsers about the kind of changes to be expected on an element, so that the browser can set up appropriate optimizations ahead of time before the element is actually changed. These kind of optimizations can increase the responsiveness of a page by doing potentially expensive work ahead of time before they are actually required. — MDN

Making It All Work

Pagination, Labels and Inputs

This is the moment you’ve been waiting for. So how does it actually slide on a click?

The pagination sections are actually labels, which are linked to radio inputs. Therefore, when you click on a label, the corresponding radio input is selected, deselecting the others. This avoids writing JavaScript logic to see what slide is currently active, removing the ‘activation’ class, then seeing which slide the user chose and ‘activating’ it.

Using :checked is the other half. We’re all familiar with :hover , it’s the same concept. When the condition is true, the CSS is applied. However, there’s one caveat. You need to use a general, child or adjacent combinator. If you remove the

, the slider won’t work at all.

After that, it’s just a matter of adding the transitions and you’re done.

Here’s the codepen if you want to see all of the code.

Conclusion

It’s that simple. Now I’m sitting here thinking, “does this really deserve a whole article? Is this even helpful?”. Drop a comment and let me know. The same applies if you have any questions.

Cлайдер на CSS + бонусный слайдер

Для работы с этим уроком вам нужно иметь общее представление о CSS3 переходах и анимации по ключевым кадрам. Используя эту простую концепцию, мы увидим как сделать слайдер изображений. Пожалуйста, обратите внимание, что эти свойства будут работать только в современных браузерах (в частности IE10+).

Слайдер на CSS3

Базовые концепции CSS переходов

Обычно, когда вы измените значение CSS, изменение происходит мгновенно. Теперь, благодаря универсальному CSS3 свойству transition, мы можем легко анимировать от старого к новому состоянию.

Мы можем использовать четыре свойства перехода:

— определяет CSS свойства, к которым должны быть применены переходы. — определяет длительность переходов. — определяет, как рассчитываются промежуточные значения перехода. Эффекты от функции времени задержки обычно называют реверсивными функциями. — определяет когда начинается переход.

Поскольку технология все еще относительно новая, потребуется использовать префиксы для браузеров. Мы будем опускать их в примерах кода в этой статье, но не забудьте включить их в своем коде чтобы ваш слайдер на CSS работал должным образом. Давайте посмотрим, как применить простой переход к ссылке:

При назначении анимации к элементу вы также можете использовать сокращенную запись:

Давайте посмотрим как применять простую анимацию в div.

Но мы можем использовать сокращенную запись записав все свойства анимации сразу:

Ключевые кадры для CSS слайдера

Ключевые кадры определяют то, как анимация выглядит на каждом этапе временной шкалы. Ключевые кадры используют процентное значение для определения времени: 0% это начало анимации, а 100% конец. Вы можете также добавить ключевые кадры для промежуточной анимации.

Структура CSS-слайдера

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

Как функционирует анимация слайдера

Как видите, наш слайдер — это контейнер, внутри которого отображаются изображения. Анимация здесь очень простая: изображение следует по предварительно определенному пути путем анимации свойства top и меняя свойства z-index и opacity когда изображение возвращается в исходное состояние. Давайте погрузимся в HTML-разметку для создания слайдера.

HTML-разметка очень проста и SEO дружелюбна. Рассмотрим в деталях, как все работает:

Это главный контейнер слайдера. Он не имеет определенной функции, но мы должны приостановить его анимацию.

Мы будем использовать маску для CSS слайдера, чтобы скрыть все, что происходит за его пределами.

Каждый элемент списка имеет идентификатор и класс. Идентификатор отвечает за подсказку, а класс привязан к анимации, которая должена произойти.

Блок для отображения названия изображения. Вы можете изменить его под свои нужды, например, сделав его интерактивными, и добавив краткое описание.

Он содержит функцию, которая показывает ход анимации.

Теперь пришло время для CSS стилей.

CSS стили слайдера

Давайте создадим базовую структуру слайдера. Он будет иметь тот же размер, что и изображение. CSS cвойство border будет полезно для создания рамки вокруг изображения.

Блок mask скроет все элементы, которые лежат за пределами слайдера; его высота должна быть равна высоте слайдера.

Наконец, чтобы отсортировать список изображений, мы зададим position: absolute и top: -325px , так что все изображения будут расположены за пределами слайдера.

С помощью этих нескольких строк кода мы создали наш слайдер без javascript, осталось только добавить анимацию.

Ключевые кадры CSS анимации

Анимация изображения для слайдера

Прежде чем мы начнем работать с анимацией, мы должны указать некоторые параметры для того, чтобы получить правильный вид анимации. Oбщая продолжительность нашей анимации — 25 секунд, но мы должны знать, сколько ключевых кадров равны 1 секунде. Итак, давайте рассмотрим серию операций, которые дадут нам точное число ключевых кадров на основе анимируемых изображений. Вот расчеты:

1. Общее количество изображений в слайдере — 5
2. Продолжительность анимации для каждого изображения — 5 секунд
3. Общая продолжительность анимации — 5 изображений × 5 секунд = 25 секунд
4. Подсчитаем сколько ключевых кадров равны одной секунде, для этого разделим общее количество ключевых кадров на общую продолжительность анимации: 100 ключ. кадров / 25 сек. = 4 ключ. кадра

Теперь мы можем применить CSS анимацию к слайдеру. Мы сможем поставить анимацию на бесконечный цикл, потому что у каждого изображения своя собственная анимация.

После того, как свойства анимации назначены, мы должны использовать ключевые кадры для настройки анимации движения. Также я добавил свойства opacity и z-index , чтобы сделать переход от одного изображения к другому более плавным. Первая анимация имеет больше ключевых кадров, чем последняя. Причина этого в том, что когда последнее изображение завершило свою анимацию, первое изображение должно иметь дополнительные ключевые кадры для того, чтобы пользователь не видел перерыва между циклами анимации.

Создав анимацию, мы должны добавить прогресс бар для отображения продолжительности каждой анимации.

Индикатор прогресса (прогресс-бар)

Анимация индикатора прогресса

Процесс создания анимации индикатора такой же, как и у слайдера. Во-первых, мы создаем сам индикатор:

Не бойтесь синтаксиса, описанного ниже: он также задает состояние «from» и «to».

CSS3 анимация подсказки слайдера

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

Подсказка к изображению

Вот CSS для всплывающих подсказок:

Здесь мы сделали так, что показываются только заголовки изображений, но вы можете сделать то же самое с пользовательским контентом, ссылками и пр.

Анимация подсказки при наведении

Мы видели, как применить CSS3 переходы элементов; Теперь давайте сделаем это в подсказках.

Пауза и продолжение анимации слайдера

Остановка анимации при наведении курсора мыши

Давайте разрешим пользователям сделать паузу, чтобы прочитать подсказку или рассмотреть изображения. Для этого мы должны остановить анимацию при наведении курсора мыши на изображение (мы также должны остановить анимацию индикатора прогресса).

Заключение и бонусный CSS3 слайдер)

Наконец, мы достигли конца урока. CSS3 слайдер теперь готов на 100%! Взгляните на демонстрационный пример CSS слайдера без Javascript. Он работает в Firefox 5+, Safari 4+, IE10+ и Google Chrome, а также iPhone и IPad..

Эффект впечатляет, но по общему признанию, это слайдер не очень гибкий. Например, чтобы добавить больше изображений, вам придется редактировать все ключевые кадры. CSS3 имеет большой потенциал, но иногда лучше воспользоваться JavaScript, чем заморачиваться с ключевыми кадрами. А теперь, бонусный слайдер на CSS3, как я и обещал.