Slick Slider – это широко используемый и очень мощный слайдер, адаптирующийся к мобильным устройствам, с множеством настраиваемых конфигураций, широким спектром использования и надежной функциональностью, основанной на целях слайдера на вашем веб-сайте.Слайдер на главной странице позволяет вам отображать вращающуюся серию изображений, которые первое, что видит посетитель веб-сайта, попадая на вашу домашнюю страницу. Эффективный слайдер на главной странице в идеале предоставляет пользователям наиболее ценный контент на вашем сайте, соответствующий вашим целям, и побуждает их к действию.
В части I нашей серии Slick Slider мы покажем вам, как с помощью Slick Slider добавить основной слайдер на вашу домашнюю страницу.
Чтобы узнать, как добавить слайдер героя на свою домашнюю страницу с помощью шорткодов Solodev, посетите наш пост здесь.
Демо на JSFiddle
Эта статья предоставит вам код, необходимый для простого добавления главного слайдера на вашу домашнюю страницу с помощью Slick Slider by Ken Wheeler.
Шаг 1
Начните с использования приведенного ниже HTML-кода для слайдов, которые вы хотите чередовать. Замените изображение, текст слайда, описание слайда и ссылки на нужный контент.
<div class="ct-header ct-header--slider ct-slick-custom-dots" id="home"> <div class="ct-slick-homepage" data-arrows="true" data-autoplay="true"> <div class="ct-header tablex item" data-background="slide1.jpg"> <div class="ct-u-display-tablex"> <div class="inner"> <div class="container"> <div class="row"> <div class="col-md-8 col-lg-6 slider-inner"> <h1 class="big">Big Data. Realtime Insight.</h1> <p>Leverage your data and improve marketing and sales ROI.</p> <a class="btn btn-transparent btn-lg text-uppercase" href="#">Learn More</a></div> </div> </div> </div> </div> </div> <div class="ct-header tablex item" data-background="slide2.jpg"> <div class="ct-u-display-tablex"> <div class="inner"> <div class="container"> <div class="row"> <div class="col-md-8 col-lg-6 slider-inner"> <h1 class="big">Disrupting Industries with Grace</h1> <p>WebCorpCo is at the forefront of digital marketing, content management, automated marketing, and more.</p> <a class="btn btn-transparent btn-lg text-uppercase" href="">Learn More</a></div> </div> </div> </div> </div> </div> <div class="ct-header tablex item" data-background="slide3.jpg"> <div class="ct-u-display-tablex"> <div class="inner"> <div class="container"> <div class="row"> <div class="col-md-8 col-lg-6 slider-inner"> <h1 class="big">Moving Business Forward</h1> <p>Learn how WebCorpCo can take your business to the next level.</p> <a class="btn btn-transparent btn-lg text-uppercase" href="">Learn More</a></div> </div> </div> </div> </div> </div> </div> </div>
Мы рекомендуем включить призыв к действию (CTA) в виде кнопки, такой как «Узнать больше», «Скачать» или «Купить сейчас», а также уверенные и действенные сообщения, чтобы прояснить цель вашего веб-сайта.
Шаг 2
Скопируйте и вставьте приведенный ниже код JavaScript в файл с именем slick-bg.js, поскольку он потребуется для включения вашего Slick Slider.
$(document).ready(function() {
if ($('[data-background]').length > 0) {
$('[data-background]').each(function() {
var $background, $backgroundmobile, $this;
$this = $(this);
$background = $(this).attr('data-background');
$backgroundmobile = $(this).attr('data-background-mobile');
if ($this.attr('data-background').substr(0, 1) === '#') {
return $this.css('background-color', $background);
} else if ($this.attr('data-background-mobile') && device.mobile()) {
return $this.css('background-image', 'url(' + $backgroundmobile + ')');
} else {
return $this.css('background-image', 'url(' + $background + ')');
}
});
}
});
Шаг 3
Создайте файл CSS с именем slider.css, используя приведенный ниже код, чтобы придать слайдеру профессиональный стиль.
.ct-slick-arrows--type2 .slick-prev,
.ct-slick-arrows--type2 .slick-next {
opacity: 0.85;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
-webkit-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
.ct-slick-arrows--type2 .slick-prev:before,
.ct-slick-arrows--type2 .slick-next:before,
.ct-slick-arrows--type2 .slick-prev:after,
.ct-slick-arrows--type2 .slick-next:after {
background-color: #fff;
height: 15px;
height: 1.5rem;
width: 70px;
width: 7rem;
}
.ct-slick-arrows--type2 .slick-prev:before,
.ct-slick-arrows--type2 .slick-next:before {
margin-top: -20px;
margin-top: -2rem;
}
.ct-slick-arrows--type2 .slick-prev:after,
.ct-slick-arrows--type2 .slick-next:after {
margin-top: 20px;
margin-top: 2rem;
}
.ct-slick-arrows--type2 .slick-prev:hover:before,
.ct-slick-arrows--type2 .slick-next:hover:before {
margin-top: -20px;
margin-top: -2rem;
}
.ct-slick-arrows--type2 .slick-prev:hover:after,
.ct-slick-arrows--type2 .slick-next:hover:after {
margin-top: 20px;
margin-top: 2rem;
}
.ct-slick-arrows--type2 .slick-prev:hover:active,
.ct-slick-arrows--type2 .slick-next:hover:active {
opacity: 1;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
.ct-slick-arrows--type2 .slick-prev {
left: 10px;
left: 1rem;
}
.ct-slick-arrows--type2 .slick-prev:before {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.ct-slick-arrows--type2 .slick-prev:after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.ct-slick-arrows--type2 .slick-prev:hover:before {
margin-top: -27px;
margin-top: -2.7rem;
-webkit-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.ct-slick-arrows--type2 .slick-prev:hover:after {
margin-top: 27px;
margin-top: 2.7rem;
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.ct-slick-arrows--type2 .slick-next {
right: 10px;
right: 1rem;
}
.ct-slick-arrows--type2 .slick-next:before,
.ct-slick-arrows--type2 .slick-next:after {
left: auto;
right: 0;
}
.ct-slick-arrows--type2 .slick-next:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.ct-slick-arrows--type2 .slick-next:after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.ct-slick-arrows--type2 .slick-next:hover:before {
margin-top: -27px;
margin-top: -2.7rem;
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.ct-slick-arrows--type2 .slick-next:hover:after {
margin-top: 27px;
margin-top: 2.7rem;
-webkit-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
}
#home.ct-header.ct-header--slider {
background-size: cover;
}
.ct-header .ct-slick {
margin-bottom: 0;
}
.slick-initialized .slick-slide {
display: block;
}
.ct-u-display-tablex {
display: table;
width: 100%;
height: 600px;
}
.ct-u-display-tablex > .inner {
display: table-cell;
width: 100%;
vertical-align: middle;
}
.ct-header h1.big {
font-size: 6.7rem;
line-height: 1;
color: #fff;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
padding-top: 50px;
}
.ct-header p {
font-size: 2.3rem;
line-height: 1.1;
margin: 30px 0 40px;
color: #fff;
}
.btn-transparent {
background-color: transparent;
border: 3px solid #fff;
color: white;
}
.ct-slick .slick-track,
.ct-slick .slick-list,
.ct-slick .item,
.ct-slick .slick-item {
min-height: inherit;
}
.ct-slick .item {
background-size: cover;
}
.slick-list {
height: 600px;
}
Шаг 4
Добавьте следующее в заголовок вашего HTML-файла, чтобы включить Slick Slider.
<link href="slider.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" type="text/css" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js" type="text/javascript"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="slick-bg.js"></script> <script> $(document).ready(function(){ $('.ct-slick-homepage').slick({ }); }); </script>
Теперь у вас есть все инструменты, необходимые для добавления главного изображения с помощью Slick Slider на ваш сайт! Мощь Slick Slider часто может создать кривую обучения для разработчиков, и наша серия Slick Slider направлена на то, чтобы обойти эту кривую и предоставить мощь Slick Slider в ваши руки без необходимости глубокого погружения.
Демо на JSFiddle
Скачать с GitHub
Предоставлено вам командой Solodev. Solodev — это облачная система управления веб-контентом, которая дает пользователям свободу воплощать в жизнь удивительные веб-дизайны.
