GitHub - Ghostcode13/flexslider-implementation: An effective hero slider provides users with the most valuable content on your site aligned with your goals and prompts them to take action. In Part I of our FlexSlider Series, we provide you with the code you need to easily add a hero slider to your homepage using the fully responsive jQuery toolkit FlexSlider by woothemes.

An effective hero slider provides users with the most valuable content on your site aligned with your goals and prompts them to take action. In Part I of our FlexSlider Series, Solodev provides you with the code you need to easily add a hero slider to your homepage using the fully responsive jQuery toolkit FlexSlider by woothemes.

Tutorial

For detailed instructions, view Solodev's Adding a Hero Slider to your Website Using FlexSlider article.

Demo

Check out a working example on JSFiddle.

HTML

The flexslider has the following HTML markup.

<!-- @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="images/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="images/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="images/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>

JavaScript

The following JavaScript needs to be initiated on page load.

$(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
}})

CSS

All necessary CSS is in flex.css

External Includes

This tutorial includes the following third-party resources:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.2/flexslider.css">
<link rel="stylesheet" href="flex.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.2/jquery.flexslider.js"></script>