Эффективный главный слайдер предоставляет пользователям наиболее ценный контент на вашем сайте, соответствующий вашим целям, и побуждает их к действию. В части 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>

Демо на JSFiddle

Скачать с GitHub

Первоначально опубликовано здесь, в блоге Solodev Web Design

Получайте ежедневные учебные пособия по веб-дизайну на свой почтовый ящик, подписавшись на блог Solodev на странице solodev.com/blog/!

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