JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<div class="slider-section">
    <div class="slider slider-for">
        <div style="background: url(https://i.ytimg.com/vi/pwzQ4naW7rU/maxresdefault.jpg);"></div>
        <div style="background: url(http://lh5.ggpht.com/-847vSCe_5PA/T0_r0-vV79I/AAAAAAAAALs/fApJYJ7uxCw/s1600/Original-Abstract-Art-For-Sale-Images.jpg);"></div>
        <div style="background: url(https://upload.wikimedia.org/wikipedia/commons/e/e2/Charles_H._Walther_-_Abstract_Landscape_-_Google_Art_Project.jpg);"></div>
        <div style="background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTWkret5Eehj25D7BcJwKv8WcsnYf_lOMTFHC4ryyGPv7cmzB42);"></div>
        <div style="background: url(https://hdqwalls.com/download/dj-boy-abstract-art-hd-1440x2560.jpg);"></div>
    </div>

    <div class="slider slider-nav">
        <div style="background: url(https://d2uqfpnktc64mn.cloudfront.net/uploads/post/image/000/002/058/default_Image%2Bby%2BGoogle%2BEarth%2Bvia%2BEarth%2BView%2BBirjand%2BIran.jpg);"></div>
        <div style="background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBqiXurlAmmafBtzhWDb06qzVBXaWxjRXBfyI1P7RSPZBYbSIqQw);"></div>
        <div style="background: url(https://katiecropper.com/wp-content/uploads/2018/11/abstract-Pencil-Sketches-Abstract-Art-landscape-pencil-drawings-google-search-rhpinterestcom.jpg);"></div>
        <div style="background: url(https://upload.wikimedia.org/wikipedia/commons/e/e2/Charles_H._Walther_-_Abstract_Landscape_-_Google_Art_Project.jpg);"></div>
        <div style="background:...

SCSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #f6f6f6;
}

.slider-section {
    display: flex;
    width: 100%;
    align-items: center;
}

.slider-for {
    width: 30%;
    height: 70vh;
    background: red;
    * {
        height: 100%;
    }
}

.slider-nav {
    width: 50%;
    height: 50vh;
    margin-left: -10%;
    background: blue;
    box-shadow: -30px 0px 60px 0px rgba(0, 0, 0, 0.8);
    * {
        height: 100%;
    }
}

.type {
    width: 20%;
    height: 50vh;
    * {
        height: 100%!important;
    }
    .slick-slide,
    .slick-slide div {
        display: flex;
        justify-content: center;
        align-items: center;
        div {
            height: auto;
        }
    }
    
    .slick-slide {
        div {
            div {
            display: flex!important;
            flex-direction: column;
            justify-content: center;
            height: auto;
        }
        }
    }
}

.slick-slide {
    overflow: hidden;
    div {
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center center !important;
    }
}

.slick-next {
    height: auto;
    top: auto;
    bottom: 0;
    right: 30px;
    transform: translateY(200%) rotate(45deg);
    border-top: 1px solid black;
    border-right: 1px solid black;
    width: 30px;
    height: 30px;
    &:before {
        display: none;
    }
}

.slick-prev {
    height: auto;
    top: auto;
    bottom: 0;
    right: 90px;
    left: auto;
    transform: translateY(200%) rotate(-45deg);
    border-top: 1px solid black;
    border-left: 1px solid black;
    width: 30px;
    height: 30px;
    &:before {
        display: none;
    }
}

.slider-section h3 {
    font-size: 2rem;
    height: auto!important;
}

.slider-section p {
    height: auto!important;
    em {
        font-style: italic;
        opacity: 0.6;
        height: auto!important;
    }
}

JavaScript

$('.slider-for').slick({
     slidesToShow: 1,
     slidesToScroll: 1,
     arrows: false,
     fade: true,
     asNavFor: '.slider-nav, .type'
 });
 $('.type').slick({
     slidesToShow: 1,
     slidesToScroll: 1,
     arrows: false,
     vertical: true,
     asNavFor: '.slider-nav, .slider-for'
 });
 $('.slider-nav').slick({
     slidesToShow: 1,
     slidesToScroll: 1,
     asNavFor: '.slider-for, .type',
     dots: false,
     focusOnSelect: true,
     arrows: true
 });