JSFiddle - React, Tailwind, and code Playground

by YulyaYulya

HTML

<div id="popup" class="popup">
  <div class="block">
    <div class="container">
      <div class="popup__slider">
        <div id="sync1" class="owl-carousel owl-theme">
          <div class="item">
            <img src="https://w-dog.ru/wallpapers/9/16/399332228390766/ssha-shtata-vajoming-grand-titon-nacionalnyj-park-gora-moran-ozero-dzhekson-priroda-leto-utro-les-otrazheniya.jpg">
          </div>
          <div class="item">
            <img src="https://avatars.mds.yandex.net/get-zen_doc/3384370/pub_5ed8978da039be1d18f711ad_5ed897dc2d68c160ff74fd93/scale_1200">
          </div>
          <div class="item">
            <img src="https://s1.1zoom.ru/big0/297/Canada_Mountains_Scenery_488936.jpg">
          </div>
          <div class="item">
            <img src="https://c.radikal.ru/c29/1805/b9/b2162504cf7c.jpg">
          </div>
          <div class="item">
            <img src="https://i1.wallbox.ru/wallpapers/main/201617/785b7a5776d626f.jpg">
          </div>
          <div class="item">
            <img src="https://images.ru.prom.st/800387010_w640_h640_kartina-po-nomeram.jpg">
          </div>
          <div class="item">
            <img src="http://fototelegraf.ru/wp-content/uploads/2012/07/priroda-kanady-7.jpg">
          </div>
          <div class="item">
            <img src="https://w-dog.ru/wallpapers/9/6/531915326915476/priroda-nebo-oblaka-gory-cvety-pejzazh-zakat-derevya.jpg">
          </div>
          <div class="item">
            <img src="https://images.ru.prom.st/800387010_w640_h640_kartina-po-nomeram.jpg">
          </div>

        <div id="sync2" class="owl-carousel owl-theme">
                <div class="item">
            <img src="https://w-dog.ru/wallpapers/9/16/399332228390766/ssha-shtata-vajoming-grand-titon-nacionalnyj-park-gora-moran-ozero-dzhekson-priroda-leto-utro-les-otrazheniya.jpg">
          </div>
          <div class="item">
            <img...

SCSS

.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 100000;
    .block {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
    &__slider {
        display: block;
        margin: 0 auto;
        max-width: 800px;
        width: 100%;
        #sync1 {
            position: relative;
            .item img {
                max-height: 425px;
            }
            .owl-nav {
                position: absolute;
                width: 100%;
                height: 0px;
                top: 50%;
                z-index: 999;
            }
            .owl-prev {
                position: absolute;
                left: 0px;
                top: -25px;
                width: 30px;
                height: 50px;
                border: none;
                line-height: 1;
                font-size: 38px;
                transition: all 0.2s;
            }
            .owl-next {
                position: absolute;
                right: 0px;
                top: -25px;
                width: 30px;
                height: 50px;
                border: none;
            }
        }
        #sync2 {
            margin-top: 5%;
            width: 100%;
            .item img {
                max-height: 115px;
            }
        }
    }
}

JavaScript

var sync1 = $("#sync1");
    var sync2 = $("#sync2");
    var slidesPerPage = 4;
    var syncedSecondary = true;

    sync1.owlCarousel({
        items: 1,
        slideSpeed: 2000,
        nav: true,
        autoplay: false,
        dots: false,
        loop: true,
        responsiveRefreshRate: 200,
        navText: ['<svg  viewBox="0 0 11 20"><path style="fill:none;stroke-width: 2px;stroke: #fff;" d="M9.554,1.001l-8.607,8.607l8.607,8.606" /></svg>', '<svg  viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 2px;stroke: #fff;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
    }).on('changed.owl.carousel', syncPosition);

    sync2
        .on('initialized.owl.carousel', function () {
            sync2.find(".owl-item").eq(0).addClass("current");
        })
        .owlCarousel({
            items: slidesPerPage,
            dots: false,
            nav: false,
            margin: 10,
            smartSpeed: 200,
            slideSpeed: 500,
            slideBy: slidesPerPage,
            responsiveRefreshRate: 100
        }).on('changed.owl.carousel', syncPosition2);

    function syncPosition(el) {
        var count = el.item.count - 1;
        var current = Math.round(el.item.index - (el.item.count / 2) - .5);

        if (current < 0) {
            current = count;
        }
        if (current > count) {
            current = 0;
        }

        sync2
            .find(".owl-item")
            .removeClass("current")
            .eq(current)
            .addClass("current");
        var onscreen = sync2.find('.owl-item.active').length - 1;
        var start = sync2.find('.owl-item.active').first().index();
        var end = sync2.find('.owl-item.active').last().index();

        if (current > end) {
            sync2.data('owl.carousel').to(current, 100, true);
        }
        if (current < start) {
            sync2.data('owl.carousel').to(current - onscreen, 100, true);
        }
    }

    function syncPosition2(el) {
   ...