[英]Swiper not switching slides
我在一个我正在为艺术家建造的页面上使用Swiper ,而且我对Javascript不太满意。 我正在从CDN加载Swiper JavaScript文件:
https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.xx/js/swiper.min.js
该网站正在本地构建,因此我无法在线链接到该网站。 我正在使用最小化的jQuery。
在整理出一些未定义的函数错误之后,我得到了页面上显示的第一张幻灯片以及导航箭头。 但是,箭头实际上并没有做任何事情,并且幻灯片根本没有滑动,自动或使用导航箭头。
我按照Swiper网站上的“Swiper 入门 ”指南进行操作。
我搜索了谷歌,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>
只是一些小问题:
容器需要“swiper-container”类。
(要么是滑动选择器应该是#content
。)
按钮应位于包装器外部。
在您的情况下, 布局将是:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.