JSFiddle - React, Tailwind, and code Playground

by saidulu401

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    
    <div class="container">
    <div class="row">
        <div class="col-md-12">
            <div  class="carousel slide" data-ride="carousel" id="myCarousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="col-4">
                            <a href="#"><img src="//placehold.it/900x800?text=1" class="img-responsive"></a>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="col-4">
                            <a href="#"><img src="//placehold.it/900x800/CC3300?text=2" class="img-responsive"></a>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="col-4">
                            <a href="#"><img src="//placehold.it/900x800/FFCC33?text=3" class="img-responsive"></a>
                        </div>
                    </div>
                     <div...

CSS

.carousel,
.carousel-inner,
.carousel-inner > .item {
    overflow: hidden;
}
.carousel-inner:before {
    position:absolute;
    top:0;
    bottom: 0;
    right: 82%;
    left: 0;
    content:"";
    display:block;
    background-color: #fff;
    z-index: 2;
}
.carousel-inner:after {
    position:absolute;
    top:0;
    bottom:0;
    right: 0;
    left: 82%;
    content:"";
    display:block;
    background-color:#fff;
    z-index: 2;
}

.carousel-control.left, .carousel-control.right {
    background: initial;
    width: 30%;
    color: #000;
    z-index: 10;
    top: -10px;
   
}

JavaScript

$(document).ready(function () {
 debugger;
    $('#myCarousel').carousel({
        interval: 4000
    })
    $('.carousel .carousel-item').each(function () {
        var next = $(this).next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));
        if (next.next().length > 0) {
            next.next().children(':first-child').clone().appendTo($(this));
        } else {
            $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
        }
    });
});