Question

我想在我的网站上创建一个光滑的滑块。它应该只有一行，但要显示的幻灯片和要滚动的幻灯片都带有任何值，它会创建多余的行。这是代码：

是这样的：

我有一个列表，例如：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是查询集的列表。此代码会导致滑动条滑动，并正确显示related_products中的所有项目，但是每次以related_products的任意长度显示时，滑动条中的最后一个项目都会跳到新行中。因此它会在滑块中创建多余的行。

Answer 1

尝试为相关容器指定固定高度（如果可以）和溢出-x：scroll。

光滑的滑块会创建意外的行

1 个答案: