0

我刚刚使用 splide 制作了一个旋转木马，我只是按照我想要的方式制作了它。只剩下一个细节，它不起作用。我不想在开头显示主滑块，并且仅在用户单击任何缩略图时才开始显示它。我是这样实现的：

#main-slider{
    display:none;
}

接着

thumbnails.on('click', function(){
            document.getElementById('main-slider').style.display = "block";
        })

但主滑块只能部分可见。也就是说，只会显示分页和箭头。无法显示所有内容，尤其是图像。

这是整个代码：

{% load static %}
{% comment %} If you want to fully customize the slider appearance, pick the splide-core.min.css file that does not include arrows, pagination and progress bar styles, which reduces unnecessary "override" works.  {% endcomment %}
<link href="{% static 'js/splide-3.2.1/dist/css/splide.min.css' %}" rel="stylesheet">
<style>
.splide__slide {
    /* opacity of the thumbnails */
    opacity: .6; 
}

.splide__slide.is-active {
    /* opacity of the selected thumbnail */
    opacity: 1;
}

#main-slider{
    display:none;
}
</style>
<div class="splide">
<div id="main-slider" class="splide">
    <div class="splide__track">
        <ul class="splide__list">
        {% for image in images %}
            <li class="splide__slide">
                <img src="{{ image.image.url }}" />
            </li>
        {% endfor %}
        </ul>
    </div>
</div>
<div id="thumbnail-slider" class="splide">
    <div class="splide__track">
        <ul class="splide__list">
            {% for image in images %}
                <li class="splide__slide">
                    {% comment %} data-splide-lazy must be enabled for lazy load {% endcomment %}
                    <img src="{{ image.image.url }}" data-splide-lazy="{{ image.image.url }}">
                </li>
            {% endfor %}
        </ul>
        </div>
    </div>
</div>

<script>
    document.addEventListener( 'DOMContentLoaded', function () {
        var main = new Splide( '#main-slider', {
            type       : 'slide',
            heightRatio: 0.5,
            speed      :500,
            pagination : true,
            arrows     : true,
            cover      : true,
        } );

        var thumbnails = new Splide( '#thumbnail-slider', {
            fixedWidth  : 100,
            fixedHeight : 60,
            gap         : 10,
            perMove     : 1,
            perPage     : 1,
            rewind      : true,
            pagination  : false,
            cover       : true,
            isNavigation: true,
            lazyLoad    : false,
            keyboard    : true,
            wheel       : true,
            focus      : 'center',
              dragMinThreshold: {
                mouse: 4,
                touch: 10,
            },
            breakpoints : {
                600: {
                    fixedWidth : 60,
                    fixedHeight: 44,
                },
            },
        } );
        main.sync( thumbnails );
        main.mount();
        thumbnails.mount();
        thumbnails.on('click', function(){
            document.getElementById('main-slider').style.display = "block";
        })
    } );
    </script>
    <script src="{% static 'js/splide-3.2.1/dist/js/splide.min.js' %}"></script>
4

0 回答 0