文章/答案/技术大牛

发布

社区首页 >问答首页 >滑动器-固定高度滑块中的图像重叠

问滑动器-固定高度滑块中的图像重叠
EN

Stack Overflow用户

提问于 2022-11-01 07:59:13

回答 1查看 104关注 0票数 1

欲望输出：

我正在尝试实现一个具有固定高度和自动宽度的滑块。图像应该调整到例如高度:800 be和宽度应该是真实的图像分辨率。

我的实现：https://playground-f2831f.webflow.io/model-images/provident-at-sunt-incidunt它应该是什么样子：https://artworld.agency/artists/sarah-bassett

我的滑块：

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> 
<script>
$(".swiper").append(`<div class="swiper-scrollbar"></div>`);
$(".swiper").append(`<div class="swiper-pagination"></div>`);
$(".swiper").append(`<div class="swiper-arrow button-prev"></div>`);
$(".swiper").append(`<div class="swiper-arrow button-next"></div>`);

const swiper1 = new Swiper(".swiper", {
  // Optional parameters
  slidesPerView: 'auto',
  centeredSlides: false,
  speed: 1500,
  loop: false,
  simulateTouch : true,
  loopFillGroupWithBlank: false,
  grabCursor: true,
  direction: "horizontal",
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 480px
    480: {
      slidesPerView: 1
    },
    // when window width is >= 768px
    768: {
      slidesPerView: 2
    },
    // when window width is >= 992px
    992: {
      slidesPerView: 2
    }
  },

  // If we need pagination
  pagination: {
    el: ".swiper-pagination",
    clickable: true
  },

  // Navigation arrows
  navigation: {
    nextEl: ".button-next",
    prevEl: ".button-prev"
  },

  // And if we need scrollbar
  scrollbar: {
    el: ".swiper-scrollbar",
    draggable: true
  }
});



</script>

webflow

javascript

slider

overlap

swiper.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-11-01 11:13:58

1 of 2:

设置slidesPerView: "auto"。

Docs演示：https://swiperjs.com/demos#slides-per-view-auto

在您的示例中，幻灯片宽度调整为幻灯片内容的当前宽度( <img>在其中)。相关：箱模型

2 of 2:

将图像高度设置为某个值，将宽度设置为auto。

/* css */
.swiper-slide img {
    width: auto;
    height: 200px;
}

*宽度将与高度成正比

演示

var swiper = new Swiper(".mySwiper", {
    slidesPerView: "auto",

    loop: true,

    autoplay: {
      delay: 5000,
    },

    slideToClickedSlide: true,
    spaceBetween: 10,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
  });

.swiper-slide img {
    cursor: pointer;
    width: auto;
    height: 200px;
    border-radius: 10px;
    object-fit: contain;
  }

  .gallery-thumbs .swiper-slide {
    width: auto;
    border-radius: 10px;
  }

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper@8.4.4/swiper-bundle.min.css" />



<h1>Swiper 8</h1>
<!-- Swiper -->
<div class="swiper mySwiper gallery-thumbs">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://picsum.photos/id/301/1000/900" />
    </div>
    <div class="swiper-slide">
      <img src="https://picsum.photos/id/89/800/1600" />
    </div>
    <div class="swiper-slide">
      <img src="https://picsum.photos/id/24/1500/800" />
    </div>
    <div class="swiper-slide">
      <img src="https://picsum.photos/id/225/1100/500" />
    </div>
  </div>
  <div class="swiper-pagination"></div>

</div>

<!-- Swiper JS -->
<script src="https://unpkg.com/swiper@8.4.4/swiper-bundle.min.js"></script>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74273008

复制

相似问题

问滑动器-固定高度滑块中的图像重叠
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滑动器-固定高度滑块中的图像重叠EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滑动器-固定高度滑块中的图像重叠
EN