Плавный слайдер - слайды сжимаются по мере загрузки в слайдер большего количества слайдов. - PullRequest
Новая
       73

Плавный слайдер - слайды сжимаются по мере загрузки в слайдер большего количества слайдов.

0 голосов
/ 05 августа 2020

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

Очень сложно объяснить, что я вижу, происходит, так что, возможно, я может объяснить, что я sh должен произойти, и вы сами можете увидеть разницу в этом примере и направить меня оттуда:

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

I wi sh, чтобы разместить ползунок навигации над ползунком полной ширины в левом нижнем углу, с разнесением с использованием поля для выравнивания с содержимым моей страницы шириной 1248 пикселей.

Ползунок навигации будет таким же изображения в виде большого ползунка на всю ширину с размером миниатюр, который будет действовать как «точки» ползунка, помогая перемещаться по каждому слайду.

Я понимаю, что не настроил это как навигацию с все же. Я просто пытаюсь заставить стили работать. Я использую sh для ползунка навигации, чтобы он был настолько широк, насколько это необходимо для размещения любого количества слайдов, но с максимальной шириной 100% и максимальной шириной в пикселях 624 пикселей (если это не превышает размер страницы width).

Ссылка в примере напрямую не отражает то, что я вижу. Но он по-прежнему не работает и является прямой копией моего кода после загрузки страницы.

Вы можете посмотреть видео о том, что я вижу здесь: 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; ?>" alt="Product image" 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; ?>" alt="Product navigation image" style="display: none;">
                    </div>

                <?php
                endforeach; ?>

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

Чтобы указать, мне нужна только помощь в создании меньшего навигационного ползунка, который абсолютно позиционирован, чтобы занимать столько же ширины по мере необходимости (1 слайд = ширина изображения 80 пикселей + интервал от заполнения и поля | 2 слайда = ширина изображения 2 x 80 пикселей + интервал), максимум до 4 слайдов шириной. Он также никогда не должен превышать 50% (624 пикселей) ширины содержимого страницы, что составляет 1248 пикселей.

Это то, что, как я полагаю, очень похоже на проблему гибкости с гладким слоем, когда ширина элемента экспоненциально растет по ширине, как называется новый слайд. Однако в данном случае происходит обратное и уменьшается.

Это поставило меня в тупик, и никакие существующие статьи и вопросы в этом сообществе и другие подобные решения вопросов не работают.

РЕДАКТИРОВАТЬ : стили работают, если .slick не запускается изображение ...

Стили слайдера работают без запуска .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
...