Как создать слайдер для интернет-магазина
Мы очень любим различные слайдеры и ротаторы на сайтах, по этому не могли обойти стороной. В данном уроке мы покажем как создать прекрасный полноэкранный слайдер с использованием HTML, CSS3 и jQuery. Вы можете использовать данный слайдер для презентаций продуктов на веб-сайте вашего магазина. В этом уроке мы используем Google Fonts, в частности такие шрифты как Montserrat и Oswald. Обязательно подключите данные шрифты к вашему документу перед началом работы. Давайте посмотрим, что же у нас получилось.
Кроме этого, слайдер будет полностью адаптивным, что делает его максимально готовым для работы и использования на сайте. Теперь переходим непосредственно к созданию. Смотрите также бесплатные и не только шаблоны для ваших сайтов:
Шаг 1. HTML
Первый шаг — создать структуру HTML. Вот что нам нужно:
- Меню навигации;
- Структура div для слайдера с именем класса css-slider-wrapper;
- Четыре слайда; у каждого есть такие элементы, как buttons/images/text;
- Отображение слайдера;
В результате мы получаем следующую разметку:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<!-- Навигация --> <div class="navigation"> <div class="navigation-left"> <a href="#">Главная</a> <a href="#">Шаблоны</a> <a href="#">К уроку</a> </div> <div class="navigation-center"> <img src="images/logo.png" alt=""> </div> <div class="navigation-right"> <a href="#"><img src="images/shopping-bag.png" alt=""></a> <button class="login-btn" href="#">Войти</button> </div> </div> <!-- Переключатели слайдера --> <div class="css-slider-wrapper"> <input type="radio" name="slider" class="slide-radio1" checked id="slider_1"> <input type="radio" name="slider" class="slide-radio2" id="slider_2"> <input type="radio" name="slider" class="slide-radio3" id="slider_3"> <input type="radio" name="slider" class="slide-radio4" id="slider_4"> <!-- Страницы слайдера --> <div class="slider-pagination"> <label for="slider_1" class="page1"></label> <label for="slider_2" class="page2"></label> <label for="slider_3" class="page3"></label> <label for="slider_4" class="page4"></label> </div> <!-- Слайдер #1 --> <div class="slider slide-1"> <img src="images/model-1.png" alt=""> <div class="slider-content"> <h4>New Product</h4> <h2>Denim Longline T-Shirt Dress With Split</h2> <button type="button" class="buy-now-btn" name="button">$130</button> </div> <div class="number-pagination"> <span>1</span> </div> </div> <!-- Слайдер #2 --> <div class="slider slide-2"> <img src="images/model-2.png" alt=""> <div class="slider-content"> <h4>New Product</h4> <h2>Denim Longline T-Shirt Dress With Split</h2> <button type="button" class="buy-now-btn" name="button">$130</button> </div> <div class="number-pagination"> <span>2</span> </div> </div> <!-- Слайдер #3 --> <div class="slider slide-3"> <img src="images/model-3.png" alt=""> <div class="slider-content"> <h4>New Product</h4> <h2>Denim Longline T-Shirt Dress With Split</h2> <button type="button" class="buy-now-btn" name="button">$130</button> </div> <div class="number-pagination"> <span>3</span> </div> </div> <!-- Слайдер #4 --> <div class="slider slide-4"> <img src="images/model-4.png" alt=""> <div class="slider-content"> <h4>New Product</h4> <h2>Denim Longline T-Shirt Dress With Split</h2> <button type="button" class="buy-now-btn" name="button">$130</button> </div> <div class="number-pagination"> <span>4</span> </div> </div> </div> |
Как видите разметка последовательная и не сложная, по этому давайте перейдем к следующему шагу.
Шаг 2. CSS
Во-первых, давайте добавим базовый стиль для структуры слайдера:
1 2 3 4 5 6 7 8 9 10 11 12 |
* { box-sizing: border-box; } body { overflow: hidden; width: 100%; height: 100%; padding: 0; margin: 0; font-family: 'Montserrat', sans-serif; } |
Теперь давайте создадим меню навигации; мы установим для него максимальную ширину с некоторыми дополнениями. Мы будем использовать flexbox для выравнивания элементов внутри.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
.navigation { position: absolute; width: 100%; height: 100px; padding: 0 100px; display: flex; align-items: center; justify-content: space-between; z-index: 1; } .navigation-left { margin-left: -33px; } .navigation-left a { text-decoration: none; text-transform: uppercase; color: #333745; font-size: 12px; font-weight: bold; width: 107px; height: 30px; border: 2px solid transparent; border-radius: 15px; display: inline-block; text-align: center; line-height: 25px; transition: all .2s; } .navigation-left a:hover, .navigation-left a:focus { border-color: rgb(234, 46, 73); background-color: rgba(44, 45, 47, 0); } .navigation-center { margin-right: 85px; } .navigation-right { display: flex; align-items: center; } .login-btn { background-color: #b8b8b9; width: 97px; height: 30px; display: inline-block; text-align: center; text-decoration: none; font-size: 12px; font-weight: bold; border-radius: 15px; border: none; color: #333745; text-transform: uppercase; margin-left: 20px; transition: all .2s; cursor: pointer; } .login-btn:hover { transform: scale(1.06); } |
Теперь давайте создадим оболочку ползунка. Это будет полноэкранный слайдер, поэтому мы установим его абсолютное положение.
1 2 3 4 5 6 7 8 9 10 |
.css-slider-wrapper { display: block; background: #FFF; overflow: hidden; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } |
Давайте также создадим слайды, общий класс, который мы применили, теперь мы применим класс для каждого слайда, также мы добавляем цветовую гамму для каждого слайда.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.slider { width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 1; z-index: 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; -webkit-transition: -webkit-transform 1600ms; transition: -webkit-transform 1600ms, transform 1600ms; -webkit-transform: scale(1); transform: scale(1); } /* Цвет фона */ .slide-1 { background: #fbad99; left: 0; } .slide-2 { background: #a9785c; left: 100% } .slide-3 { background: #9ea6b3; left: 200% } .slide-4 { background: #b1a494; left: 300%; } .slider { display: flex; justify-content: flex-start; } .slider-content { width: 635px; padding-left: 100px; } |
Теперь элементы стиля в каждом слайде. Помните, что у нас есть текст, кнопка и изображение.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
.slider h2 { color: #333333; font-weight: 900; text-transform: capitalize; font-size: 60px; font-weight: 300; line-height: 1.2; opacity: 0; -webkit-transform: translateX(500px); transform: translateX(500px); margin-top: 0; letter-spacing: 2px; } .slider h4 { font-size: 22px; font-family: "Oswald"; color: rgba(51, 51, 51, 0.349); font-weight: bold; text-transform: uppercase; line-height: 1.2; opacity: 0; -webkit-transform: translateX(500px); transform: translateX(500px); } .slider > img { position: absolute; right: 10%; bottom: 0; height: 100%; opacity: 0; -webkit-transform: translateX(500px); transform: translateX(500px); } .slide-1 > img { right: 0; } .buy-now-btn { background-color: #ea2e49; width: 220px; height: 50px; border-radius: 30px; border: none; font-family: Montserrat; font-size: 20px; font-weight: 100; color: #fff; text-align: left; padding-left: 35px; position: relative; cursor: pointer; transition: all .2s; } .buy-now-btn:hover { box-shadow: 0px 0px 60px -17px rgba(51,51,51,1); } .buy-now-btn:after { content: 'Buy Now'; font-size: 12px; font-weight: bold; text-transform: uppercase; position: absolute; right: 35px; top: 18px; } .slider .buy-now-btn:focus, .navigation .login-btn:focus { outline: none; } |
Теперь давайте сделаем слайд адаптивным.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
@media only screen and (max-width: 768px) { .slider h2 { font-size: 20px; } .slider h4 { font-size: 16px; } .slider-content { padding: 0 2% } .navigation { padding: 0 2%; } .navigation-left { display: none; } .number-pagination { right: 2%; } .slider-pagination { left: 2%; } .slider .buy-now-btn { padding: 0 15px; width: 175px; height: 42px; } .slider .buy-now-btn:after { top: 15px; } .slider > img { right: 2%; } .slide-1 > img { right: -110px; } } |
Со стилями мы разобрались, как видите большая часть реализована с помощью CSS, теперь остались мелкие детали.
Шаг 3. JS
У нас есть еще одна вещь которую нам необходимо реализовать еще. Наш слайдер меняет слайды, когда мы нажимаем на навигационные точки. Мы будем использовать Javascript, чтобы заставить ползунок автоматически изменять положение. Обязательно подключите библиотеку jQuery, а затем добавьте эту строку в свой файл javascript.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var TIMEOUT = 6000; var interval = setInterval(handleNext, TIMEOUT); function handleNext() { var $radios = $('input[class*="slide-radio"]'); var $activeRadio = $('input[class*="slide-radio"]:checked'); var currentIndex = $activeRadio.index(); var radiosLength = $radios.length; $radios .attr('checked', false); if (currentIndex >= radiosLength - 1) { $radios .first() .attr('checked', true); } else { $activeRadio .next('input[class*="slide-radio"]') .attr('checked', true); } } |
В результате у нас получился крутой слайдер. Просмотрите демо и дайте нам знать, что вы думаете о слайдере в комментариях.
Вот и все. Готово!
Читайте также:
Опубликовал Cooper 21.05.2018 в 11:13, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |