JSFiddle - React, Tailwind, and code Playground

by wilfff

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.css">
<script src="//cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.min.js"></script>
<ul class="bxslider">
    <li><img src="http://placekitten.com/g/600/300" /></li>
    <li><img src="http://placekitten.com/600/300" /></li>
    <li><img src="http://placedog.com/600/300" /></li>
    <li><img src="http://placedog.com/g/600/300" /></li>
</ul>

CSS

ul.bxslider{
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

JavaScript

$('.bxslider').bxSlider({
    auto: true,
    controls: false,
    pager: false,
    mode: 'fade',
    delay: 8900/*,
    onSlideBefore: function (elm) {
        elm.css({
            "-webkit-transition": ".9s ease-out",
            "-moz-transition": ".9s ease-out",
            "-ms-transition": ".9s ease-out",
            "-o-transition": ".9s ease-out",
            "transition": ".9s ease-out",
            "-webkit-transform": "rotateX(360deg)",
            "-moz-transform": "rotateX(360deg)",
            "-ms-transform": "rotateX(360deg)",
            "-o-transform": "rotateX(360deg)",
            "transform": "rotateX(360deg)"
        });
        elm.hide();
    }*/,
    onSlideAfter: function (elm) {
        elm.css({
            "-webkit-transition": ".9s ease-out",
            "-moz-transition": ".9s ease-out",
            "-ms-transition": ".9s ease-out",
            "-o-transition": ".9s ease-out",
            "transition": ".9s ease-out",
            "-webkit-transform": "rotateX(360deg)",
            "-moz-transform": "rotateX(360deg)",
            "-ms-transform": "rotateX(360deg)",
            "-o-transform": "rotateX(360deg)",
            "transform": "rotateX(360deg)"
        });
    }
});