JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<script type="text/javascript" src="http://www.avantlink.com/product_ad_widget/paw.php?pawid=74509&amp;pw=134143&amp;output=js"></script>

CSS

.al_paw_block_wrapper_74509 {
    opacity: 0;
}

JavaScript

$(document).ready(function () {
    // jQuery cached objects
    var $productBox = $('.al_paw_product_74509'),
        $productBoxWrapper = $('.al_paw_block_wrapper_74509'),
        // counter for setInterval
        counter = 0;

    function rotateProducts() {
        setInterval(function () {
            // this is really hacky and rushed, but it gets the job done
            console.log(counter);
            $productBox.eq(counter).fadeOut(500, function () {
                (counter === 2) ? counter = 0 : ++counter;
                $productBox.eq(counter).fadeIn(500);
            });
        }, 3000);
    }

    // this should be fixed inline
    $productBoxWrapper.css('width', '280px');
    // hide all of the products, results in a sloppy implementation
    $productBox.hide().eq(1).show();

    $productBoxWrapper.animate({
        opacity: 1
    }, 1500, rotateProducts);



});