JSFiddle - React, Tailwind, and code Playground

by zoomieos

HTML

<link rel="stylesheet" href="http://queens.by/css/main.css">
<link rel="stylesheet" href="http://queens.by/css/slick.css">
<script src="http://queens.by/js/slick.min.js"></script>
<script src="http://queens.by/js/main.js"></script>
<script src="http://queens.by/js/jquery-imagefill.js"></script>
<div class="gr dark" id="reviews">
        <div class="container">
            <h2>ОТЗЫВЫ УЧЕНИЦ СТУДИИ</h2>


            <div class="slick_recalls slick-initialized slick-slider" data-speed="2000">
                <div aria-live="polite" class="slick-list draggable" tabindex="0" style="padding: 0px 50px; height: 570px;"><div class="slick-track" style="opacity: 1; width: 20000px; transform: translate3d(-2050px, 0px, 0px);"><div class="slide_recall slide_recall_a second-slider slick-slide slick-cloned" data-slick-index="-2" aria-hidden="true">
                    <iframe id="" src="https://player.vimeo.com/video/250200565?title=0&amp;byline=0&amp;portrait=0" width="1000" height="563" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
                </div><div class="slide_recall slide_recall_a second-slider slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true">
                    <iframe id="" src="https://player.vimeo.com/video/282744901?title=0&amp;byline=0&amp;portrait=0" width="1000" height="563" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
                </div><div class="slide_recall slide_recall_a second-slider slick-slide slick-active slick-center" data-slick-index="0" aria-hidden="false">
                    <iframe id="myVideo" src="https://player.vimeo.com/video/163865006?title=0&amp;byline=0&amp;portrait=0" width="1000" height="563" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
                </div><div class="slide_recall slide_recall_a second-slider slick-slide" data-slick-index="1" aria-hidden="true">
        ...

JavaScript

function recallAInit(recalls) {
        var speed = $(recalls).data('speed')
        $(recalls).slick({
            dots: true,
            adaptiveHeight: true,
            centerMode: true,
            variableWidth: true,
            autoplay: true,
            pauseOnHover: false,
            autoplaySpeed: speed
        });
        $(recalls).hover(function () {
            $(this).slick('slickPause');
        }, function () {
            if (!$(this).hasClass('played')) {
                $(this).slick('slickPlay');
            }
            //                console.log('unhover')
        })
    }
    (function () {
        $('#reviews .slick_recalls .slide_recall_b .recall_cont p').each(function () {
            var h = $(this).height()
            if (h > 500) {
                $(this).height(240);
                $(this).parent().append('<a href="">ЧИТАТЬ ДАЛЕЕ</a>')
            }
        });
        $('#reviews .slick_recalls .slide_recall_b .recall_cont a').click(function () {
            $('#reviews .slick_recalls').slick('slickPause');
            var con = $(this).parents('.slide_recall_b'),
                tH4 = con.find('h4').text(),
                tP = con.find('p').text(),
                tH3 = con.find('h3').text();
            $('#pop_recall h4').text(tH4);
            $('#pop_recall p').text(tP);
            $('#pop_recall h5').text(tH3);
            $('#overlay').fadeIn()
            $('#pop_recall').fadeIn();
            $('#reviews .slick_recalls').addClass('played')
            $('#overlay, #cls_pop_recal').click(function () {
                $('#overlay').fadeOut();
                $('#pop_recall').fadeOut()
                $('#reviews .slick_recalls').removeClass('played')
            })
            return false
        })
        return recallAInit('#reviews .slick_recalls');

    })();