我在网站上创建了一个漂亮的滑块。我可以看到它进入了“滑动模式”，但是也没有显示我已经告诉过的幻灯片数量。它们都在那里，我可以通过更改它们的“ left”和“ opacity” css值使它们显示出来。
我将永远无法可靠地复制它，因为我会永远使用它，并且如果我将它弄哑的话，它将可以正常工作。
如果有人认为可以破解，请点击此处：https://development.materialshub.com/2018/11/13/altered-visions/
滑块在主图像下方的蓝色部分内。应该有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
});
任何指导都很棒！
谢谢杰森。
** Irina-
/* 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("https://development.materialshub.com/wp-content/uploads/2018/09/zirconium-lump.jpg"); 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("https://development.materialshub.com/wp-content/uploads/2018/09/zirconium-lump.jpg");"></div>
</div>
<div class="case-study-slider-image slick-slide" style="background-image: url("https://development.materialshub.com/wp-content/uploads/2018/09/silicone-elastomer-tube.png"); 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("https://development.materialshub.com/wp-content/uploads/2018/09/silicone-elastomer-tube.png");"></div>
</div>
<div class="case-study-slider-image slick-slide" style="background-image: url("https://development.materialshub.com/wp-content/uploads/2018/09/silicon-sputtering-target.jpeg"); 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("https://development.materialshub.com/wp-content/uploads/2018/09/silicon-sputtering-target.jpeg");"></div>
</div>
<div class="case-study-slider-image slick-slide slick-current slick-active" style="background-image: url("https://development.materialshub.com/wp-content/uploads/2018/09/tantalum-sputtering-target-2.jpg"); 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("https://development.materialshub.com/wp-content/uploads/2018/09/tantalum-sputtering-target-2.jpg"); 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/slick-carousel@1.8.1/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>
**
答案 0 :(得分：1)
我不敢相信，但是fade属性无法让您的导航滑块正常工作。因此，请从滑块中删除注释行：
$('.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
});