如何使用滑动器设置滑动视图的特定数量?

Question

我正在尝试修复每个视图可见幻灯片的最大数量。我用的是Swiper。这是我的jsx代码

import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/effect-coverflow';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import { EffectCoverflow, Pagination, Navigation } from 'swiper';
import slide_image_1 from './assets/images/img_1.jpg';
import slide_image_2 from './assets/images/img_2.jpg';
import slide_image_3 from './assets/images/img_3.jpg';
import slide_image_4 from './assets/images/img_4.jpg';
import slide_image_5 from './assets/images/img_5.jpg';
import slide_image_6 from './assets/images/img_6.jpg';
import slide_image_7 from './assets/images/img_7.jpg';
function App() {
const slides = [
slide_image_1,
slide_image_2,
slide_image_3,
slide_image_4,
slide_image_5,
slide_image_6,
slide_image_7,
];

const renderSlides = () =>
slides.map((slide, index) => (
<SwiperSlide key={index}>
<img src={slide} alt={`slide_image_${index}`} />
</SwiperSlide>
));
return (
<div className="container">
<Swiper
effect={'coverflow'}
grabCursor={true}
slideToClickedSlide={true}
centeredSlides={true}
loop={true}
slidesPerView={{
number: 3,
}}
coverflowEffect={{
rotate: 0,
stretch: 0,
depth: 100,
modifier: 2.5,
}}
modules={[EffectCoverflow, Pagination, Navigation]}
className="swiper_container"
>
{renderSlides()}
{renderSlides()}

<div className="slider-controler">
</div>
</Swiper>
</div>
);
}
export default App;

css代码

*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style-type: none;
}
:root {
--primary: #6a59ff;
--white: #ffffff;
--bg: #f5f5f5;
}
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
@media (min-width: 1440px) {
html {
zoom: 1.5;
}
}
@media (min-width: 2560px) {
html {
zoom: 1.7;
}
}
@media (min-width: 3860px) {
html {
zoom: 2.5;
}
}
::-webkit-scrollbar {
width: 1.3rem;
}
::-webkit-scrollbar-thumb {
border-radius: 1rem;
background: #797979;
transition: all 0.5s ease-in-out;
}
::-webkit-scrollbar-thumb:hover {
background: #222224;
}
::-webkit-scrollbar-track {
background: #f9f9f9;
}
body {
font-size: 1.6rem;
background: var(--bg);
}
.container {
max-width: 124rem;
padding: 4rem 1rem;
margin: 0 auto;
}
.heading {
padding: 1rem 0;
font-size: 3.5rem;
text-align: center;
}
.swiper_container {
height: 52rem;
padding: 2rem 0;
position: relative;
}
.swiper-slide {
width: 37rem;
height: 42rem;
position: relative;
}
@media (max-width: 500px) {
.swiper_container {
height: 47rem;
}
.swiper-slide {
width: 28rem !important;
height: 36rem !important;
}
.swiper-slide img {
width: 28rem !important;
height: 36rem !important;
}
}
.swiper-slide img {
width: 37rem;
height: 42rem;
border-radius: 2rem;
object-fit: cover;
}
.swiper-slide-shadow-left,
.swiper-slide-shadow-right {
display: none;
}
.slider-controler {
position: relative;
bottom: 2rem;
display: flex;
align-items: center;
justify-content: center;
}
.slider-controler .swiper-button-next {
left: 58% !important;
transform: translateX(-58%) !important;
}
@media (max-width: 990px) {
.slider-controler .swiper-button-next {
left: 70% !important;
transform: translateX(-70%) !important;
}
}
@media (max-width: 450px) {
.slider-controler .swiper-button-next {
left: 80% !important;
transform: translateX(-80%) !important;
}
}
@media (max-width: 990px) {
.slider-controler .swiper-button-prev {
left: 30% !important;
transform: translateX(-30%) !important;
}
}
@media (max-width: 450px) {
.slider-controler .swiper-button-prev {
left: 20% !important;
transform: translateX(-20%) !important;
}
}
.slider-controler .slider-arrow {
background: var(--white);
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
left: 42%;
transform: translateX(-42%);
filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
}
.slider-controler .slider-arrow ion-icon {
font-size: 2rem;
color: #222224;
}
.slider-controler .slider-arrow::after {
content: '';
}
.swiper-pagination {
position: relative;
width: 15rem !important;
bottom: 1rem;
}
.swiper-pagination .swiper-pagination-bullet {
filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
}
.swiper-pagination .swiper-pagination-bullet-active {
background: var(--primary);
}

和HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3d Slider</title>
</head>
<body>
<div id="root"></div>
<script
type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
></script>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

我试图使用

slidesPerView={{
number: 3,
}}

我在slidesPerView ={'auto'}之前使用，它给了我相同的结果。你能帮我一下吗?顺便说一句，我想在一个网站的容器中实现这个扫荡器。如果需要不同的解决方案，请告诉我。ps我不是专家。我搜索并尝试实施遇到类似问题的人的解决方案，但没有成功。

Answer 1

我想我找到解决办法了。我修改了slidesPerView={'auto}并在CSS文件中播放幻灯片的不透明度。

.swiper-slide {
width: 22rem;
height: 100%;
position: center;
opacity: 0;
pointer-events: none;
}
.swiper-slide-active,
.swiper-slide-next,
.swiper-slide-prev {
opacity: 1; /* Show center, left, and right slides */
pointer-events: all;
}

如果您将所有幻灯片的不透明度设置为0，然后编辑中心，上一个(左)和下一个(右)幻灯片的不透明度为1，您将获得所需的效果。指针事件全局为0，中间、左边和右边的幻灯片为all，避免了点击不可见幻灯片的可能性。