Responsive Versatile Carousel Library For Images – Sebastian Carousel

Sebastian Carousel is a simple, responsive, flexible and feature-rich carousel JavaScript library designed to showcase your images in a fashion way.

How to use it:

Insert the stylesheet ‘sebastian-carousel.css’ and JavaScript ‘sebastian-carousel.js’ into your html document.

<link href="css/sebastian-carousel.css" rel="stylesheet">
<script src="js/sebastian-carousel.js"></script>

Add your images to the carousel and config the Sebastian Carousel library using the following ‘data’ attributes:

• data-sc: required
• data-sc-theme: ‘fullwidth’, ‘content-dark’, ‘content-light’, ‘social’, ‘editorial
• data-sc-autostart: whether to start the autoplay on page load
• data-sc-pagination: whether to show the carousel pagination
• data-sc-showArrows: whether to show the carousel navigation
• data-sc-interval: autoplay interval in milliseconds
• data-sc-effect: ‘fade’ or ‘slide’

<div id="demo" 
     data-sc 
     data-sc-theme="fullwidth" 
     data-sc-autostart="true">
  <div>
      <img src="1.jpg">
  </div>
  <div>
      <img src="2.jpg">
  </div>
  <div>
      <img src="3.jpg">
  </div>
  <div>
      <img src="4.jpg">
  </div>
  <div>
      <img src="5.jpg">
  </div>
  ...
</div>

You can also override the default options in the JavaScript as these:

{
  effect: 'fade',
  pagination: true,
  showArrows: true,
  autoStart: false,
  theme: 'fullwidth',
  interval: 3000
};

Changelog:

08/10/2018

• Fixes for when there’s only one slide or no slides