скользящий слайдер создает неожиданную строку

Question

Я хочу создать скользкий слайдер на моем сайте. он должен иметь только одну строку, но с любыми значениями для показа слайдов и прокрутки слайдов, он создает нежелательную строку. вот код:

это так:

У меня есть список как: 1, 2, 3, 4, 5

должно быть показано так: 1,2,3,4,5

но это показано так:

1011 * 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: прокрутка для связанных контейнеров.