Create a beautiful responsive carousel slider.

Animate.css library

Slider settings

We’ll be happy to help you!

By default slider has next settings:

            
{
    contentSrc: 'array',
    auto: true,
    autoplayInterval: 3500,
    animationType: 'fadeOut/fadeIn',
    animationTime: '',
    hoverAnimation: false,
    hoverAnimationType: 'pulse',
    constSliderHeight: false,
    overflowHidden: true,
    control: true,
}
            
        

You can change slider settings by next way:

• contentSrc - specify content to generate slides - type: string:
  • "array" (default) - in case the collection of slides is some array;
  • "html" - in case the collection of slides is html content of your container.
• auto - start slideshow when slider is within the user's screen (stop slideshow on hover) - type: boolean:
  • true (default);
  • false.
• autoplayInterval - autoplay interval timeout - type: number (ms).

  Autoplay interval have to be longer than two "animationTime".

• animationType - animation by Animate.css library - type: string:
  • "fadeOut/fadeIn" (default);
  • "fadeOutInDown/fadeOutInUp";
  • "fadeOutInDownBig/fadeOutInUpBig";
  • "fadeOutInLeft/fadeOutInRight";
  • "fadeOutInLeftBig/fadeOutInRightBig";
  • "fadeOutInLeftTop/fadeOutInRightBottom";
  • "fadeOutInLeftBottom/fadeOutInRightTop";
  • "backOutInDown/backOutInUp";
  • "backOutInLeft/backOutInRight";
  • "bounceOut/bounceIn"
  • "bounceOutInDown/bounceOutInUp";
  • "bounceOutInLeft/bounceOutInRight";
  • "flipOutY/flipInY";
  • "flipOutX/flipInX";
  • "lightSpeedOutInLeft/lightSpeedOutInRight";
  • "rotateOutInDownLeft/rotateOutInUpLeft";
  • "rotateOutInDownRight/rotateOutInUpRight";
  • "hingeOut/fadeIn";
  • "bounceOut/jackInTheBox";
  • "rollOut/rollIn";
  • "zoomOut/zoomIn";
  • "zoomOutInDown/zoomOutInUp";
  • "zoomOutInLeft/zoomOutInRight";
  • "slideOutInDown/slideOutInUp";
  • "slideOutInLeft/slideOutInRight".
• animationTime - you can control the speed of the animation - type: string:
  • "animate__slower" - 3s;
  • "animate__slow" - 2s;
  • "" - 1s (default);
  • "animate__fast" - 800ms;
  • "animate__faster" - 500ms.
• hoverAnimation - animation effect on slide hover - type: boolean:
  • true;
  • false (default).
• hoverAnimationType - hover animation by Animate.css library - type: string:
  • "pulse" (default);
  • "bounce";
  • "rubberBand";
  • "shakeX";
  • "shakeY";
  • "headShake";
  • "swing";
  • "tada;
  • "wobble";
  • "jello";
  • "heartBeat".
• constSliderHeight - if "true" than the slider height is constant and approximately equal to the height of the largest slide - type: boolean:
  • true;
  • false (default).
• overflowHidden - container css property "overflow: hidden" - specifies what happens if content overflows an element's box - type: boolean:
  • true (default);
  • false.
• control - add some control elements (buttons "prev", "next") - type: boolean.

  If "control: false" you can switch slide with click on it.

  • true (default);
  • false.

Enjoy it!