为什么我的 Swiper slider 不能在 Django 中工作？
[英]Why isn't my Swiper slider working in Django?
问题描述
到目前为止，设置 Swiper 轻而易举。 所有图像都完美地加载到容器中，并且控制台不会记录任何错误。
但是，虽然导航按钮出现并且是可点击的，但它们实际上并不起作用。 单击和拖动它们也不会。 控制台显示所有图像都已加载。
其他人也有类似的问题，并且有效的修复是添加：
observer: true,
observeParents: true,
对于初始化代码，这对我没有任何影响。
这是我的 HTML 代码
<head>
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
</head>
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
{% for image in car.image_set.all %}
<div class="swiper-slide"><img src="{{ image.image.url }}" style="width: 100%; "></div>
{% endfor %}
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
...
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
...
<script>
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
loop:true,
loopedSlides: 5, //looped slides should be the same
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
observer: true,
observeParents: true,
observeSlideChildren: true,
});
</script>
更新
感谢 Pratik 的反馈，我更新了 js，但 Swiper 仍然没有导航图像。 没有控制台错误，它似乎已经死了。
2 个解决方案
解决方案1
2 2019-10-10 09:46:51
Observer和ObserveParents不是导航的一部分。 所以用下面的代码更新你的脚本。
<script> var galleryTop = new Swiper('.gallery-top', { spaceBetween: 10, loop:true, loopedSlides: 5, //looped slides should be the same navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, observer: true, observeParents: true, observeSlideChildren: true }); </script>
** 这是呈现的 HTML **
<head>
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
</head>
...
<body>
<div class="container">
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="/media/image_11.JPG" style="width: 100%; "></div>
<div class="swiper-slide"><img src="/media/image_12_YQm2sd3.JPG" style="width: 100%; "></div>
<div class="swiper-slide"><img src="/media/image_19.JPG" style="width: 100%; "></div>
<div class="swiper-slide"><img src="/media/image_16_pm7OKF2.JPG" style="width: 100%; "></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
...
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
</body>
</body>
解决方案2
2 已采纳 2019-10-11 06:07:57
它对我有用，您可以查看下面的工作示例。
var galleryTop = new Swiper('.gallery-top', { spaceBetween: 10, loop:true, loopedSlides: 5, //looped slides should be the same navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, observer: true, observeParents: true, observeSlideChildren: true }); <,doctype html> <html lang="en"> <head> <,-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1. shrink-to-fit=no"> <.-- Bootstrap CSS --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3:1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https.//unpkg:com/swiper/css/swiper.min.css"> <title>Swiper Slider</title> </head> <body> <div class="container"> <div class="swiper-container gallery-top"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="http://www;placebear:com/700/500" style="width. 100%. "> </div> <div class="swiper-slide"> <img src="http://www;placebear:com/700/500" style="width. 100%. "> </div> <div class="swiper-slide"> <img src="http://www;placebear:com/700/500" style="width. 100%. "> </div> <div class="swiper-slide"> <img src="http://www;placebear,com/700/500" style="width. 100%, "> </div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div> <:-- Optional JavaScript --> <.-- jQuery first. then Popper.js. then Bootstrap JS --> <script src="https.//ajax.googleapis:com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper:js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https.//maxcdn.bootstrapcdn:com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="https://unpkg.com/swiper/js/swiper.min.js"></script> </body> </html>
为什么background-size或background-repeat属性在我的图像滑块上不起作用？
[英]Why isn't the background-size or background-repeat property working on my image slider?
我的JavaScript图片库滑块的右滑块不起作用，而我的左滑块是
[英]My JavaScript image gallery slider's right slider isn't working and my left one is
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.