我正在为艺术家创建的页面上使用Swiper,但是我对Javascript不太满意。我正在从CDN加载Swiper JavaScript文件:
https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js
该网站是在本地构建的,因此我无法链接到该网站。我正在使用最小化的jQuery。
整理出一些未定义的函数错误后,我在页面上显示了第一张幻灯片以及导航箭头。但是,箭头实际上并没有执行任何操作,并且幻灯片完全没有自动或与导航箭头一起滑动。
我遵循了Swiper网站上的“ Getting Started with Swiper”指南。
我已经搜索过Google,Swiper论坛和Stack Overflow,但没有找到任何有用的信息。我在MIME类型方面遇到问题,解决了那些问题。但是我还没有发现有人对幻灯片的切换没有问题,所以我怀疑问题是我对JavaScript不满意。
我遇到的一个问题是我无法使用jQuery占位符($
),我不得不使用jQuery
而不是$
来使滑块完全显示
我期望的是图像会自动滑动并带有导航箭头。发生的情况是,即使有箭头,第一张图像也会显示并且不会改变。
var mySwiper = new Swiper('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<div id="content">
<div class="swiper-wrapper">
<div class="swiper-slide">1</div>
<div class="swiper-slide">2</div>
<div class="swiper-slide">3</div>
<div class="swiper-slide">4</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
答案 0 :(得分:0)
只是一些小问题:
容器需要类“ swiper-container”。
(要么或滑动选择器应为#content
。)
按钮应位于包装纸的外部。
在您的情况下,layout类似于:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
var mySwiper = new Swiper('.swiper-container', {
// Optional parameters
direction: 'horizontal',
loop: true,
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="http://lorempixel.com/500/170/?1" alt=""></div>
<div class="swiper-slide"><img src="http://lorempixel.com/500/170/?2" alt=""></div>
<div class="swiper-slide"><img src="http://lorempixel.com/500/170/?3" alt=""></div>
<div class="swiper-slide"><img src="http://lorempixel.com/500/170/?4" alt=""></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>