Share the pit I stepped on with the swiper plug-in today. It took two hours to find the problem, to avoid others stepping on the pit, and remind yourself! ! ! !
First pit
Since I am using the CDN to import into the file, index.htmlafter the import is complete, do I have to write a js file to reference its effect components?
Knock it out, I don’t feel anything wrong here, right?
var mySwiper = new Swiper ('.swiper-container', {
loop: true, // 循环模式选项
direction: 'horizontal',
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
autoplay:2000,
autoplayDisableOnInteraction : false //用户操作后不停止
})
I used it when importing, but I <link rel="stylesheet" href="js/index.js">thought it was okay before . I think it’s okay to import css in this way, and import it like this in JavaScript.
正确的应该是
<script src="js/index.js" type="text/javascript"></script>
Second pit
When I felt that my import style was okay, 是不是我的CDN包引入错误了呢？是不是我的index.js里面的文件写错了呢？是不是引入CDN包不行呢？是不是需要下载文件在来导入页面呢？
I was thinking that it was right. I tried all of the above questions and found that it was still wrong. I just came to notice that the above imported external file had a problem, and then it was revised.
After the change, it still didn't work, and an error was reported. 
Open Du Niang and search. I found this error on the swiper website.
I understand the vernacular meaning of my own understanding, which means that the CDN is used. However, the index.js file you quoted is not imported after the CDN is quoted, so an error will be reported. After the
modification is completed, it can be normal. Carousel
Attach the code Ha
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入swiper -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<!-- 创建的css js-->
<link rel="stylesheet" href="css/index.css">
<title>Document</title>
</head>
<style>
/* body{
background-image: url(image/banner1.jpg);
background-attachment: fixed;
} */
</style>
<body>
<!-- 图片 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 图片需要自己修改路径 有几个图片 外部就要包裹几个
<div class="swiper-slide"> -->
<div class="swiper-slide"><img src="image/banner1.jpg" alt=""></div>
<div class="swiper-slide"><img src="image/banner2.jpg" alt=""></div>
</div>
<div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
<div class="swiper-button-next"></div><!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
</div>
<!-- 引入swiper -->
<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
<script src="js/index.js" type="text/javascript"></script>
</body>
</html>
css style, this can refer to the official document to modify the color attributes, size, etc.
.swiper-container{
--swiper-theme-color: #ff6600;/* 设置Swiper风格 */
--swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
--swiper-navigation-size: 30px;/* 设置按钮大小 */
}
JavaScript files (the file name referenced in html is index.js) can be modified by yourself
var mySwiper = new Swiper ('.swiper-container', {
loop: true, // 循环模式选项
direction: 'horizontal',
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
autoplay:2000,
autoplayDisableOnInteraction : false //用户操作后不停止
})
Okay, let's share it here. If you have any questions, please leave a message, I will reply when I see it