JSFiddle - React, Tailwind, and code Playground

by digiguru

HTML

<p><a href="javascript:return false" class="prevBtn">Prev</a> |
    <a href="javascript:return false" class="nextBtn">Next</a></p>

<div id="area">
<ul>

        <li><h1 id="test">Test</h1>

<div id="box">
    <p>The <b>Howard Steamboat Museum</b> is located in <a href="/wiki/Jeffersonville,_Indiana" title="Jeffersonville, Indiana">Jeffersonville, Indiana</a>, across from <a href="/wiki/Louisville,_Kentucky" title="Louisville, Kentucky">Louisville, Kentucky</a>. Based in the old Howard home, it features items related to steamboat history.
    <p>The home was built in 1890 by Edmonds J. Howard, who inherited the family shipyard from his father James Howard, who founded the Howard Ship Yards, both in what was then <a href="/wiki/Port_Fulton,_Indiana" title="Port Fulton, Indiana">Port Fulton, Indiana</a>. It cost $100,000 to build the 22-room, 3-floor structure. Still within the museum are <a href="/wiki/Chandeliers" title="Chandeliers" class="mw-redirect">chandeliers</a>, carvings, arches and a grand staircase that reflect the wealth Edmonds Howard had. As the Howards prided themselves on their hulls, a large collection of the half-breadths is displayed on the property.</p>
    <p>Over the course of ownership of the Howard Shipyards, 3,000 ships were launched in what to its day is the largest inland shipyard in the United States. The Howard Shipyard was eventually made into <a href="/wiki/Jeffboat" title="Jeffboat">Jeffboat</a>.</p>
    <p>On March 17, 1971, a fire broke out in the museum; the museum reopened the next year.</p>
    <p>Since 1993, the Museum holds an annual <a href="/wiki/Chautauqua" title="Chautauqua">Chautauqua</a> in May, which features craft booths on the grounds, while inside the mansion talks are given about various topics. 2007's was about the <a href="/wiki/Ohio_River_flood_of_1937" title="Ohio River flood of 1937">Ohio River flood of 1937</a>.</p>
</li>
           <li><h1 id="test">Test</h1>
    <p>Dylan Thomas was born at 5 Cwmdonkin Drive...

CSS

body { COLOR: #0d0d0d; BACKGROUND: #AAA; FONT-FAMILY: arial; FONT-SIZE: 11px; }

JavaScript

(function ($) {
$.fn.dylanCarousel = function (options) {
var settings = $.extend({
            circular: true,
            pageNo: 0,
            item: "li",
            button: {
                next: ".nextBtn",
                prev: ".prevBtn"
            }
        }, options);
function showPage() {
            settings = $(this).data("dc-conf");
             $(this).find(settings.item).slideUp();
             $($(this).find(settings.item)[settings.pageNo]).slideDown();
        }
    function clickNext() {
            $this = $($(this).data("area"));
            $this.data("dc-conf").pageNo++;
            if ($this.data("dc-conf").pageNo == $this.find(settings.item).length) {
                $this.data("dc-conf").pageNo = 0;
            }
            $this.trigger("showPage");
        }
    function clickBack() {
            $this = $($(this).data("area"));
            $this.data("dc-conf").pageNo--;
            if ($this.data("dc-conf").pageNo == -1) {
                $this.data("dc-conf").pageNo = $this.find(settings.item).length - 1;
            }
            $this.trigger("showPage");
        }
 this.each(function () {

            var $this = $(this);
            $this.data("dc-conf", settings);
            $this.bind("showPage", showPage);
            if ($this.find(settings.item).length <= 1) {
                $(settings.button.next + "," + settings.button.prev).hide();
            }
            $(this).find(settings.item).hide();
            $(settings.button.next).bind("click", clickNext).data("area", $this);
            $(settings.button.prev).bind("click", clickBack).data("area", $this);
            $this.trigger("showPage");
        });
}
})(jQuery);
$("#area").dylanCarousel();