WordPress - 滑动轮播导致不必要的水平滚动

Question

我有一个 elementor 网站，我需要在帖子内容中插入一些不同的图像轮播。最初我使用的是 elementor，并且为我需要的每个轮播制作了一个模板。目前，我决定切换到一个短代码，该代码将使用包含的 elementor 滑动器并创建一个轮播。这是代码

function custom_carousel_shortcode($atts) {
    
    $atts = shortcode_atts(
        array(
            'ids' => '',
        ),
        $atts,
        'custom-carousel'
    );

    $image_ids = explode(',', $atts['ids']);

    $carousel_html = '';

    foreach ($image_ids as $image_id) {
        $image_url = wp_get_attachment_image_url($image_id, 'full');
        if ($image_url) {
            $carousel_html .= '<div class="swiper-slide"><img src="' . esc_url($image_url) . '" class="swiper-slide-img" /></div>';
        }
    }

    $output = '<div class="elementor-widget-container"><div class="elementor-element elementor-widget elementor-image-carousel"><div id="swiper_init" class="swiper-container"><div class="swiper-wrapper">' . $carousel_html . '</div><div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div></div></div>';

    $output .= '<script>
    jQuery(document).ready(function($) {
        $(window).on("load", function() {
            console.log(elementorFrontend.utils);
            let mySwiper;
            const swiperElement = $(".swiper-container");
            const swiperConfig = {
                //centeredSlides: true,
                loop: false,
                pagination: {
                    el: ".swiper-pagination"
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev"
                },
                //autoplay: {
                //  delay: 5000
                //},
                //slidesPerView: 1,
                //slidesPerGroup: 1,
            };
            //
            if (typeof elementorFrontend.utils.swiper === "function") {
                new elementorFrontend.utils.swiper(swiperElement, swiperConfig).then((newSwiperInstance) => {
                    
                    console.log("New Swiper instance is ready: ", newSwiperInstance);
                    mySwiper = newSwiperInstance;
                });
            } else if (typeof Swiper === "function") {
                console.log("Swiper global variable is ready, create a new instance: ", Swiper);
                mySwiper = new Swiper(".swiper-container", swiperConfig);
            } else {
                console.error("Swiper initialization failed.");
            }
        });
    });
    </script>';

    return $output;
}
add_shortcode('custom-carousel', 'custom_carousel_shortcode');

目前，swiper 将在我测试的地方正确加载，并且能够使用其 id 获取图像。我目前的主要问题是布局。我注意到我无法只显示一张幻灯片，并且属于轮播的其他幻灯片将位于屏幕的左侧或右侧，这将导致水平滚动。我如何解决这个问题并获得一个像 elementor 的轮播小部件一样工作的轮播？我需要调整滑动器设置或使用 CSS 吗？

更新

我已经使用评论中发布的建议规则修复了 CSS 问题。目前我注意到，当我将短代码多次放入页面内时，只有第一个轮播可以工作，将渲染的另一个轮播将不起作用，通过查看控制台，我注意到滑动器实例将仅针对插入到页面中的第一个轮播，而不是每个轮播。我怎样才能解决这个小问题？

Answer 1

您可以使用

slidesPerView

选项设置同时显示多少张幻灯片。

此外，为了避免出现水平滚动条，您可以使用

overflow-x: hidden;

并将其设置到您的容器（在您的情况下为

.swiper-container

）。