主页 / 问题 / 1396633
Accepted
Vladislav
Asked:2022-09-03 22:52:17 +0000 UTC2022-09-03 22:52:17 +0000 UTC

如何放大活动的居中幻灯片？

  • 772

我连接了滑块，在滑块对象中指出了我需要的一切：在此处输入图像描述

我目前拥有的代码（查看堆栈上的执行时，它没有按应有的方式显示（缩进不起作用）。请单击展开片段以查看正在运行的代码）：

let swiper = new Swiper(".swiper", {
 
        loop: true,
        centeredSlides: true,

        slidesPerView: 3,
        spaceBetween: 60, 
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          speed: 1000
        },
        speed: 1000,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        } 
      });
.swiper-slide img {
  width: 427px;
  height: 570px;
}
.swiper-slide {
  width: 427px;
  height: 570px;
}
<script defer src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper@8/swiper-bundle.min.css" rel="stylesheet"/>
<div class="slider-container swiper-container">
    <div class="swiper swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="btn-container">
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>
  </div>

现在我需要在活动（中央）幻灯片中实现增加，我不知道该怎么做，因为当宽度/高度或 transform:scale() 改变时图片向右增加......结果，我得到以下结果在此处输入图像描述 。
在此处输入图像描述

请帮助
UPD：我试图查看其他答案中的选项，但它们要么不起作用，要么不适合我。也许我在某个地方错过了它......

javascript

1 个回答

  1. Best Answer

    在这里，但是有一个问题，完全滚动时，由于某种原因，最后一张和第一张幻灯片被忽略transition了，动画播放不流畅

    new Swiper(".swiper", {
    
    loop: true,
    centeredSlides: true,
    
    slidesPerView: 3,
    spaceBetween: 60,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
        speed: 1000
    },
    speed: 1000,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    }
});
    .swiper-slide img {
    width: 100%;
    height: 400px;
    
}
.swiper-slide {
    transition: all 0.5s ease;
    padding: 40px 0;
}
.swiper-slide-active {
    transform: scale(1.1);
}
    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    
    <link href="https://unpkg.com/swiper@8/swiper-bundle.min.css" rel="stylesheet"/>
</head>
<body>
<div class="slider-container swiper-container">
    <div class="swiper swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
            </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="btn-container">
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
</div>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
    <script src="scripts.js"></script>
</body>
</html>

    • 1

相关问题