JSFiddle - React, Tailwind, and code Playground

https://teratail.com/questions/306775

by Lhankor_Mhy

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    <div class="content">
        <div class="slider mypattern">
            <div><a href="#"><img src="http://placehold.jp/24/cc9999/993333/800x600.png"></a></div>
            <div><a href="#"><img src="http://placehold.jp/24/cc9999/993333/850x550.png"></a></div>
            <div><a href="#"><img src="http://placehold.jp/24/cc9999/993333/800x600.png"></a></div>
            <div><a href="#"><img src="http://placehold.jp/24/cc9999/993333/850x250.png"></a></div>
        </div>
    </div>

CSS

* {
            margin: 0;
            padding: 0;
        }
    
        .slider {
            width: 90%;
            margin: 0 auto 80px;
        }
    
        .slick-slide img {
            width: auto;
            height: 100%;
        }
    
        .mypattern {
            width: 100%;
        }
    
        .mypattern .slick-slide {
            margin: 0px 50px;
        }

        .slick-track{
            height: 50vh;
        }

JavaScript

$("document").ready(function () {
            $('.mypattern').slick({
                autoplay: true,
                autoplaySpeed: 2500,
                speed: 800,
                arrows: false,
                centerMode: true,
                centerPadding: '25%',
                variableWidth: true,
            });
        });