sancarousel v1.3.1

SanCarousel

A simple Carousel easy to use and very customizable.

Overview

SanCarousel is a performance focused library that helps you create a slide easily and very customizable in just a few steps.

Getting started

npm

npm install sancarousel --save

yarn

yarn add sancarousel

Usage

Example 1

import React from 'react';
import SanCarousel from 'sancarousel';

import slide1 from '../assets/slide_1.png'
import slide2 from '../assets/slide_1.png'

const slides = [
  {
    img: slide1,
    url: '/link-1'
  },
  {
    img: slide2,
    url: '/link-2'
  }
];

const App = () => {
  <SanCarousel slides={slides} />
}

You can pass several properties to SanCarousel and customize it the way you prefer

Example 2

import React from 'react';
import SanCarousel from 'sancarousel';

import slide1 from '../assets/slide_1.png'
import slide2 from '../assets/slide_1.png'

const slides = [
  {
    img: slide1,
    url: '/link-1'
  },
  {
    img: slide2,
    url: '/link-2'
  }
];

const App = () => {
  <SanCarousel
    slides={slides}
    height="350px"
    slideSize="90%"
    autoPlay={2000}
    focusSlide
    spaceBetweenSlides="10px"
  />
}

Properties available

• slides: Array with images and urls (optional) to be displayed

• transitionTime: Transition time from one slide to another

• autoPlay: Autoplay Speed in milliseconds

• width: Main container width

• height: Main container height

• slideSize: Slide size to be shown

• dots: Show dot indicators

• dotsDiameter: Diameter of dot indicator

• marginRightDots: right margin of dots container

• marginBottomDots: bottom margin of dots container

• arrows: Prev/Next Arrows

• spaceBetweenSlides: Space between slides

• focusSlide: Enable focus on selected element (hover)

• slideFocusColor: Focus color on the selected element

• focusSlideThickness: Focus thickness on the selected slide

• containerBorderRadius: Main container radius size

• slideBorderRadius: Slide size radius