EverWeb Codebox

Mobile Slider

Finger Swipe Slideshow

Autoplay banner style sliders have no place on a mobile website and should be replaced by a finger swiping one. The example on this page uses Cycle Slider which requires minimal HMTL and CSS. Custom Previous and Next buttons have been added so that it will work on non mobile devices for demo purposes only.

As can be seen from the HTML, the captions are derived from the img alt attribute...

<div class="cycle-slideshow"

    data-cycle-fx=scrollHorz

    data-cycle-timeout=0

    data-cycle-swipe=true

    data-cycle-prev=".prev"

    data-cycle-next=".next"

    data-cycle-caption="#alt-caption"

    data-cycle-caption-template="{{alt}}"

    >

    <img src="../path to/img-0.jpg" alt="Cycle Slider..." />

    <img src="../path to/img-1.jpg" alt="… with Previous/Next controls." />

    <img src="../path to/img-2.jpg" alt="Navigation on mobile devices..." />

    <img src="../path to/img-3.jpg" alt="... is by finger swiping." />

    <img src="../path to/img-4.jpg" alt="Captions are displayed..." />

    <img src="../path to/img-5.jpg" alt="... using the image alt attribute." />

    <img src="../path to/img-6.jpg" alt="The caption font family..." />

    <img src="../path to/img-7.jpg" alt="... and color..." />

    <img src="../path to/img-8.jpg" alt="... can be changed in the CSS." />

    <img src="../path to/img-9.jpg" alt="Learn more at Monsters University" />

</div>

<!-- Empty div for captions -->

<div id="alt-caption" class="center"></div>

Cycle Slider...… with Previous/Next controls.Navigation on mobile devices...... is by finger swiping.Captions are displayed...... using the image alt attribute.The caption font family...... and color...... can be changed in the CSS.Learn more at Monsters University
Previous Next

Cycle Slider

HTML

Javascript

The javascripts can be downloaded from the Developer's website, dragged into Assets and referenced in the Footer Code box along wth jQuery like this...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="{!-ASSETSPATH-!}External%20Files/jquery.cycle2.min.js"></script>

<script src="{!-ASSETSPATH-!}External%20Files/jquery.cycle2.swipe.min.js"></script>

CSS

The styles used for the demo are shown below and are pasted into the page Head Code box.

<style type="text/css">

.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.cycle-slideshow {

     width: 100%;

     min-width: 300px;

     max-width: 600px;

     margin: 1% auto;

     margin-bottom: 0; padding: 0;

     position: relative;

       background: url(ewExternalFiles/spinner.gif) 50% 50% no-repeat;cursor: pointer}

.cycle-slideshow img {

    position: absolute; top: 0; left: 0;

    width: 100%; padding: 0; display: block;}

.cycle-slideshow img:first-child {

    position: static; z-index: 100;}

.center {

     font: 15px 'trebuchet MS', verdana, sans-serif;

     text-align: center;

     color: #ddd;

     cursor: pointer;

     background: #222;

     width: 100%;

     max-width: 600px;

     margin: 0 auto;

     padding: 5px 0;}

</style>

EverWeb Codebox Mobile Website Demo