Responsive Versatile Carousel Library For Images – Sebastian Carousel

Category: Javascript , Slider , Slideshow | August 10, 2018
Author: SebasWebDev
Views Total: 781
Official Page: Go to website
Last Update: August 10, 2018
License: MIT

Preview:

Responsive Versatile Carousel Library For Images – Sebastian Carousel

Description:

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

One thought on “Responsive Versatile Carousel Library For Images – Sebastian Carousel

  1. Brian Duncan

    as it says on the box, ‘simple’. indeed it was simple and perfect to use as a slider. great job !

    Reply

Leave a Reply