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.
As always, we need to start somewhere. Let's begin by downloading the
ResponsiveSlideslibrary from http://responsiveslides.com/; the current version is 1.5.4 at the time of writing. Save this in thejssubfolder of our project folder.We also need the styling file for
ResponsiveSlides, along with a copy of the jQuery library. Extract a copy ofcarousel.css, saving it in thecsssubfolder of our project folder; then do the same for jQuery in thejssubfolder.Next, extract a copy of
carousel.htmlfrom the code download that accompanies this book; add the following code between the empty<script>tags immediately below the link to theresponsiveslides.jslibrary:<script> $(function () { $("#slides1").responsiveSlides({ auto: false, pagination: true, nav: true, fade: 500, maxwidth: 800 }); }); <script>Save the file. If we preview the results in a browser, we will see our carousel appear.
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.