Building a responsive carousel

So far we've covered a lot of different techniques to help us produce responsive content. Most of it has been simple examples in a development context. It's time to take a look at a couple of examples of real-world applications where responsive functionality has been put to good use. Our first example is in the form of a responsive carousel. There are dozens of example libraries online that can be used to create one, so there is no need to build from scratch!

Let's take a look at one of my favorites—ResponsiveSlides.js; it's a simple library that provides a useful solution, but doesn't try to achieve everything. We'll borrow one of their examples to see how it works.

1. As always, we need to start somewhere. Let's begin by downloading the ResponsiveSlides library from http://responsiveslides.com/; the current version is 1.5.4 at the time of writing. Save this in the js subfolder of our project folder.
2. We also need the styling file for ResponsiveSlides, along with a copy of the jQuery library. Extract a copy of carousel.css, saving it in the css subfolder of our project folder; then do the same for jQuery in the js subfolder.

   Note

   The ResponsiveSlides package comes with jQuery 1.8.3; I've tested it with Version 2.1.1 of jQuery with no apparent ill effects.

3. Next, extract a copy of carousel.html from the code download that accompanies this book; add the following code between the empty <script> tags immediately below the link to the responsiveslides.js library:

   <script>
     $(function () {
       $("#slides1").responsiveSlides({ auto: false, pagination: true, nav: true, fade: 500, maxwidth: 800
       });
     });
   <script>

4. Save the file. If we preview the results in a browser, we will see our carousel appear.
   
5. Try resizing the browser window now. We should see the carousel reduce in size but continue to scroll through the images with no loss of quality.

There are plenty of examples of responsive carousels available online—two such examples are WOW Slider at http://wowslider.com/, with an example of what is possible at http://www.wowslider.com/responsive-image-gallery-glass-collage.html, Owl Carousel (http://www.owlgraphic.com/owlcarousel) and BXSlider, available at http://bxslider.com/. It is a matter of trying a selection and choosing the one that suits your requirements.

Note

There is a prebuilt working example on the code download that accompanies this book. Extract copies of carousel-finished.html and carousel-finished.css, then rename them to carousel.html and carousel.css. You will need to extract the accompanying libraries, as outlined in this exercise, for it to operate correctly.