问题描述
这是我第一次使用 slick.js 制作旋转木马画廊。我不知道我的函数会发生什么,我不知道是否需要添加另一个句子,或者 HTML 中的脚本顺序是否错误。它向我抛出的唯一错误如下:
这是画廊 HTML:
<div class="slick-gallery slick mb-0 slick-initialized slick-slider">
<button class="slick-prev slick-arrow" aria-label="PrevIoUs" type="button" style="display: block;">PrevIoUs</button>
<div class="slick-list draggable">
<div class="slick-track" style="opacity: 1; width: 4810px; transform: translate3d(-1850px,0px,0px);">
<div class="slider__item slick-slide slick-cloned" tabindex="-1" style="width: 370px;" role="tabpanel" aria-describedby="slick-slide-control02" data-slick-index="-3" aria-hidden="true">
<img src="view/images/gallery-3.jpg" alt="slider">
</div>
<div class="slider__item slick-slide slick-cloned" tabindex="-1" style="width: 370px;" role="tabpanel" aria-describedby="slick-slide-control03" data-slick-index="-2" aria-hidden="true">
<img src="view/images/gallery-4.jpg" alt="slider">
</div>
<div class="slider__item slick-slide slick-cloned" tabindex="-1" style="width: 370px;" role="tabpanel" aria-describedby="slick-slide-control04" data-slick-index="-1" aria-hidden="true">
<img src="view/images/gallery-5.jpg" alt="slider">
</div>
<div class="slider__item slick-slide" tabindex="-1" style="width: 370px;" role="tabpanel" id="slick-slide00" aria-describedby="slick-slide-control00" data-slick-index="0" aria-hidden="true">
<img src="view/images/gallery-1.jpg" alt="slider">
</div>
<div class="slider__item slick-slide" tabindex="-1" style="width: 370px;" role="tabpanel" id="slick-slide01" aria-describedby="slick-slide-control01" data-slick-index="1" aria-hidden="true">
<img src="view/images/gallery-2.jpg" alt="slider">
</div>
<div class="slider__item slick-slide slick-current slick-active" tabindex="0" style="width: 370px;" role="tabpanel" id="slick-slide02" aria-describedby="slick-slide-control02" data-slick-index="2" aria-hidden="false">
<img src="view/images/gallery-3.jpg" alt="slider">
</div>
<div class="slider__item slick-slide slick-active" tabindex="0" style="width: 370px;" role="tabpanel" id="slick-slide03" aria-describedby="slick-slide-control03" data-slick-index="3" aria-hidden="false">
<img src="view/images/gallery-4.jpg" alt="slider">
</div>
<div class="slider__item slick-slide slick-active" tabindex="0" style="width: 370px;" role="tabpanel" id="slick-slide04" aria-describedby="slick-slide-control04" data-slick-index="4" aria-hidden="false">
<img src="view/images/gallery-5.jpg" alt="slider">
</div>
<div class="slider__item slick-slide slick-cloned" tabindex="-1" style="width: 370px;" role="tabpanel" aria-describedby="slick-slide-control00" data-slick-index="5" aria-hidden="true">
<img src="view/images/gallery-1.jpg" alt="slider">
</div>
<div class="slider__item slick-slide slick-cloned" tabindex="-1" style="width: 370px;" role="tabpanel" aria-describedby="slick-slide-control01" data-slick-index="6" aria-hidden="true">
<img src="view/images/gallery-2.jpg" alt="slider">
</div>
<div class="slider__item slick-slide slick-cloned" tabindex="-1" style="width: 370px;" role="tabpanel" aria-describedby="slick-slide-control02" data-slick-index="7" aria-hidden="true">
<img src="view/images/gallery-3.jpg" alt="slider">
</div>
<div class="slider__item slick-slide slick-cloned" tabindex="-1" style="width: 370px;" role="tabpanel" aria-describedby="slick-slide-control03" data-slick-index="8" aria-hidden="true">
<img src="view/images/gallery-4.jpg" alt="slider">
</div>
<div class="slider__item slick-slide slick-cloned" tabindex="-1" style="width: 370px;" role="tabpanel" aria-describedby="slick-slide-control04" data-slick-index="9" aria-hidden="true">
<img src="view/images/gallery-5.jpg" alt="slider">
</div>
</div>
</div>
<button class="slick-next slick-arrow" aria-label="Next" type="button" style="display: block;">Next</button>
</div>
这是我的脚本 main.js 的一部分:
var slider = function() {
if ($('.slick-gallery')) {
$('.slick-gallery').not('.slick-initialized').slick();
$('.slick-gallery').slick({
centerMode: false,dots: false,infinite: true,speed: 300,slidesToShow: 3,slidesToScroll: 1,responsive: [
{
breakpoint: 1024,settings: {
slidesToShow: 3,slidesToScroll: 3,dots: true
}
},{
breakpoint: 768,settings: {
slidesToShow: 1,dots: true
}
}
]
});
}
if ($('.slick-wishes')) {
$('.slick-wishes').slick({
dots: true,arrows: false
});
}
if ($('.slick-gifts')) {
$('.slick-gifts').slick({
dots: true,arrows: false,slidesToShow: 5,{
breakpoint: 640,}
}
]
});
}
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)