Roundabout - a framework for creating a jQuery-based carousel

Most recently, I began to learn JavaScript, then jQuery, and now I’m slowly turning to plugins and frameworks built on the basis of the above-mentioned technologies. In parallel with the study of JS, I make up small business cards, and now I have a need to make a “carousel” of pictures. It turned out that there are ready-made solutions, and I want to tell you about one of them. This article is an excerpt from the original site of the RounAbout framework.

Introduction

This lesson will help turn an unordered list into a carousel. Although it’s not difficult, it is assumed that you can correctly create an html file, include CSS and JavaScript in it, and see how it all works.

Training.

Before we start rummaging through the code, you need to download all the scripts and connect them. You need:

• Open the html file in your favorite editor
• jQuery
• Roundabout

Let's save all the files in one folder. If you want to distribute files according to their types - do not forget to replace the paths in the examples!
')

Preparation html-page.

Inside the body, add the following code:

<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 

Scripts

Let's connect the scripts we need. To do this, simply add the following code to the bottom of the body tag (as it is written on the framework site, it would be better to connect them to the head).

 <script src="jquery.js"></script> <script src="jquery.roundabout.js"></script> 

Carousel.

Below the connected scripts add the following code:

 <script> $(document).ready(function() { $('ul').roundabout(); }); </script> 

What's going on here?

We create an event for jQuery when the document is finished loading. As soon as the html-page is loaded, the browser will reflect all the elements, the function will be launched.
Inside the function, using jQuery, we select all elements with the ul tag and apply the roundabout function to them. Save the html-code and try to run it in the browser. You should see something like a merry-go-round.

CSS.

Carousels require some CSS adjustments to look their best. The CSS file is not connected, and it is not needed here, it’s not so much a big document, just paste the following code into the head tag:

 <style> .roundabout-holder { list-style: none; padding: 0; margin: 0; height: 5em; width: 5em; } .roundabout-moveable-item { height: 4em; width: 4em; cursor: pointer; background-color: #ccc; border: 1px solid #999; } .roundabout-in-focus { cursor: auto; } </style> 

The class .roundabout-holder is added to ul itself. It is necessary to remove the list markers and set the size selected for the carousel.
The .roundabout-moveable-item class is added only to li. The li elements will be sized, and when you hover, the mouse pointer will change to “hand”.
The .roundabout-in-focus class is added to li when the element is in front (focus). To such an element we will return a pointer to the original one.

CSS settings.

Using the flexible configuration of the carousel through CSS, changing it becomes more of an art than a science. Try changing the width of the .roundabout-holder class to 10em. See how the elements are filled? The carousel will do everything possible to fill the entire area allocated to it, however, some elements will go beyond the established limits when moving.
Play around with these settings of the carousel, the more spontaneous your changes will be, the merrier the carousel will become (the word crazy is used in the original).

Settings.

Before that, we made the simplest carousel with preset parameters, but in fact, when calling a function, we can pass an object with settings, thereby more flexibly setting our carousel.
This is done using the following code:

 <script> $(document).ready(function() { $('ul').roundabout({ //  }); }); </script> 

Available options.

In fact, there are quite a few of these options, but now we will try to use one of the most interesting.
Add to html-code:

 <a href=”#” class=”.next”></a> 

In roundabout, pass the following object property:
btnNext: “.next”
This property passes in the form of a string jQuery selector. Now, by clicking on the .next class link, we can switch the objects of the carousel from left to right. Practice with the reverse property of btnPrev, it defines the object that switches the elements of the carousel in the reverse order. When transferring several parameters of the object, list them separated by commas. One of the interesting properties, in my opinion, is autoplay, with true and false values. It is responsible for automatically switching slides. When you install autoplay, the duration property is needed, it is measured in milliseconds, and it assigns the time that must pass before switching to the next slide.
Full list of properties can be found here .

Thank you for reading the lesson to the end!