JSFiddle - React, Tailwind, and code Playground

by Thet Hlaing

HTML

<div id="djslider114">
<div class="slider-container">
    <ul id="slider114" class="cordlifeslider">
        <li>
            <div class="img-container">
                <img src="https://www.cordlifeindia.com/images/banners/PowerOfCordBlood.jpg" alt="Power of Cord Blood" />
            </div>
        </li>
        <li>
            <div class="img-container">
                <img src="https://www.cordlifeindia.com/images/banners/UmbilicalCord.jpg" alt="Umbilical Cord" />
            </div>
        </li>
        <li>
            <div class="img-container">
                <img src="https://www.cordlifeindia.com/images/banners/WhyCordlifeMain.jpg" alt="Umbilical Cord" />
            </div>
        </li>
        <li>
            <div class="img-container">
                <img src="https://www.cordlifeindia.com/images/banners/PregnancyTips.jpg" alt="Umbilical Cord" />
            </div>
        </li>
    </ul>
</div>

<div id="navigation114" class="navigation-container" style="margin-left: 0px; margin-right: 0px;">
        	        	<img id="prev114" class="prev-button" src="https://www.cordlife.com/sg/images/prev.png" alt="Previous">
			<img id="next114" class="next-button" src="https://www.cordlife.com/sg/images/next.png" alt="Next">
</div>

<div class="container slide-nav">
    <div class="slide-nav-container">
        <!-- Slide description area: START -->
        <div id="slide-1" class="slide-desc" style="display: block;">
            <div class="slide-desc-in">
                <div class="slide-desc-text">
                    <div class="slide-title">Power of Cord Blood</div>
                    <div class="slide-text">
                        <p>During pregnancy, the umbilical cord functions as a lifeline between mother and child. After a baby’s delivery, the cord blood present in the umbilical cord could offer hope for the child or members of the family.</p>
                    </div>
                    <div class="readmore-container"><a...

CSS

body {
    background-color:#fff;
}
.cordlifeslider {
    list-style:none;
    position:relative;
    height:180px;
}
.cordlifeslider li {
    position:absolute;
    top:0px;
    left:0px;
    opacity:0;
    transition: opacity 0.3s linear;
}
.cordlifeslider li.current, .cordlifeslider li.waiting {
    opacity:1;
}
.cordlifeslider li img {
    width:100%;
}
.container.slide-nav {
    position:absolute;
    right:20px;
    top:20px;
    width:250px;
    background-color:rgba(255, 255, 255, 0.8);
    padding:10px 5px;
    border-radius:5px;
    box-shadow:1px 1px 3px #000;
}
.navigation-container-custom span {
    display:block;
    padding:5px;
    10px;
    cursor:pointer;
}
.navigation-container-custom span.load-button-active {
    background-color:#FF391F;
    color:#fff;
}

.slide-desc-text{
    min-height:200px;
}
.navigation-container img{
    cursor:pointer;
}

JavaScript

var clslider_overwrite = false;
$(document).ready(function () {
    //adjust height of parent    
    $(".cordlifeslider").height($(".cordlifeslider li:first-child").height());
    //start the animation
    $(".cordlifeslider li:first-child").addClass("current");
    setTimeout(function () {
        normalLoop();
    }, 3000);
    //for navigation
    $(".navigation-container-custom .load-button").click(function () {
        paging($(this).index());
    });
    
    //for controls
    //next
    $(".navigation-container .next-button").click(function(){
        var nextIndex = 0;
        if (!$(".cordlifeslider .current").is("li:last-child")) {
            nextIndex = $(".cordlifeslider .current").next("li").index();
        }
        paging(nextIndex);
    });
    //previous
    $(".navigation-container .prev-button").click(function(){
        var prevIndex = $(".cordlifeslider li").length-1;
        if (!$(".cordlifeslider .current").is("li:first-child")) {
            prevIndex = $(".cordlifeslider .current").prev("li").index();
        }
        paging(prevIndex);
    });    
});

$(window).resize(function () {
    //adjust height of parent    
    $(".cordlifeslider").height($(".cordlifeslider li:first-child").height());
});

function normalLoop() {
    if (!clslider_overwrite) {
        //if not last child
        if (!$(".cordlifeslider .current").is("li:last-child")) {
            $(".cordlifeslider .current").next("li").addClass("waiting");
        }
        //if last child, restart from the first one
        else {
            $(".cordlifeslider li:first-child").addClass("waiting");
        }
        $(".cordlifeslider .current").removeClass("current");
        $(".waiting").addClass("current").removeClass("waiting");
        changenavigation();
        setTimeout(function () {
            normalLoop();
        }, 3000);
    } else {
        setTimeout(function () {
            normalLoop();
        }, 3000);
    }
}

function paging(index) {
   ...