EverWeb Codebox

Responsive Slides

Why Responsive?

ResponsiveSlides.js is a jQuery plugin that can create an auto slider which will stop on mouseover. Captions are supported and both the captions and the images can be created as hyperlinks.

The "responsive" part can be made use of by making the slider auto adjust in the HTML Snippet. This means that the same slider can be used for both the regular and mobile version of the site.

Although the example here focuses on an auto slideshow, it can be made to operate manually with both back/forward buttons and pageination if desired.

<ul class="rslides">

<li><a href="#"><img src="../responsiveslides/img/a1.jpg" alt="Alt Text"></a><p>Simple Responsive Slideshow</p></li>

<li><a href="#"><img src="../responsiveslides/img/a2.jpg" alt="Alt Text"></a><p>World's Tallest Building</p></li>

<li><a href="#"><img src="../responsiveslides/img/a3.jpg" alt="Alt Text"></a><p>Chess Champion</p></li>

<li><a href="#"><img src="../responsiveslides/img/a4.jpg" alt="Alt Text"></a><p>Biker in Black</p></li>

<li><a href="#"><img src="../responsiveslides/img/a5.jpg" alt="Alt Text"></a><p>Canyon Sunset</p></li>

<li><a href="#"><img src="../responsiveslides/img/a6.jpg" alt="Alt Text"></a><p>Sunroof</p></li>

</ul>

  • Simple Responsive Slideshow

  • World's Tallest Building

  • Chess Champion

  • Biker in Black

  • Canyon Sunset

  • Sunroof

HTML

The HTML is an unordered list of <img> tags which, in this case, are contained in an <a> tag so that each slide can be a hyperlink to another page or file.

The captions are inserted using a paragraph - <p></p> - which is styled in the CSS shown below.

Any words inside this paragraph can be created as a hyperlink by enclosing them in <a></a> and the styles for the hyperlink are included in the CSS shown below...

<style type="text/css">

.rslides {

     width: 900px;

     height: 475px;

     background: #000;

     border: 1px solid #ccc;

}

.rslides p {

       font: 15px 'TrebuchetMS', Verdana, sans-serif;

       color: #bbb;

       margin: 0;

       padding: 0;

       text-align: center;

       line-height: 25px;

       cursor:pointer;

}

.rslides a {

     color: #ccc;

     text-decoration: underline;

  }

.rslides a:hover {color: #FF0000}

</style>

CSS

In the above "auto" can be true or false

"pause" is "true" for pause on hover

"speed" is the slide transition speed in milliseconds

"timeout" is the time that the slide is shown for in milliseconds.

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

<script type="text/javascript" src="../responsiveslides/responsiveslides.min.js"></script>

<script type="text/javascript">

    $(function () {

      $(".rslides").responsiveSlides({

        auto: true,

        pause: true,

        speed: 1200,

        timeout: 4000

      });

});

</script>

Javascript

The slider styles are straightforward. Note that the slider height has to be increased to accomodate the caption if used.

In the example on this page, the image height is 450px and the caption paragraph line height is 25px giving a total slider div height of 475px.

The font family, size and color can be varied in .rslides p and the hyperlink color and mouseover color can be altered in .rslides a and .rslides a:hover