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

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

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

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

Шаг 1. HTML

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

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

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

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

}

Теперь давайте создадим меню навигации; мы установим для него максимальную ширину с некоторыми дополнениями. Мы будем использовать 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);

}

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

.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 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 > img {

right: 2%;

}

.slide-1 > img {

right: -110px;

}

Со стилями мы разобрались, как видите большая часть реализована с помощью CSS, теперь остались мелкие детали.

Шаг 3. JS

У нас есть еще одна вещь которую нам необходимо реализовать еще. Наш слайдер меняет слайды, когда мы нажимаем на навигационные точки. Мы будем использовать Javascript, чтобы заставить ползунок автоматически изменять положение. Обязательно подключите библиотеку jQuery, а затем добавьте эту строку в свой файл javascript.