# Swipeable Carousel for Any Block

> Turns a Group, Row, Gallery or Query Loop post list with the class "wpide-carousel" into a swipeable horizontal carousel with previous/next buttons, using native scroll snapping.

- Type: HTML
- Runs: Site-wide footer
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: carousel, slider, gallery, scroll-snap
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-scroll-snap-carousel/

## Code

```html
<style>
.wpide-carousel-wrap{position:relative;}
.wpide-carousel{display:flex!important;flex-wrap:nowrap!important;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px;}
.wpide-carousel::-webkit-scrollbar{display:none;}
.wpide-carousel>*{flex:0 0 var(--wpide-slide,80%)!important;max-width:none!important;scroll-snap-align:start;margin:0!important;}
@media (min-width:782px){.wpide-carousel>*{flex-basis:var(--wpide-slide-desktop,calc(33.333% - 11px))!important;}}
.wpide-carousel-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#111;box-shadow:0 2px 10px rgba(0,0,0,.2);font-size:22px;line-height:1;cursor:pointer;z-index:2;}
.wpide-carousel-btn[disabled]{opacity:0;pointer-events:none;}
.wpide-carousel-btn--prev{left:-10px;}.wpide-carousel-btn--next{right:-10px;}
@media (prefers-reduced-motion:reduce){.wpide-carousel{scroll-behavior:auto;}}
</style>
<script>
document.querySelectorAll('.wpide-carousel').forEach(function (track) {
    var wrap = document.createElement('div');
    wrap.className = 'wpide-carousel-wrap';
    track.parentNode.insertBefore(wrap, track);
    wrap.appendChild(track);
    track.setAttribute('tabindex', '0');
    track.setAttribute('role', 'region');
    track.setAttribute('aria-label', track.getAttribute('aria-label') || 'Carousel');
    function make(dir, label, text) {
        var b = document.createElement('button');
        b.type = 'button';
        b.className = 'wpide-carousel-btn wpide-carousel-btn--' + dir;
        b.setAttribute('aria-label', label);
        b.textContent = text;
        b.addEventListener('click', function () {
            var step = track.firstElementChild ? track.firstElementChild.getBoundingClientRect().width + 16 : track.clientWidth;
            track.scrollBy({ left: dir === 'next' ? step : -step });
        });
        wrap.appendChild(b);
        return b;
    }
    var prev = make('prev', 'Previous', '\u2039');
    var next = make('next', 'Next', '\u203A');
    function update() {
        prev.disabled = track.scrollLeft < 5;
        next.disabled = track.scrollLeft + track.clientWidth >= track.scrollWidth - 5;
    }
    track.addEventListener('scroll', update, { passive: true });
    window.addEventListener('resize', update);
    update();
});
</script>
```

## Notes

Add wpide-carousel to the block's Additional CSS class(es). Set the slide width with the --wpide-slide variable (default 80% on phones, 33% on desktop).

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Swipeable Carousel for Any Block" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/