我正在尝试在未来调整幻灯片的宽度 - 通过它们的宽度。我已经尝试了数千条建议，但没有任何帮助我。您能给我推荐一些东西，以便我的幻灯片按宽度显示（一页）吗？
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/style1.5test.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
</head>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide card"><span>Four words text</span></div>
<div class="swiper-slide card"><span>Two words</span></div>
<div class="swiper-slide card"><span>Just three words</span></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="/script-test.js"></script>
</body>
</html>
CSS
body {
margin: 0;
}
.swiper-slide {
width: auto;
}
.swiper-slide span {
background: yellow;
}
JS
const swiper = new Swiper('.swiper', {
slidesPerView: 'auto',
spaceBetween: 10
});
我试图通过幻灯片的内容来实现幻灯片的宽度
那么您希望每张幻灯片的宽度与其内容一样宽？看来
width: fit-contentbody {
margin: 0;
}
swiper-slide {
padding: 1em;
height: 100px;
box-sizing: border-box;
width: fit-content;
}<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
<swiper-container slides-per-view="auto">
<swiper-slide style="background: yellow;">Four words text</swiper-slide>
<swiper-slide style="background: lightblue;">Two words</swiper-slide>
<swiper-slide style="background: red;">Just three words</swiper-slide>
<swiper-slide style="background: pink;">This one is a bit longer than the others</swiper-slide>
<swiper-slide style="background: green;">The fifth one</swiper-slide>
<swiper-slide style="background: blue;">The sixth one</swiper-slide>
</swiper-container>