JQuery - 光滑 slider - 仅显示第一张图像

Question

我在网站上创建了一个光滑的 slider 。我可以看到它进入“光滑模式”，但也没有显示我告诉它的幻灯片数量。它们都在那里，我可以通过更改它们的“左”和“不透明度”CSS 值来显示它们。

我将无法复制这个，因为我已经永远可靠地使用了 slick，并且如果我简化它就会工作。

如果有人认为他们可以破解它，请点击这里:https://development.materialshub.com/2018/11/13/altered-visions/

slider 位于主图像下方的蓝色部分内。应该有 4 张光滑的幻灯片。但它只显示一个。

JQuery:

$('.case-study-slider-nav').slick({
    arrows: false,
    dots: false,
    infinite: true,
    speed: 500,
    autoplay: false,
    autoplaySpeed: 3000,
    fade: true,
    slidesToShow: 4,
    slidesToScroll: 1
});

任何指导都会很棒!

谢谢，杰森。

**伊琳娜-

/* SLIDER */
    .cs-slider {
        position: relative;
    }
        /* SLIDES */
        .case-study-slider {
            height: 100vh;
            max-height: 625px;
            background-color: #d8d8d8;
        }
            @media screen and (max-width: 1023px) {
                .case-study-slider {
                    height: 50vh;
                }
            }
            .case-study-slider .case-study-slider-image {
                width: 100%;

                display: block;
                padding: 0;

                text-align: center;
                font-size: 2em;

                background-position: center center;
                background-size: cover;
            }
        /* END SLIDES */

        /* SLIDER NAV */
        .case-study-slider-nav-container {
            width: 100%;
            height: auto;
            position: absolute;
            bottom: 0;
            overflow: auto;
            pointer-events: none;
        }

            .case-study-slider-nav-bg {
                width: calc((100% - 1248px) / 2);
                height: 100%;
                position: absolute;
                left: 0;
                background-color: #1E5790;
            }

            .case-study-slider-nav-box {
                width: auto;
                max-width: 1248px;
                height: 100%;
                margin: 0 auto;
            }

                .case-study-slider-nav {
                    width: auto;
                    max-width: 500px;
                    height: 100%;
                    margin: 0 auto;
                    padding: 20px;
                    display: inline-block;
                    float: left;
                    pointer-events: all;
                    background-image: linear-gradient(to right, #1E5790, #0D295B);
                }
                    @media screen and (max-width: 767px) {
                        .case-study-slider-nav-container {
                            position: relative;
                        }
                            .case-study-slider-nav {
                                width: 100%;
                                max-width: none;
                                display: inline-block;
                            }
                    }

                    .case-study-slider-nav .case-study-nav-slide {
                        width: 100px;
                        height: 100px;
                        /* padding-top: 94px; */
                        margin-right: 20px;
                        display: inline-block;
                        float: left;
                        position: relative;
                        /* left: auto!important; */
                        background-position: center;
                        background-size: cover;
                        background-color: #d8d8d8;
                        cursor: pointer;
                        border: 3px solid white;
                        /* opacity: 1!important; */
                    }
                        @media screen and (min-width: 481px) and (max-width: 767px) {
                            .case-study-slider-nav .case-study-nav-slide {
                                width: calc(25% - 15px);
                                height: 21.253vw;
                                margin-right: 20px;
                            }
                        }
                            .case-study-slider-nav .case-study-nav-slide:nth-of-type(n + 5) {
                                margin-top: 20px;
                            }

                        @media screen and (max-width: 480px) {
                            .case-study-slider-nav .case-study-nav-slide {
                                width: calc(25% - 4.5px);
                                height: 21.253vw;
                                margin-right: 6px;
                            }
                        }
                            .case-study-slider-nav .case-study-nav-slide:nth-of-type(n + 5) {
                                margin-top: 6px;
                            }
                            .case-study-slider-nav .case-study-nav-slide:nth-of-type(4n),
                            .case-study-slider-nav .case-study-nav-slide:last-of-type {
                                margin-right: 0;
                            }
        /* END SLIDER NAV */


        /* SLICK SLIDE TWEAKS */
        /* big */
        .cs-slider .case-study-slider .slick-list,
        .cs-slider .case-study-slider .slick-track {
            height: 100%;
            max-height: 625px;
        }

        /* nav */
        .cs-slider .case-study-slider-nav .slick-track {
            margin: 0 10px;
        }
        .cs-slider .case-study-slider-nav .slick-slide {
            width: 100px;
            height: 100px;
            margin: 20px 10px;
            display: inline-block;
        }
        /* END SLICK SLIDE TWEAKS */
    /* END SLIDER */

    <div class="cs-slider">
        <div class="case-study-slider slick-initialized slick-slider">
            <div class="slick-list draggable">
                <div class="slick-track" style="opacity: 1; width: 7620px;">
                    <div class="case-study-slider-image slick-slide" style="background-image: url(&quot;https://development.materialshub.com/wp-content/uploads/2018/09/zirconium-lump.jpg&quot;); width: 1905px; position: relative; left: 0px; top: 0px; z-index: 998; opacity: 0; transition: opacity 500ms ease 0s;" data-slick-index="0" aria-hidden="true" tabindex="-1">
                        <div class="photo" style="background-image: url(&quot;https://development.materialshub.com/wp-content/uploads/2018/09/zirconium-lump.jpg&quot;);"></div>
                    </div>
                    <div class="case-study-slider-image slick-slide" style="background-image: url(&quot;https://development.materialshub.com/wp-content/uploads/2018/09/silicone-elastomer-tube.png&quot;); width: 1905px; position: relative; left: -1905px; top: 0px; z-index: 998; opacity: 0; transition: opacity 500ms ease 0s;" data-slick-index="1" aria-hidden="true" tabindex="-1">
                        <div class="photo" style="background-image: url(&quot;https://development.materialshub.com/wp-content/uploads/2018/09/silicone-elastomer-tube.png&quot;);"></div>
                    </div>
                    <div class="case-study-slider-image slick-slide" style="background-image: url(&quot;https://development.materialshub.com/wp-content/uploads/2018/09/silicon-sputtering-target.jpeg&quot;); width: 1905px; position: relative; left: -3810px; top: 0px; z-index: 998; opacity: 0; transition: opacity 500ms ease 0s;" data-slick-index="2" aria-hidden="true" tabindex="-1">
                        <div class="photo" style="background-image: url(&quot;https://development.materialshub.com/wp-content/uploads/2018/09/silicon-sputtering-target.jpeg&quot;);"></div>
                    </div>
                    <div class="case-study-slider-image slick-slide slick-current slick-active" style="background-image: url(&quot;https://development.materialshub.com/wp-content/uploads/2018/09/tantalum-sputtering-target-2.jpg&quot;); width: 1905px; position: relative; left: -5715px; top: 0px; z-index: 999; opacity: 1;" data-slick-index="3" aria-hidden="false" tabindex="0">
                        <div class="photo" style="background-image: url(&quot;https://development.materialshub.com/wp-content/uploads/2018/09/tantalum-sputtering-target-2.jpg&quot;); transform: scale(1); background-size: cover; background-position: center center;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="case-study-slider-nav-container">
            <div class="case-study-slider-nav-box">
                <div class="case-study-slider-nav-bg"></div>
                <div class="case-study-slider-nav">
                    <div class="case-study-nav-slide" style="background-image: url('https://development.materialshub.com/wp-content/uploads/2018/09/zirconium-lump.jpg');"></div>
                    <div class="case-study-nav-slide" style="background-image: url('https://development.materialshub.com/wp-content/uploads/2018/09/silicone-elastomer-tube.png');"></div>
                    <div class="case-study-nav-slide" style="background-image: url('https://development.materialshub.com/wp-content/uploads/2018/09/silicon-sputtering-target.jpeg');"></div>
                    <div class="case-study-nav-slide" style="background-image: url('https://development.materialshub.com/wp-content/uploads/2018/09/tantalum-sputtering-target-2.jpg');"></div>
                </div>
            </div>
        </div>
    </div>

    <!--<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">-->
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83f0efeae0e8aee0e2f1ecf6f0e6efc3b2adbbadb2" rel="noreferrer noopener nofollow">[email protected]</a>/slick/slick.min.js"></script>

    <script>
        /*(function($) {
            $(function () {*/
                $('.case-study-slider').slick({
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    arrows: false,
                    dots: false,
                    infinite: true,
                    speed: 500,
                    autoplay: false,
                    autoplaySpeed: 3000,
                    fade: true
                    //,
                    //asNavFor: '.case-study-slider-nav'
                });

                $('.case-study-slider-nav').slick({
                    slidesToShow: 4,
                    slidesToScroll: 1,
                    arrows: false,
                    dots: false,
                    infinite: true,
                    speed: 500,
                    autoplay: false,
                    autoplaySpeed: 3000,
                    fade: true
                    //,
                    //asNavFor: '.case-study-slider'
                });

                //On click of slider-nav childern,
                //Slick slider navigate to the respective index.
                $('.case-study-slider-nav .case-study-nav-slide').click(function() {
                    $('.case-study-slider').slick('slickGoTo',$(this).index());
                });
            /*});
        })(jQuery);*/
    </script>

**

Answer 1

我不敢相信，但是 fade 属性并不能让您的导航 slider 正常工作。因此，请从 slider 中删除注释行:

$('.case-study-slider-nav').slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  arrows: false,
  dots: false,
  infinite: true,
  speed: 500,
  autoplay: false,
  autoplaySpeed: 3000,
  // fade: true // please remove this line from your second (nav) slider
});