The main focus of Roundabout is quick and easy setup, with plenty of customization options.
To add Roundabout to your project,
download the plugin and add the files to your project. Create another JavaScript file (or use the provided
roundabout-settings.js) to contain your settings.
Link
roundabout-style.css to the page. Your HTML document should look like this:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<link href="path/to/roundabout-style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- ... -->
<script type="module" src="path/to/roundabout-settings.js"></script>
</body>
</html>
Create a new carousel by calling the Roundabout object, passed an object containing all of your settings. It does not need to be stored in a variable, except when using the scripting module.
import Roundabout from "./path/to/roundabout.min.js";
new Roundabout({
// include your settings here...
});
You have two options to create the layout.
To keep everything in Javascript, use the 'pages' setting to define the content of each page. Use the 'parent' setting to select the element to generate the carousel inside of.
import Roundabout from "./path/to/roundabout.min.js";
new Roundabout({
pages: [
{
backgroundImage: "../images/myFirstPage.png",
},
// ...
],
parent: "#html-element-selector"
});
Alternatively, for a more intuitive layout, you can use HTML to define the content of each page.
<!DOCTYPE html>
<html>
<body>
<div id="my-roundabout-template">
<div>
<!-- Elements in the first page -->
</div>
<div>
<!-- Elements in the second page -->
</div>
<!-- More divs corresponding to pages -->
</div>
</body>
</html>
Then point the Roundabout constructor at the template. You can still use the 'pages' setting for extra functionality, like background images.
import Roundabout from "./path/to/roundabout.min.js";
new Roundabout({
template: "#my-roundabout-template",
});
Multiple carousels can be created on one page by defining multiple instances of Roundabout. Be sure to give them unique CSS selectors with the
id property so that they can be interacted with individually.
import Roundabout from "./path/to/roundabout.min.js";
new Roundabout({
id: "#carouselNumberOne"
// ...
});
new Roundabout({
id: "#carouselNumberTwo"
// ...
});
- - -
Included with the download is a
roundabout-settings.js file, which contains a simple template for a new carousel.
Settings do not need to be declared in any specific order.
You can use the Playground (link in header) to mess with almost all settings in a setup-free environment.