Responsive Sliders

Full width slider

  • descriptive text 1
  • descriptive text 2
  • descriptive text 3

Add this to <head> of the page

      
<link rel="stylesheet" type="text/css" href="/css/flexslider.css">

Add slider code to <body> of the page


      <div class="flexslider">
        <ul class="slides">
          <li><a href="#"><img src="/samples/img/test_img1.jpg" alt="feature 1" title="feature 1"></a></li>
          <li><a href="#"><img src="/samples/img/test_img2.jpg" alt="feature 2" title="feature 2"></a></li>
          <li><a href="#"><img src="/samples/img/test_img3.jpg" alt="feature 3" title="feature 3"></a></li>
          <li><a href="#"><img src="/samples/img/test_img4.jpg" alt="feature 4" title="feature 4"></a></li>
        </ul>
      </div>

Add this code below footcontent.htm

      
<script src="/js/jquery.flexslider.js"></script> 
<script type="text/javascript">
   // Can also be used with $(document).ready()
  $(window).load(function() {
  $('.flexslider').flexslider({
    animation: "fade",
  	pausePlay: true,
  	pauseText: "Pause",
  	playText: "Play",
  	prevText: "Previous",
  	nextText: "Next",
  	controlNav: false
  });
});
</script>

Two/thirds width slider

  • feature 1
  • feature 2
  • feature 3
  • feature 4

Logo Carousel

Add this to <head> of the page

      
<link rel="stylesheet" type="text/css" href="/css/flexsliderLogo.css">

Add slider code to <body> of the page


<div class="flexsliderLogo">
    <ul class="slides">
      <li class="slide" >
        <a href="#">
          <img src="/samples/img/business_logos/abb.png" alt="ABB Logo" draggable="false">
        </a> 
      </li>
      <li class="slide" >
        <a href="#">
          <img src="/samples/img/business_logos/abc.png" alt="ABC Logo" draggable="false">
        </a>
      </li>
    </ul>
  <ul class="flex-direction-nav">
    <li>
      <a class="flex-prev" href="#">Previous</a>
    </li>
    <li>
      <a class="flex-next" href="#">Next</a>
    </li>
  </ul>
  <div class="flex-pauseplay"></div>
</div>

Add this code below footcontent.htm

      
<script src="/js/jquery.flexsliderLogo.js"></script> 
<script type="text/javascript">
$(window).load(function() {
  $('.flexsliderLogo').flexsliderLogo({
    direction: "horizontal",
    slideshow: true,
    slideshowSpeed: 1500,
    animation: "slide",
    animationSpeed: 600,
    animationLoop: true,
    reverse: false,
    smoothHeight: false,
    pausePlay: false,
    pauseText: "Pause",
    playText: "Play",
    touch: true,
    itemWidth: 190,
    move: 1,
    minItems: 4,
    maxItems: 6,
    controlNav: false,
    pauseOnAction: true,
    pauseOnHover: true,
    randomize: true,
  });
});
</script>
View full list of Flexslider properties