Comparta el hoyo que pisé con el plug-in swiper hoy. Me tomó dos horas encontrar el problema, evitar que otros pisaran el hoyo, ¡y recordarlo a usted mismo! ! ! !
Primer hoyo
Dado que estoy usando el CDN para importar en el archivo, una index.htmlvez que se completa la importación, ¿tengo que escribir un archivo js para hacer referencia a sus componentes de efecto?
Déjalo inconsciente, no siento nada malo aquí, ¿verdad?
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 //用户操作后不停止
})
Lo usé al importar, pero <link rel="stylesheet" href="js/index.js">pensé que estaba bien antes . Creo que está bien importar css de esta manera e importarlo así en JavaScript.
正确的应该是
<script src="js/index.js" type="text/javascript"></script>
Segundo pozo
Cuando sentí que mi estilo de importación estaba bien, pensé 是不是我的CDN包引入错误了呢？是不是我的index.js里面的文件写错了呢？是不是引入CDN包不行呢？是不是需要下载文件在来导入页面呢？
que era correcto. Probé todas las preguntas anteriores y descubrí que todavía estaba mal. Me di cuenta de que el archivo externo importado anterior tenía un problema y luego se revisó.
Después del cambio, todavía no funcionó y se informó un error. 
Abra Du Niang y busque. Encontré este error en el sitio web de swiper.
Entiendo el significado vernáculo de mi propio entendimiento, lo que significa que se usa el CDN. Sin embargo, el archivo index.js que citó no se importa después de que se cita el CDN, por lo que se producirá un error informado. Una vez
completada la modificación, puede ser normal. Carrusel
Adjunta el código 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>
estilo css, esto puede referirse al documento oficial para modificar los atributos de color, tamaño, etc.
.swiper-container{
--swiper-theme-color: #ff6600;/* 设置Swiper风格 */
--swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
--swiper-navigation-size: 30px;/* 设置按钮大小 */
}
Los archivos JavaScript (el nombre del archivo al que se hace referencia en html es index.js) puede modificarlo usted mismo
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 //用户操作后不停止
})
Bien, compartámoslo aquí. Si tiene alguna pregunta, deje un mensaje, le responderé cuando lo vea