FlexSlider #2

FlexSlider #2

by Solodev CMS

HTML

<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>
<div class="outerWideSlider">
  <div class="wideSlider">
    <div class="flexslider" data-startat="0">
      <ul class="slides">
        <li>
          <img alt="" src="https://www.solodev.com/assets/flexslider/slide1.jpg">
          <div class="text-caption">
            <div class="inner">
              <h2>Slide #1</h2>
              <p>This is the text for slide #1</p>
            </div>
          </div>
        </li>
        <li>
          <img alt="" src="https://www.solodev.com/assets/flexslider/slide2.jpg">
          <div class="text-caption">
            <div class="inner">
              <h2>Slide #2</h2>
              <p>This is the text for slide #1</p>
            </div>
          </div>
        </li>
        <li>
          <img alt="" src="https://www.solodev.com/assets/flexslider/slide3.jpg">
          <div class="text-caption">
            <div class="inner">
              <h2>Slide #3</h2>
              <p>This is the text for slide #1</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

CSS

.flex-container a:active,
.flex-container a:focus,
.flexslider a:active,
.flexslider a:focus {
  outline: 0;
}
.flex-control-nav,
.flex-direction-nav,
.slides {
  margin: 0;
  padding: 0;
  list-style: none;
}
@font-face {
  font-family: flexslider-icon;
  src: url(/core/fileparse.php/6/urlt/_resources/fonts/flexslider-icon.eot);
  src: url(/_resources/fonts/flexslider-icon.eot?#iefix) format('embedded-opentype'), url(/core/fileparse.php/6/urlt/_resources/fonts/flexslider-icon.woff) format('woff'), url(/core/fileparse.php/6/urlt/_resources/fonts/flexslider-icon.ttf) format('truetype'), url(/_resources/fonts/flexslider-icon.svg#flexslider-icon) format('svg');
  font-weight: 400;
  font-style: normal;
}
.flexslider {
  padding: 0;
}
.flexslider .slides > li {
  display: none;
  -webkit-backface-visibility: hidden;
}
.flexslider .slides img {
  width: 100%;
  display: block;
}
.flex-pauseplay span {
  text-transform: capitalize;
}
.slides:after {
  content: "\0020";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
html[xmlns] .slides {
  display: block;
}
* html .slides {
  height: 1%;
}
.no-js .slides > li:first-child {
  display: block;
}
.flexslider {
  margin: 0 0 60px;
  background: #fff;
  border: 4px solid #fff;
  position: relative;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  zoom: 1;
}
.flex-viewport {
  max-height: 2000px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.loading .flex-viewport {
  max-height: 300px;
}
.flexslider .slides {
  zoom: 1;
}
.carousel li {
  margin-right: 5px;
}
.flex-direction-nav {
  *height: 0;
}
.flex-direction-nav a {
  text-decoration: none;
  display:...

JavaScript

$(document).ready(function () {

$(".wideSlider").each(function () {
    var $this = $(this);
    var $slider = $this.find(".flexslider");
    var startat = $slider.attr("data-startat");
    if (startat = 0) {
    }
    $slider.flexslider({
      animation: 'slide',
      easing: 'linear', // // Default: swing   {NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
      // useCSS: false, // Default: true
      slideshow: true, // Default: True  //Boolean: Animate slider automatically
      slideshowSpeed: 7000, // Default: 7000 // Integer: Set the speed of the slideshow cycling, in milliseconds
      animationLoop: true, // Default: true
      startAt: startat,
      controlNav: false,
      directionNav: true,
      nextText: " ",
      prevText: " ",
      start: function (slider) {
        // $('.wideSlider .text-caption').fadeOut(100);
        // var $s = slider.slides.eq(slider.currentSlide);
        // $s.find('.text-caption').show();
      },
      before: function (slider) {
        // $('.wideSlider .text-caption').hide();
      },
      after: function (slider) {
        // var $s = slider.slides.eq(slider.currentSlide);
        // $s.find('.text-caption').show();
      }
    });
  });
  })