I have a question. I want to continue down the page after the slider with the mouse wheel. So 3 go down after going right. When I go up again, it should go to the left.
Codopen https://codepen.io/xlonely/pen/mdXPdxO
I think I found the solution. Thx. mousewheel:{ releaseOnEdges:true },
CodePudding user response：
You can add this code if you want to disable the mousewheel for the swiper after the last slide is shown.
swiper.on('slideChange', function (e) {
if (e.isEnd) {
e.mousewheel.disable();
}
});
Demo
var swiper = new Swiper(".mySwiper", {
direction: "horizontal",
slidesPerView: 1,
speed: 1000,
spaceBetween: 0,
roundLengths: true,
centeredSlides: true,
mousewheel: true,
pagination: {
el: ".swiper-pagination",
clickable: false,
},
});
swiper.on('slideChange', function (e) {
if (e.isEnd) {
e.mousewheel.disable();
}
});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: 600px;
border: solid 1px black;
}
.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;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.1.4/swiper-bundle.css" integrity="sha512-KBVE5XtR1mD xG5KJdK4mNAvbqLXeD6fbzeSNGLWRQcOdD6sStIZJIUUIN ng8glwOzQ2x2uRCWkYkqSQSbGvg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header>
<nav >
<div >
<a href="#">Carousel</a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navbarCollapse">
<ul >
<li >
<a aria-current="page" href="#">Home</a>
</li>
<li >
<a href="#">Link</a>
</li>
<li >
<a >Disabled</a>
</li>
</ul>
<form >
<input type="search" placeholder="Search" aria-label="Search">
<button type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<main>
<div >
<div >
<div >
<div >Slide 1</div>
<div >Slide 2</div>
<div >Slide 3</div>
</div>
<div ></div>
</div>
</div>
<div >
<!-- Three columns of text below the carousel -->
<div >
<div >
<svg width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
<h2>Heading</h2>
<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
<p><a href="#">View details »</a></p>
</div><!-- /.col-lg-4 -->
<div >
<svg width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
<h2>Heading</h2>
<p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
<p><a href="#">View details »</a></p>
</div><!-- /.col-lg-4 -->
<div >
<svg width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
<h2>Heading</h2>
<p>And lastly this, the third column of representative placeholder content.</p>
<p><a href="#">View details »</a></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
<!-- START THE FEATURETTES -->
<hr >
<div >
<div >
<h2 >First featurette heading. <span >It’ll blow your mind.</span></h2>
<p >Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
</div>
<div >
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
</div>
</div>
<hr >
<div >
<div >
<h2 >Oh yeah, it’s that good. <span >See for yourself.</span></h2>
<p >Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
</div>
<div >
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
</div>
</div>
<hr >
<div >
<div >
<h2 >And lastly, this one. <span >Checkmate.</span></h2>
<p >And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
</div>
<div >
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
</div>
</div>
<hr >
<!-- /END THE FEATURETTES -->
</div><!-- /.container -->
<footer >
<p ><a href="#">Back to top</a></p>
<p>© 2017–2021 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</footer>
</main>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.1.4/swiper-bundle.min.js" integrity="sha512-hNnjFWCqifslGhuZJVHjXdBund00oDV71mBacLyZYVwmuf Lx MGgoG04wehsvhp6FvLYfycrES b1yh24yvhg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="assets/js/main.js"></script>
</body>
</html>CodePudding user response：
I think it was the best. Thx @Carsten Løvbo Andersen
Codopen [Codopen][1]