Как создать слайдер изображений или слайд-шоу
Слайдер изображений — это отличный способ отображения различных изображений веб-страницы. Красивые и интересные изображения могут привлечь много посетителей на вашу веб-страницу.
Обычно слайдеры изображений создаются с помощью JavaScript, но с версией CSS3 стало возможно создать слайдеры, используя только CSS3. В этой статье вы научитесь, как можно получить эффект слайд-шоу, сохраняя минимальный код CSS, а во второй части статьи вы узнаете, как создать слайдеры изображений с помощью JavaScript.
Создание слайдеров изображений используя только CSS3
Наверно вы уже видели слайдеры, созданные с помощью JavaScript, которые очень тяжело загружаются. Они замедляют работу веб-страницы, а также могут не работать, если пользователь отключил интерпретацию JavaScript в браузере. Одно из решений этой проблеме — это отказ от их использования, но как же можно создать слайдеры без использования JavaScript? Здесь вы найдете ответ.
Слайдер для html сайта
Слайдер стал пользоваться большой популярностью сравнительно недавно. Где-то на половине всех шаблонов можно встретить слайдер.
Слайдер представляет из себя область сайта (как правило центральная часть, сразу после шапки). Его цель сделать сайт более информативным, «живым», попытка в нескольких картинках описать достоинства компании или товара.
Вариантов создания слайдера множество. Мы рассмотрим несколько самых популярных из низ. К каждому способу будут приведены исходники.
Вариант №1. Слайдер на JQuery (JavaScript)
Это фотография, что получится с помощью этого варианта (ниже представлен исходник с этим примером)
Для работы слайдера Вам необходимо сделать следующее:
- Подключить javascript (ява файлы) в заголовочных тегах
- Файл стилей опять же в заголовочных тегах
- В месте где нужно вывести слайдер заполнить тег <div> (как в примере выше)
Вариант №2. Слайдер на основе CSS
Дабы не нагружать сайт лишними скриптами, есть отличный способ сделать слайдер только на основе CSS (т.е. чисто на стилях). Давайте рассмотрим пример.
Вот, что должно получится:
На мой взгляд, довольно простой и хороший слайдер. Плюс здесь можно легко дописывать текст к каждой фотографии. с помощью тега <p>, а если нет необходимости, то его можно не писать.
Интересный и одновременно простой слайдер на чистом CSS3
Для реализации слайдера нам понадобится довольно простой набор тэгов, которые будут в свою очередь отвечать за элементы слайдера.
Здесь мы видим, что общий блок «wrapper» содержит в себе блок «slider» с 5-ю слайдами, внутри которых можно поместить любой html-код, который будет располагаться на слайде. Перед общим блоком находятся радио-кнопки, которые впоследствии будут скрыты, чтобы создать для них собственную панель навигации по слайдам, с которой нам помогут лейблы в блоке «controls».
2. Оформляем слайдер
Здесь мы остановимся и немного рассмотрим css. Обратите внимание, что для некоторых свойств проставлены кроссбраузерные префиксы, чтобы все современные браузеры могли их понимать.
С оформлением фона и общими стилями всё понятно.
Общий блок и блок с слайдером имеют одинаковые размеры, чтобы идеально контролировать положение слайдера на странице. Пока отсутствуют слайды, слайдер мы временно покрасили в светло-серый цвет.
Радио-кнопки скрываем. Они нам понадобятся позже.
Результат на данный момент такой:
3. Оформляем слайды
Здесь мы пропишем общие стили для слайдов и каждый слайд отдельно:
Для всех слайдов мы указали абсолютное позиционирование, чтобы можно было играть с эффектами появления. Размеры слайдов берутся из размера самого слайдера, чтобы не приходилось их прописывать в нескольки местах.
4. Делаем навигацию по слайдам
Так как радио-кнопки скрыты и нужны нам как переключатели, оформляем подготовленные лейблы:
Навигацию мы делаем классической. Каждая кнопка представляет собой область в виде круга, внутри которого при активном слайде пустая область частично окрасится. Пока же у нас следующий результат:
5. Учим кнопки нажиматься
Пришло время научить слайдер переключать слайды по нажатию на определённую кнопку:
В оформленные кнопки навигации добавляем плавное окрашивание внутри них. Также добавляем условия, при которых активная кнопка и кнопка, на которую навели курсор, будет плавно окрашиваться. Наши собственные радио-кнопки готовы:
6. Оживляем слайдер
Ну, а теперь делаем так, чтобы слайды наконец-то переключались:
В общие стили слайдов мы добавляем свойства, при которых все слайды становятся невидимыми и уходят на задний план. Также мы добавили небольшое увеличение слайдов, пока они невидимы для придания интересного появления в слайдере.
Далее мы приписываем условие, при котором, в зависимости от активной кнопки навигации, в окне слайдера появлялся необходимый слайд.
Результат можно посмотреть здесь: демка слайдера.
Слайдер не требует js. Пускай он не умеет сам переключаться, но любому, кто знает основы CSS, transition и transform, будет легко придумать свои эффекты для переключения слайдов.
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.