Сlick在幻灯片上用鼠标右键

Question

var swiper = new Swiper(".mySwiper", {
slidesPerView: 3,
centeredSlides: true,
spaceBetween: 30,
type: "custom",
});

https://codepen.io/maks778/pen/mdXKNxo

当你用鼠标右键点击幻灯片时，幻灯片被切换，如何禁用动作

Answer 1

在Swiper 8的问题中已经描述了一个类似的问题。在您的情况下，可能值得尝试使用最新版本的Swiper 7(例如7.4.1)。

下面是您的示例，但使用Swiper版本7.4.1:

var swiper = new Swiper(".mySwiper", {
slidesPerView: 3,
centeredSlides: true,
spaceBetween: 30,
type: "custom",
});
var appendNumber = 4;
var prependNumber = 1;
document
.querySelector(".prepend-2-slides")
.addEventListener("click", function (e) {
e.preventDefault();
swiper.prependSlide([
'<div class="swiper-slide">Slide ' + --prependNumber + "</div>",
'<div class="swiper-slide">Slide ' + --prependNumber + "</div>",
]);
});
document
.querySelector(".prepend-slide")
.addEventListener("click", function (e) {
e.preventDefault();
swiper.prependSlide(
'<div class="swiper-slide">Slide ' + --prependNumber + "</div>"
);
});
document
.querySelector(".append-slide")
.addEventListener("click", function (e) {
e.preventDefault();
swiper.appendSlide(
'<div class="swiper-slide">Slide ' + ++appendNumber + "</div>"
);
});
document
.querySelector(".append-2-slides")
.addEventListener("click", function (e) {
e.preventDefault();
swiper.appendSlide([
'<div class="swiper-slide">Slide ' + ++appendNumber + "</div>",
'<div class="swiper-slide">Slide ' + ++appendNumber + "</div>",
]);
});

html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper {
width: 100%;
height: 300px;
margin: 20px auto;
}
.append-buttons {
text-align: center;
margin-top: 20px;
}
.append-buttons button {
display: inline-block;
cursor: pointer;
border: 1px solid #007aff;
color: #007aff;
text-decoration: none;
padding: 4px 10px;
border-radius: 4px;
margin: 0 10px;
font-size: 13px;
}

<script src="https://unpkg.com/swiper@7.4.1/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper@7.4.1/swiper-bundle.min.css" rel="stylesheet"/>
<div #swiperRef="" class="swiper mySwiper">
<div class="swiper-wrapper">
<a href="" class="swiper-slide">Slide 1</a>
<a href="" class="swiper-slide">Slide 2</a>
<a href="" class="swiper-slide">Slide 3</a>
<a href="" class="swiper-slide">Slide 4</a>
<a href="" class="swiper-slide">Slide 5</a>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<p class="append-buttons">
<button class="prepend-2-slides">Prepend 2 Slides</button>
<button class="prepend-slide">Prepend Slide</button>
<button class="append-slide">Append Slide</button>
<button class="append-2-slides">Append 2 Slides</button>
</p>