<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/flickity.min.css">
<script src="https://unpkg.com/[email protected]/dist/flickity.pkgd.min.js"></script>

<abc-featured-columns>
    <div class="blocks" data-abc-featured-columns="carousel">
      
      
        <div class="col">
            <div class="item">
                <div class="text">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ad impedit rerum quos nobis laudantium! Rerum, error totam voluptas qui voluptatum obcaecati fugiat voluptate, corporis, eligendi animi aspernatur commodi explicabo rem omnis eaque incidunt illum doloribus debitis. At minima nulla quod consectetur repellendus mollitia accusantium, necessitatibus neque nesciunt debitis vel.</p>
                </div>
            </div>
        </div>
      
      
        <div class="col">
            <div class="item">
                <div class="text">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ad impedit rerum quos nobis laudantium! Rerum, error totam voluptas qui voluptatum obcaecati fugiat voluptate, corporis, eligendi animi aspernatur commodi explicabo rem omnis eaque incidunt illum doloribus debitis. At minima nulla quod consectetur repellendus mollitia accusantium, necessitatibus neque nesciunt debitis vel.</p>
                </div>
            </div>
        </div>
      
      
        <div class="col">
            <div class="item">
                <div class="text">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ad impedit rerum quos nobis laudantium! Rerum, error totam voluptas qui voluptatum obcaecati fugiat voluptate, corporis, eligendi animi aspernatur commodi explicabo rem omnis eaque incidunt illum doloribus debitis. At minima nulla quod consectetur repellendus mollitia accusantium, necessitatibus neque nesciunt debitis veldfgdf.</p>
                </div>
            </div>
        </div>
      
      
    </div>
</abc-featured-columns>

.blocks {
  --blocks-per-row: 3;
  --blocks-gap: 15px;
}

.blocks:not(.flickity-enabled) {
  display: flex;
  overflow: hidden;
}

.col {
  --total-margin: calc(var(--blocks-gap) * (var(--blocks-per-row) - 1));
  --size: calc((100% - var(--total-margin)) / var(--blocks-per-row));
  flex: 0 0 var(--size);
  width: var(--size);
  margin-right: var(--blocks-gap);
}


.item {
  background: green;
  color: #fff;
  padding: 20px;
}

if (!customElements.get('abc-featured-columns')) {
    customElements.define('abc-featured-columns', class abcFeaturedColumns extends HTMLElement {
        constructor() {
            super();

            this.carouselEl = this.querySelector('[data-abc-featured-columns="carousel"]');
        }
        
        getlCellAlign() {
            return window.innerWidth < 992 ? 'center' : 'left';
        }

        getInitialIndex () {
            return window.innerWidth < 992 ? 1 : 0;
        }
        
        initCarousel(){
            let settings = {
                cellAlign: this.getlCellAlign(),
                contain: false,
                wrapAround: true,
                prevNextButtons: false,
                pageDots: false,
                initialIndex: this.getInitialIndex(),
                adaptiveHeight: false,
                on: {
                    ready: () => {
                        this.carouselEl.classList.add('adev--flickity-ready');
                    },
                    settle: () => {
                        this.carouselEl.classList.add('adev--flickity-ready');
                        this.carouselEl.classList.remove('adev--flickity-moving');
                    },
                    dragStart: () => {
                        this.carouselEl.classList.add('adev--flickity-moving');
                    },
                    dragEnd: () => {
                        this.carouselEl.classList.remove('adev--flickity-moving');
                    },
                    change: () => {
                        this.querySelectorAll('adev-video-tag').forEach((videoTag) => {
                            videoTag.pause();
                        });
                    },
                    select: () => {
                        this.querySelectorAll('adev-video-tag').forEach((videoTag) => {
                            videoTag.pause();
                        });
                    }
                }
            };

            this.carouselInstance = new Flickity(this.carouselEl, settings);

            window.matchMedia('(min-width: 992px)').addEventListener('change', () => this.onResize());

            this.initArrows();
            this.initDots();
        }

        onResize() {
            if (this.carouselInstance && this.carouselEl) {
                this.carouselEl.classList.remove('adev--flickity-ready');
                this.carouselInstance.options.cellAlign = this.getlCellAlign();
                this.carouselInstance.options.initialIndex = this.getInitialIndex();
                this.carouselInstance.resize();
            }
        }

        initArrows() {
            const prevButton = this.querySelector('[data-adev-review-carousel-block="prev"]');
            const nextButton = this.querySelector('[data-adev-review-carousel-block="next"]');
            
            if (prevButton && nextButton) {
                prevButton.addEventListener('click', () => {
                    this.carouselInstance.previous();
                });
                nextButton.addEventListener('click', () => {
                    this.carouselInstance.next();
                });
            }
        }

        initDots() {
            const dotsContainer = this.querySelector('[data-adev-review-carousel-block="dots"]');
            if (!dotsContainer) return;

            const dots = dotsContainer.querySelectorAll('[data-adev-review-carousel-block="dot"]');
            dots.forEach(dot => {
                dot.addEventListener('click', e => {
                    e.preventDefault();
                    const index = parseInt(dot.getAttribute('data-index'), 10);
                    this.carouselInstance.select(index);
                });
            });

            this.carouselInstance.on('change', index => {
                const dots = dotsContainer.querySelectorAll('[data-adev-review-carousel-block="dot"]');
                dots.forEach(dot => dot.classList.remove('is--active'));
                const activeDot = dotsContainer.querySelector(`[data-adev-review-carousel-block="dot"][data-index="${index}"]`);
                if (activeDot) {
                    activeDot.classList.add('is--active');
                }
            });
        }

        destroyCarousel(){
            if(this.carouselInstance){
                this.carouselInstance.destroy();
                window.matchMedia('(min-width: 992px)').removeEventListener('change', () => this.onResize());
            }
        }

        connectedCallback() {
            this.initCarousel();
        }

        disconnectedCallback() {
            this.destroyCarousel();
        }

    });
}