swiper 一张图在中间，左右各2张显示一半

要实现Swiper中一张中间图片，两边各显示一半的效果，可以通过设置Swiper的slidesPerView属性和spaceBetween属性来实现。以下是一个基本的Swiper代码示例，展示了如何设置：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Swiper Example</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<style>
  .swiper-container {
    width: 600px;
    height: 300px;
  }
  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f0f0;
  }
</style>
</head>
<body>
 
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">1</div>
    <div class="swiper-slide">2</div>
    <div class="swiper-slide">3</div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
</div>
 
<script>
  var mySwiper = new Swiper('.swiper-container', {
    // Optional parameters
    direction: 'horizontal',
    loop: true,
 
    // With 3 slides, set slidesPerView to 3 and set spaceBetween to 150
    slidesPerView: 3.5,
    spaceBetween: 150,
 
    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },
 
    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
 
    // And if we need scrollbar
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })
</script>
</body>
</html>

在这个例子中，slidesPerView被设置为3.5，这是因为我们需要显示一半的两边图片，而每张图片的宽度是600px（容器宽度）/3，大约是200px。然后spaceBetween设置为150px，这样中间的图片能够显示为一张完整的，两边则各显示一半宽度。

请确保您已经引入了Swiper的CSS和JavaScript文件。您可能需要根据实际情况调整宽度、高度和spaceBetween的值以适应您的布局。

swiper 一张图在中间，左右各2张显示一半

评论已关闭

推荐阅读