光滑的滑块 - 随着更多幻灯片加载到滑块中，幻灯片会缩小

Posted 2023-05-08

【中文标题】光滑的滑块 - 随着更多幻灯片加载到滑块中，幻灯片会缩小

【英文标题】：Slick slider - Slides shrink as more slides load into the slider

【发布时间】：2020-11-25 12:53:44

【问题描述】：

我很难理解为什么我的光滑滑块，导航较小的滑块会随着新图像加载到滑块中而缩小。

很难解释我所看到的情况，所以也许我可以解释我希望发生的情况，您可以在这个示例中自己看到不同之处并从那里指导我：

https://codepen.io/jason-is-my-name/pen/QWNWMyY?editors=1111

我希望将导航滑块浮动到左下角全宽滑块的顶部，使用边距隔开以与我的 1248 像素宽的页面内容对齐。

导航滑块将与较大的全宽滑块相同的图像，缩略图大小，将充当滑块的“点”以帮助导航到每张幻灯片。

感谢我尚未将其设置为导航。我只是想让这些样式起作用。我希望导航滑块的宽度与存在的许多幻灯片一样宽，但最大宽度为 100%，最大像素宽度为 624 像素（如果这不超过页面宽度）。

示例链接并不直接代表我所看到的。但它仍然坏了，是页面加载后我的代码的直接副本。

你可以在这里看到我所看到的视频：https://streamable.com/6o4q2x

在页面加载之前，我使用 php 插入滑块资源，如下所示：

<div class="the-slider-container">
    <div id="the-slider" class="the-slider">

        <?php
        global $product;
        $product_image_ids = $product->get_gallery_image_ids();

        foreach( $product_image_ids as $product_image_id ) :
            $image_url = wp_get_attachment_url( $product_image_id ); ?>

            <div class="the-slider-slide" style="background-image: url('<?php echo $image_url; ?>');">
                <img class="the-slider-slide-image" src="<?php echo $image_url; ?>"  style="display: none;">
            </div>

        <?php
        endforeach; ?>

    </div>

    <div class="the-slider-nav-container">
        <div class="the-slider-nav-container-inner">
            <div id="the-slider-nav" class="the-slider-nav">

                <?php
                global $product;
                $product_nav_image_ids = $product->get_gallery_image_ids();

                foreach( $product_nav_image_ids as $product_nav_image_id ) :
                    $nav_image_url = wp_get_attachment_url( $product_nav_image_id ); ?>

                    <div class="the-slider-nav-slide" style="background-image: url('<?php echo $nav_image_url; ?>');">
                        <img class="the-slider-nav-slide-image" src="<?php echo $nav_image_url; ?>"  style="display: none;">
                    </div>

                <?php
                endforeach; ?>

            </div>
        </div>
    </div>
</div>

要指定，我只需要帮助制作绝对定位的较小导航滑块，以占用所需的宽度（1 幻灯片 = 80 像素图像宽度 + 距填充和边距的间距 | 2 幻灯片 = 2 x 80 像素图像宽度 + 间距），最多 4 张幻灯片宽度。它也不得超过页面内容宽度的 50% (624px)，即 1248px。

这是我认为与 slick 的 flex 问题非常相似的问题，其中元素的宽度在调用新幻灯片时呈指数增长。然而，在这种情况下，它正在做相反的事情并且正在缩小。

这让我很困惑，这个社区中没有现有的文章和问题，其他类似的问题解决方案也不起作用。

编辑：如果 .slick 没有运行图像，样式工作...

编辑：添加 .slick()

// PRODUCT AND SPOTLIGHT HERO SLIDER INIT
    var theSlider = $('#the-slider');
    if (theSlider.length) 
        theSlider.slick(
            dots: false,
            arrows: false,
            infinite: false,
            autoplay: false,
            autoplaySpeed: 5000,
            pauseOnHover: false,
            slidesToShow: 1,
            slidesToScroll: 1,
            swipeToSlide: true,
            fade: true,
            cssEase: 'linear',
            //asNavFor: theSliderNav
        );
    

    var theSliderNav = $('#the-slider-nav');
    if (theSliderNav.length) 
        theSliderNav.slick(
            dots: false,
            arrows: true,
            infinite: false,
            autoplay: false,
            slidesToShow: 4,
            slidesToScroll: 1,
            cssEase: 'linear',
            focusOnSelect: false,
            //asNavFor: theSlider,
            responsive: [
                breakpoint: 420,
                settings: 
                    slidesToShow: 3
                
            ]
        );
    

    $('#the-slider-nav .slick-slide').on('click', function()
        $('#the-slider').slick('slickGoTo', $(this).data('slickIndex'));
    );
// END PRODUCT AND SPOTLIGHT HERO SLIDER INIT

【问题讨论】：

你能添加你的 Slick 初始化对象和你应用到幻灯片的 CSS 吗？

【参考方案1】：

我遇到了同样的问题，这是我能找到的唯一一个与之相关的 SO 答案。如果它对其他人有帮助，问题在于我的幻灯片 div 的边距。我的样式表将它们设置为百分比，因此随着添加更多幻灯片，边距变得越来越大，直到幻灯片 div 本身很小。我改为将其更改为 px 并像魅力一样工作。