Как создать слайдер для интернет-магазина на CSS3

Мы очень любим различные слайдеры и ротаторы на сайтах, по этому не могли обойти стороной. В данном уроке мы покажем как создать прекрасный полноэкранный слайдер с использованием HTML, CSS3 и jQuery. Вы можете использовать данный слайдер для презентаций продуктов на веб-сайте вашего магазина. В этом уроке мы используем Google Fonts, в частности такие шрифты как Montserrat и Oswald. Обязательно подключите данные шрифты к вашему документу перед началом работы. Давайте посмотрим, что же у нас получилось.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Шаг 1. HTML

Первый шаг — создать структуру HTML. Вот что нам нужно:

Меню навигации;
Структура div для слайдера с именем класса css-slider-wrapper;
Четыре слайда; у каждого есть такие элементы, как buttons/images/text;
Отображение слайдера;

В результате мы получаем следующую разметку:

<!-- Навигация -->
<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>

<a href="#">Главная</a>

<a href="#">Шаблоны</a>

<a href="#">К уроку</a>

</div>

</div>

<button class="login-btn" href="#">Войти</button>

</div>

</div>

<h4>New Product</h4>

<h2>Denim Longline T-Shirt Dress With Split</h2>

</div>

</div>

<h4>New Product</h4>

<h2>Denim Longline T-Shirt Dress With Split</h2>

</div>

</div>

<h4>New Product</h4>

<h2>Denim Longline T-Shirt Dress With Split</h2>

</div>

</div>

<h4>New Product</h4>

<h2>Denim Longline T-Shirt Dress With Split</h2>

</div>

</div>

Как видите разметка последовательная и не сложная, по этому давайте перейдем к следующему шагу.

Шаг 2. CSS

Во-первых, давайте добавим базовый стиль для структуры слайдера:

* {
box-sizing: border-box;
}

body {
overflow: hidden;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-family: 'Montserrat', sans-serif;
}

* {

box-sizing: border-box;

}

body {

overflow: hidden;

width: 100%;

height: 100%;

padding: 0;

margin: 0;

font-family: 'Montserrat', sans-serif;

}

Теперь давайте создадим меню навигации; мы установим для него максимальную ширину с некоторыми дополнениями. Мы будем использовать flexbox для выравнивания элементов внутри.

.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);
}

.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);

}

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

.css-slider-wrapper {
display: block;
background: #FFF;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}

.css-slider-wrapper {

display: block;

background: #FFF;

overflow: hidden;

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

}

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

.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;
}

.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;

}

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

.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: &quot;Oswald&quot;;
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 &gt; img {
position: absolute;
right: 10%;
bottom: 0;
height: 100%;
opacity: 0;
-webkit-transform: translateX(500px);
transform: translateX(500px);
}

.slide-1 &gt; 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;
}

.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;

}

Теперь давайте сделаем слайд адаптивным.

@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 &gt; img {
right: 2%;
}
.slide-1 &gt; img {
right: -110px;
}
}

@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.

var TIMEOUT = 6000;
var interval = setInterval(handleNext, TIMEOUT);
function handleNext() {
var $radios = $('input[class*=&quot;slide-radio&quot;]');
var $activeRadio = $('input[class*=&quot;slide-radio&quot;]:checked');
var currentIndex = $activeRadio.index();
var radiosLength = $radios.length;
$radios
.attr('checked', false);
if (currentIndex &gt;= radiosLength - 1) {
$radios
.first()
.attr('checked', true);
} else {
$activeRadio
.next('input[class*=&quot;slide-radio&quot;]')
.attr('checked', true);
}
}

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);

}

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

Как создать слайдер для интернет-магазина

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JS

Вот и все. Готово!

Читайте также:

Интересно:

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи

Как создать слайдер для интернет-магазина

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JS

Вот и все. Готово!

Читайте также:

Интересно:

Зайти

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи