EverWeb Codebox

Flex Slider

Manual Slideshow With Pageination

Flex Slider is well established and has many variations. This one has back/forward arrows which appear on mouseover and pageination dots to help the visitor see where they are and to navigate by if required.

Captions have been added just to show how easily it can be done.

  • Manual slider with back/forward arrows and pageination dots

  • San Francisco

  • Shasta County

  • Beached Angel

  • Safe Landing

  • Whiskeytown Lake

  • Eureka CA

  • Sunset in Glendora

  • Winter in Redding

  • Hitching California Style

  • The End

Like a lot of sliders, the HTML for Flex is a simple unordered list of image tags and the captions are implemented by inserting a styled paragraph.

Any slide can be turned into a hyperlink by wrapping the <img> tag in an <a> tag.

HTML

<div class="flexslider">

<ul class="slides">

<li><img src="..path to img 0.jpg" alt="" /><p class="flex-caption">Manual slider with back/forward arrows and pageination dots</p></li>

<li><img src="..path to img 1.jpg" alt="" /><p class="flex-caption">Caption 1</p></li>

<li><img src="..path to img 3.jpg" alt="" /><p class="flex-caption">Caption 2</p></li>

<li><img src="..path to img 4.jpg" alt="" /><p class="flex-caption">Caption 3</p></li>

<li><img src="..path to img 6.jpg" alt="" /><p class="flex-caption">Caption 4</p></li>

</ul>

</div>

A link to the stylesheet is inserted in the page Head Code box along with a paragraph style for the captions

CSS

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

<style type="text/css">

  .flex-caption {font: 15px 'Trebuchet MS', Verdana, sans-serif;color:#ffffff;text-align:center;margin:5px 0}

</style>

Javascript

The javascript requirements are a link to jQuery, to the jquery.flexslider.js and some setup javascript...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" defer src="..path to../jquery.flexslider.js"></script>

<script type="text/javascript">

    $(function(){

      SyntaxHighlighter.all();

    });

    $(window).load(function(){

      $('.flexslider').flexslider({

        animation: "slide",  //slide or fade

        animationSpeed: 2000, //transition speed

        controlNav: true,

        pauseOnHover: false,  //true for auto if required

         slideshow: false,  //true for auto and add slideshowSpeed: 7000

        start: function(slider){

          $('body').removeClass('loading');

        }

      });

    });

  </script>

Get more info from the Developer's Website.