JSFiddle - React, Tailwind, and code Playground

by mikeys4u

HTML

<script src="http://demo.dev7studios.com/caroufredsel/wp-content/plugins/caroufredsel/scripts/jquery.carouFredSel-6.1.0-packed.js?ver=6.1.0"></script>
<ul class="menu">
    <li><a href="#Environment"><span>Environment</span></a></li>
    <li><a href="#Marketplace"><span>Marketplace</span></a></li>
    <li><a href="#Community"><span>Community</span></a></li>
    <li><a href="#Workplace"><span>Workplace</span></a></li>
</ul>
<div id="carousel">
    <div>
        <h3>Environment</h3>
        <p>TEST Environment TEST Environment TEST Environment</p>
    </div>
    <div>
        <h3>Marketplace</h3>
        <p>TEST Marketplace TEST Marketplace TEST Marketplace</p>
    </div>
    <div>
        <h3>Community</h3>
        <p>TEST Community TEST Community TEST Community</p>
    </div>
    <div>
        <h3>Workplace</h3>
        <p>TEST Workplace TEST Workplace TEST Workplace</p>
    </div>
</div>

CSS

div {
    height: 200px;
}

JavaScript

$('#carousel').carouFredSel({
    auto: {
        duration: 600
    },
    pagination: {
        container: ".menu",
        anchorBuilder: false
    },
    mousewheel: true,
    swipe: {
        onMouse: true
    }
});