Ez a gist egy könnyű, pluginmentes WordPress [shortcode] megoldást tartalmaz, amely igényes, mobilbarát, lapozható képgalériát hoz létre cikkekben. A kód teljesen önálló, nem használ külső könyvtárakat.

image-carousel-shortcode-clean.php

/* --------------------------------------------------------------
 *  Cikkek esetén igényes, lapozgatható fotógalléria megvalósítás
 *  WordPress shortcode formájában.
 *
 *  Használat:
 *  [image_carousel 
 *      images="url1,url2,url3" 
 *      alts="ALT 1; ALT 2, amiben lehet vessző; ALT 3"
 *  ]
 *
 *  FONTOS: az ALT-eket pontosvessző (;) választja el!
 * -------------------------------------------------------------- */

if (!function_exists('image_carousel_shortcode_clean')) {

    function image_carousel_shortcode_clean( $atts ) {

        // Shortcode attribútumok
        $atts = shortcode_atts(array(
            'images' => '',
            'alts'   => '',
        ), $atts, 'image_carousel');

        // Képek feldolgozása (vesszővel elválasztva)
        $images = array_filter(array_map('trim', explode(',', $atts['images'])));

        // ALT-ek feldolgozása (PONTOSVESSZŐVEL elválasztva!)
        $alts = array_map('trim', explode(';', $atts['alts']));

        if (empty($images)) {
            return '<p><em>Nincs megadva kép a carouselhez.</em></p>';
        }

        // ALT-ek kitöltése, ha kevesebb van
        $alts = array_pad($alts, count($images), '');

        // HTML wrapper + gombok
        $output  = '<div class="carousel-wrapper">';
        $output .= '<button class="carousel-btn prev">&#9664;</button>';
        $output .= '<div class="carousel-track">';

        foreach ($images as $idx => $url) {
            $output .= sprintf(
                '<div class="carousel-slide"><img src="%s" alt="%s" loading="lazy"></div>',
                esc_url($url),
                esc_attr($alts[$idx])
            );
        }

        $output .= '</div>'; // .carousel-track
        $output .= '<button class="carousel-btn next">&#9654;</button>';
        $output .= '</div>'; // .carousel-wrapper

        // CSS
        $output .= '
        <style>
        .carousel-wrapper{
            position:relative;
            width:100%;
        }
        .carousel-track{
            overflow-x:scroll;
            overflow-y:hidden;
            width:100%;
            display:flex;
            scroll-snap-type:x mandatory;
            scroll-behavior:smooth;
            -webkit-overflow-scrolling:touch;
            scrollbar-width:none;
        }
        .carousel-track::-webkit-scrollbar{ display:none; }
        .carousel-slide{
            flex:0 0 100%;
            scroll-snap-align:start;
        }
        .carousel-slide img{
            width:100%;
            height:auto;
            display:block;
        }
        .carousel-btn{
            position:absolute;
            top:50%;
            transform:translateY(-50%);
            background:none;
            border:none;
            color:#fff;
            font-size:32px;
            cursor:pointer;
            z-index:50;
            padding:0 10px;
            text-shadow:0 0 8px rgba(0,0,0,0.6);
        }
        .carousel-btn.prev{ left:10px; }
        .carousel-btn.next{ right:10px; }
        </style>
        ';

        // JS
        $output .= '
        <script>
        document.addEventListener("DOMContentLoaded", function(){

            const wrapper = document.querySelector(".carousel-wrapper");
            if (!wrapper) return;

            const carousel = wrapper.querySelector(".carousel-track");
            const btnPrev = wrapper.querySelector(".carousel-btn.prev");
            const btnNext = wrapper.querySelector(".carousel-btn.next");

            const slides = carousel.querySelectorAll(".carousel-slide");
            const slidesCount = slides.length;

            let slideIndex = 0;

            function slideWidth(){
                return carousel.offsetWidth;
            }

            function goTo(idx){
                slideIndex = Math.min(Math.max(idx, 0), slidesCount - 1);
                carousel.scrollLeft = slideIndex * slideWidth();
            }

            btnPrev.addEventListener("click", ()=>goTo(slideIndex - 1));
            btnNext.addEventListener("click", ()=>goTo(slideIndex + 1));

            let startX = 0;
            carousel.addEventListener("touchstart", e=>{
                startX = e.touches[0].clientX;
            });
            carousel.addEventListener("touchend", e=>{
                const diff = e.changedTouches[0].clientX - startX;
                if (Math.abs(diff) > 50){
                    goTo(slideIndex + (diff < 0 ? 1 : -1));
                }
            });

            window.addEventListener("resize", ()=>goTo(slideIndex));

        });
        </script>
        ';

        return $output;
    }
}

add_shortcode('image_carousel', 'image_carousel_shortcode_clean');

Értelemszerűen egy adott WordPress sablon (theme) functions.php fájljában lehet felhasználni. Nem mindenki használja a WordPress CMS új mániáját a Guttenberg csodát. Vannak olyanok és őszintén mondom megtudom érteni őket, akik a mai napig a klasszikus felületet lehetőségeit használják. A WordPress képgaléria lehetőség szerintem ilyen megoldást nem nyújt. Ha több fotót szeretnél megjeleníteni, de azt szeretnéd, hogy ne foglaljon sok helyet a cikkben, akkor mint praktikum ez a megoldás tetszhet neked.