javascript - 光滑的 slider 创建意外的行

Question

我想在我的网站上创建一个漂亮的 slider 。它应该只有一行，但是对于要显示的幻灯片和要滚动的幻灯片具有任何值，它会创建一个不需要的行。这是代码:

是这样的:

我有一个列表:1、2、3、4、5

应该这样显示:1,2,3,4,5

但是显示是这样的:

1,2,3,4

5

<div class="related-container mt-1">
    {% for product in popular_products %}
        <div class="related-item" {% if product.show_main_price != '0' %} style='border: #24841599 3px solid;' {% endif %} >
            <a href="{{ product.page_url }}">
                <img class="related-item-image" src="{{ product.list_image_url }}" alt="{{ product.title }}"/>
                <div class="related-info">
                    <div class="text-lg title">
                        {{ product.title }}
                        {% if product.show_main_price != '0' %}
                        <div style="text-decoration: line-through; text-decoration-color: red;color: red; margin-top: 10px">{{ product.show_main_price }}</div>
                        {% endif %}  
                    </div>
                    {% with product.main_field_val as main_field_val %}
                        {% if main_field_val.image_url %}
                            <img class="main-field-image" src="{{ main_field_val.image_url }}"
                                 title="{{ main_field_val.title }}" alt="{{ main_field_val.title }}"/>
                        {% else %}
                            <div class="main-field-image">{{ main_field_val.title }}</div>
                        {% endif %}
                    {% endwith %}
                </div>
            </a>
            {% if product.can_add_to_cart %}
                <button type="button" class="related-btn pull-left active"
                        onclick="addToCartBtn('{{ product.add_cart_url }}')">
                    <span class="fa fa-shopping-cart"></span> {{ product.show_price }}
                </button>
            {% else %}
                <button type="button" class="related-btn pull-left">
                    ###
                </button>
            {% endif %}
        </div>
    {% endfor %}
</div>

对于 JS 它有:

$(document).ready(function () {

$('.related-container').slick({
    infinite: false,
    slidesToShow: 4,
    slidesToScroll: 2,
    rtl: true,
    prevArrow: '<div class="right-arrow"></div>',
    nextArrow: '<div class="left-arrow"></div>',
    adaptiveHeight: true,
    responsive: [
        {
            breakpoint: 900,
            settings: {
                slidesToShow: 1.3,
                slidesToScroll: 1
            }
        }
    ]
});

related_products 是查询集的列表。这段代码会导致一个光滑的 slider ，它会正确显示 related_products 中的所有元素，但每次使用任何长度的 related_products 时， slider 中的最后一项都会跳到新行中。所以它会在 slider 中创建不需要的行。

Answer 1

尝试为相关容器提供固定高度(如果可以)和 overflow-x:scroll。