Simple Carousel

About

Simple Carousel is a library that can generate a simple carousel for you. This carousel will fit to your jumbotron section. Because the width and height is relative to your viewport, which mean the carousel size will fill to your entire screen. Although you can custom the carousel the width and height.

Slider - Arrow button to navigate the carousel items.
Dots - An indicator for active carousel item, and also can be used as navigator.
Autoplay - This carousel can automaticly slide itself. (can be disabled)
Backdrop - Adjust the backdrop opacity of your carousel.

Installation

Javascript

Usage

1. Attach the css and js file on your html file.

<!-- Place this <link> tag inside the <head> tag -->
<link rel="stylesheet" href="path_to/simple-carousel.css">

<!-- Place this <script> tag at the end of your <body> tag -->
<script src="path_to/simple-carousel.js"></script>

2. Make a carousel container with an id that contains the as the carousel items.

<div id="myCarousel">
  <img src="path_to/your_image_1.jpg">
  <img src="path_to/your_image_2.jpg">
  <img src="path_to/your_image_3.jpg">
  <img src="path_to/your_image_4.jpg">

  <!-- Add more image if you want -->
</div>

3. Initialize the carousel

<!-- Make sure to place this script under the simple-carousel.js script -->
<script>
  let myCarousel = new Carousel('myCarousel');
</script>

Configuration

Simple Carousel provide some features that you can configure as you want. The default configuration is like the previous demo. Here is the list of the configuration that you can modify:

width - Set the width of the carousel. (Default: 100%)
height - Set the height of the carousel. (Default: 100vh)
navigation_mode - The layout of carousel navigation UI. You can set it with intenger value (0-5).
backdrop_opacity - Adjust the backdrop opacity of your carousel. You can set it with float value (0-1).
autoplay - Autoplay the carousel presentations. (Default: true)
autoplay_delay - Set the delay every times presentation changing in miliseconds. (default: 4000)
press_cooldown - Prevent user from pressing navigation button rapidly. (default: true)

Take a look at some demo bellow :

1. Default Configuration

By default, Simple Carousel has 100% width and 100vh height.

let example_1 = new Carousel('example_1');

2. Custom Width and Height

To set your own configuration, add the second argument with object. In this case, you can use properties width and height to modify the size of the carousel.

let example_2 = new Carousel('example_2', {
  width: '340px',
  height: '170px'
});

3. Navigation Layouts

Simple Carousel has build-in UI layouts that you can change as you want. Look at the example bellow.

let example_3 = new Carousel('example_3', {
  height: '400px',
  navigation_mode: 3
});

You can set navigation_mode property with integer value within range 0-5. Here is the descriptions of navigation_mode value :

0 or except 1-5 - Default layout (slider & dots).
1 - Slider only.
2 - Dots only.
3 - Bottom center layouts.
4 - Bottom right slider buttons.
5 - Hidden navigation (automaticaly set the autoplay to true)

4. Autoplay

Autoplay can be enabled or disabled, by setting the autoplay property to true or false. You can also set the autoplay_delay value with milliseconds.

let example_4 = new Carousel('example_4', {
  height: '400px',
  navigation_mode: 1,
  autoplay: false
});

let example_5 = new Carousel('example_5', {
  height: '400px',
  navigation_mode: 2,
  autoplay_delay: 8000
});

5. Backdrop Opacity

Adjust the backdrop opacity of your carousel, by setting the backdrop_opacity with value between 0-1. The greater the value, the backdrop will get more darker.

let example_6 = new Carousel('example_6', {
  height: '400px',
  navigation_mode: 4,
  backdrop_opacity: 0.5
});

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please make sure to update tests as appropriate.