cabinet/assets/controllers/slideshow_controller.js

import { Controller } from 'stimulus';
import 'owl.carousel2/dist/assets/owl.carousel.css';
import 'owl.carousel2/dist/assets/owl.theme.default.css';

/*
 * owl.carousel2 is a legacy jQuery plugin that reads `window.jQuery` at module
 * evaluation time. When statically imported it lands in the eager shared chunk,
 * and depending on webpack chunk ordering it can evaluate before jQuery is ready,
 * throwing and breaking the whole Stimulus bootstrap. Load it lazily inside
 * connect() so it can never break unrelated controllers (e.g. registration).
 */
export default class extends Controller {
    static targets = ["showid"];

    connect() {
        var slideshow = this.element;

        import('owl.carousel2').then(function() {
            $(slideshow).owlCarousel({
                nav: true,
                margin: 15,
                autoplay: false,
                autoplayTimeout: 7000,
                autoplayHoverPause: true,
                navText : ['<span class="swiper-button-prev">&nbsp;</span>','<span class="swiper-button-next">&nbsp;</span>'],
                    responsive: {
                    0: {
                        items: 1,
                        dots: false,
                    },
                    600: {
                        items: 2,
                        dots: false,
                    },
                    1000: {
                        items: 2,
                        dots: false,
                    }
                }
            });

            slideshow.classList.remove('hide');
        }).catch(function(e) {
            console.warn('owl.carousel failed to load', e);
            slideshow.classList.remove('hide');
        });

        slideshow.querySelectorAll('.show-msg').forEach(function (el) {
            el.addEventListener('click', function (evn) {
                var showId = evn.target.dataset.showId;
                var crop = slideshow.querySelector(`#crop-${showId}`);
                var full = slideshow.querySelector(`#full-${showId}`);

                if (full.classList.contains('d-none')) {
                    crop.classList.add('d-none');
                    full.classList.remove('d-none');
                    evn.target.innerHTML = 'cвернуть';
                } else {
                    crop.classList.remove('d-none');
                    full.classList.add('d-none');
                    evn.target.innerHTML = 'весь отзыв';
                }
            });
        });
    }
}