Эффективный главный слайдер предоставляет пользователям наиболее ценный контент на вашем сайте, соответствующий вашим целям, и побуждает их к действию. В части I нашей серии FlexSlider мы предоставим вам код, необходимый для простого добавления главного слайдера на вашу домашнюю страницу с помощью полностью адаптивного набора инструментов jQuery FlexSlider by woothemes.
Ниже приведены HTML, CSS и JavaScript для добавления этой функциональности на ваш сайт.
Шаг 1
Добавьте приведенный ниже HTML-код туда, где вы хотите разместить свой главный слайдер.
<!-- @zone - hightlighted --> <!--Showshow--> <div class="container slider-container"> <div class="row"> <div class="col-md-12 slider-left"> <section class="flexslider-wrapper"> <div id="main-slider" class="flexslider" data-transition="fade" data-page-class="slider-full-width"> <div class="slides"> <div data-slide-alt="alt" data-slide-bg-stretch=true class="slide slide-bg" data-slide-bg="https://www.solodev.com/assets/flexslider/slide1.jpg"> <div class="slide-caption"> <div class="row"> <div class="col-md-12"> <div class="slide-text"> <div class="slide-title">This is Slide #1</div> This is text for the first slide. </div> </div> </div> </div> </div> <div data-slide-alt="alt" data-slide-bg-stretch=true class="slide slide-bg" data-slide-bg="https://www.solodev.com/assets/flexslider/slide2.jpg"> <div class="slide-caption"> <div class="row"> <div class="col-md-12"> <div class="slide-text"> <div class="slide-title">This is Slide #2</div> This is text for the second slide. </div> </div> </div> </div> </div> <div data-slide-alt="alt" data-slide-bg-stretch=true class="slide slide-bg" data-slide-bg="https://www.solodev.com/assets/flexslider/slide3.jpg"> <div class="slide-caption"> <div class="row"> <div class="col-md-12"> <div class="slide-text"> <div class="slide-title">This is Slide #3</div> This is text for the third slide. </div> </div> </div> </div> </div> </div> </section> </div> </div> </div> </div>
Шаг 2
Добавьте приведенный ниже CSS в основную таблицу стилей вашего веб-сайта.
.slider_background{ background:#eee; } .slide-caption { padding:0; height:76px; margin:0; margin-top:34%; width:auto; } .slide-caption .btn-primary{ width:100%; height:100%; display:inline-block; vertical-align: middle; font-weight:normal; font-size:18px; } .slide-caption .btn-primary span{ display:inline-block; vertical-align: middle; } .centerer{ height:100%; width:0; display:inline-block; vertical-align: middle; } .slide-caption{ color:#fff; background-color:#09455c; } .slider-container{ overflow:hidden; } .slide-caption .row, .slide-caption .col-md-2{ height:100%; } .slide-caption .slide-text{ padding:6px 45px; } .slider-container .slider-left, .slider-container .slider-right { padding:0; margin-bottom: -9999px; padding-bottom: 9986px; } .slider-right{ padding:15px; background:#09455c; } .slider-right h2{ font-weight:normal!important; font-family: "Museo-300", Helvetica Neue, Helvetica, Arial, sans-serif; color:#fff !important; text-transform: uppercase; font-size:18px; line-height: 26px; margin: 15px; padding-left: 15px; } .slider-right ul{ margin:0; padding:0; list-style:none; } .slider-right .arrow{ -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; line-height:normal; float:right; color:#346100; font-weight: 100; font-size:14px; } .slide-title{ margin-bottom: 3px; font-size:20px; color:#fff; } .slider-right ul li a{ -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; display:block; padding:20px 30px; background:#f6f5f6; text-transform: uppercase; font-size:16px; color:#475055; margin-bottom: -1px; } .slider-right ul li a:hover{ background:#1489b5; text-decoration:none; color:#fff; } .slider-right ul li a:hover .arrow{ color:#fff; } .slider-right .glyphicon{ display:inline-block; }
Шаг 3
Добавьте приведенный ниже код JavaScript в файл с именем slider.js.
$(document).ready(function () { if (jQuery().flexslider) { //flexslider ticker $('.flexslider-ticker').each(function() { var tickerSettings = { animation: "slide", animationLoop: false, selector: ".items > .item", move: 1, controlNav: false, slideshow: true, direction: 'vertical' }; $(this).flexslider(tickerSettings); }); // flexsliders $('.flexslider').each(function() { var sliderSettings = { animation: $(this).attr('data-transition'), selector: ".slides > .slide", controlNav: false, smoothHeight: true, prevText: "", nextText: "", sync: $(this).data('slidernav') || '', start: function(slider) { if (slider.find('[data-slide-bg-stretch=true]').length > 0) { slider.find('[data-slide-bg-stretch=true]').each(function() { if ($(this).data('slide-bg')) { $(this).backstretch($(this).data('slide-bg')); // $(this).data('slide-bg'); } }); } } }; $('html').addClass('has-flexslider'); $(this).flexslider(sliderSettings); }); $(window).delay(1000).trigger('resize'); //make sure height is right load assets loaded }})
Шаг 4
Добавьте приведенные ниже ссылки на страницу, где находится ваш слайдер.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.2/flexslider.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.2/jquery.flexslider.js"></script>
Первоначально опубликовано здесь, в блоге Solodev Web Design
Получайте ежедневные учебные пособия по веб-дизайну на свой почтовый ящик, подписавшись на блог Solodev на странице solodev.com/blog/!
Предоставлено вам командой Solodev. Solodev — это облачная система управления веб-контентом, которая дает пользователям свободу воплощать в жизнь удивительные веб-дизайны.