jQuery Carousel

There are a couple of requirements you need to meet before you can use jQuery Animate.css Carousel, those are jQuery library, and 1 of the CSS animation libraries listed below:

• Animate CSS
• Motion CSS
• Tuesday
• Magic
• Repaintless
• Dynamic CSS
• CSSAnimation.io
• Wicked CSS
• Obnoxious

Installing jQuery Animate.css Carousel is pretty straight forward. Simply include the jQuery, CSS Animation library (eg. Animate.css), jQuery Animate.css Carousel's JavaScript and CSS file, like so:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/animatecss-carousel.css" type="text/css" media="screen" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/animatecss-carousel.js"></script>

Notice the jQuery library I included was google code library, We recommend using latest version.

It is highly recommended that all JavaScript be placed after all your content at the footer of the page, just before the end </body> tag. This ensures that all content is loaded before manipulation of the DOM occurs.

Create a <div> with an ID or Class. And inside of it create seperate <div> for every slides/items.

<!-- HTML -->
<div id="aniCarousel-basic-use">
    <div>
        <img style="display:block; width:100%; margin:auto;" src="https://webbymage.com/wp-content/uploads/2020/05/plugin-carousel-horizontal-1.jpg" />
    </div>
    <div>
        <img style="display:block; width:100%; margin:auto;" src="https://webbymage.com/wp-content/uploads/2020/05/plugin-carousel-horizontal-2.jpg" />
    </div>
    <div>
        <img style="display:block; width:100%; margin:auto;" src="https://webbymage.com/wp-content/uploads/2020/05/plugin-carousel-horizontal-3.jpg" />
    </div>
    <div>
        <img style="display:block; width:100%; margin:auto;" src="https://webbymage.com/wp-content/uploads/2020/05/plugin-carousel-horizontal-4.jpg" />
    </div>
    <div>
        <img style="display:block; width:100%; margin:auto;" src="https://webbymage.com/wp-content/uploads/2020/05/plugin-carousel-horizontal-5.jpg" />
    </div>
</div>

Now activate the jQuery Animate.css Carousel like this

$('#aniCarousel-basic-use').aniCarousel();

Another example with some options defined.

$('#aniCarousel-with-options').aniCarousel({
    animator: 'tuesday',
    animationIn: 'tdStampIn',
    animationOut: 'tdSwingOut',
    loop: true,
    overflow: 'hidden',
    interval: 10,
    paginator: true,
    pauseOnHover: true
});

3 Special features of this Carousel is that you can give unique Animations for In and Out. And, You can also deifine duration for each slide. To do these, jQuery Animate.css Carousel give you 3 data attributes.

1. data-acc-in - In animation for the slide/item.
2. data-acc-out - Out animation for the slide/item.
3. data-acc-duration - Duration (in seconds) of how long the slide will show when autoplay is set to 'true'.

<!-- HTML -->
<div id="aniCarousel-with-dataattributes">
    <div data-acc-in="fadeIn" data-acc-out="fadeOut" data-acc-duration="5" >
        <img style="display:block; width:100%; margin:auto;" src="https://webbymage.com/wp-content/uploads/2020/05/plugin-carousel-horizontal-1.jpg" />
    </div>
    <div data-acc-in="bounceIn" data-acc-out="bounceOut" data-acc-duration="6" >
        <img style="display:block; width:100%; margin:auto;" src="https://webbymage.com/wp-content/uploads/2020/05/plugin-carousel-horizontal-2.jpg" />
    </div>
    <div data-acc-in="flipInX" data-acc-out="flipOutX" >  <!--  data-acc-duration isn't defined. It will be using 'interval' from Options -->
        <img style="display:block; width:100%; margin:auto;" src="https://webbymage.com/wp-content/uploads/2020/05/plugin-carousel-horizontal-3.jpg" />
    </div>
    <div data-acc-in="lightSpeedIn" > <!--  data-acc-out isn't defined. It will be using 'animationOut' from Options -->
        <img style="display:block; width:100%; margin:auto;" src="https://webbymage.com/wp-content/uploads/2020/05/plugin-carousel-horizontal-4.jpg" />
    </div>
    <div data-acc-out="lightSpeedOut" > <!--  data-acc-in isn't defined. It will be using 'animationIn' from Options -->
        <img style="display:block; width:100%; margin:auto;" src="https://webbymage.com/wp-content/uploads/2020/05/plugin-carousel-horizontal-5.jpg" />
    </div>
</div>

Note: You might still want to define animationIn, animationOut and interval, so if you do not define any of the Data attributes, script will take values from these 3 options.

$('#aniCarousel-with-dataattributes').aniCarousel({
    animationIn: "zoomIn",
    animationOut: "zoomOut",
    interval: 5,

    loop: true,
    overflow: 'hidden',
    autoplay:true,
    paginator: true,
    pauseOnHover: true,
});