主页 / 问题 / 1599245
Accepted
Ev Tr
Asked:2024-11-09 04:26:05 +0000 UTC2024-11-09 04:26:05 +0000 UTC

Slick 滑块上的轮播，中心有一个巨大的图像

  • 772

你需要制作一个旋转木马，中间有一张大图片，两侧有小图片，如图所示：

在此输入图像描述

我决定使用 Slick 滑块。 Slick 有一个相应的配置centerMode: true用于类似的目的，有相当多的使用示例。使用 CSS 属性放大中心图像：transform: scale();

scale();但是......可以设置的最大值1.5是当超过该阈值并进一步增加时 - 中心图片与相邻图片重叠，并且在大尺寸时完全覆盖它们。使用 CSS 属性强制放大具有中心图像的容器width会导致中心图像从中心移至侧面 - 尺寸和居中由 Slick 脚本计算并根据图像的统一大小进行定制。

我如何使用 Slick 解决此问题，或者您可以推荐另一个库脚本来完成此任务吗？

$(document).ready(function() {
  $('.slider').slick({
    centerMode: true,
    centerPadding: '0px',
    nextArrow: '.project__next',
    slidesToShow: 5
  });
});
.slick-center img {
  opacity: 1;
  transform: scale(1.5);
}

.slick-slide img {
  width: 80px;
  height: 80px;
}

.slick-slide {
  padding-top: 20px;
}

.slick-center {
  padding-top: 0;
}

.project__next img{
  width:50px;
  height:20px;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" />

<div class="slider">      
  <div>
    <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">

  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">

  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">

  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">

  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
  </div>
<div>
    <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
  </div>
</div>
<div class="project__next">
    <span>Next</span><img src="http://www.clker.com/cliparts/B/5/C/M/6/i/right-grey-arrow.svg">
  </div>

javascript

1 个回答

  1. Best Answer

    正确的？没问题。但只要看看乱七八糟的默认样式，我就想抓住那个画家的痛处（头部），并用更强力的东西击中他。但我们所拥有的就是我们所统治的吗？我们走吧。首先，让我们完全“杀死”连接的那些 css，因为对抗它们是没有用的（大量无意义和过时的垃圾，!important你的手会厌倦打断）并编写你自己的而不加载任何额外的东西（好吧，也许是一个一点点美丽。）这可能听起来令人毛骨悚然，但这一切都容易得多。

    $(document).ready(function() {
  $('.slider').slick({
    centerMode: true,
    centerPadding: '0px',
    slidesToShow: 5
  });
});
    .slider {
  overflow: hidden;
}
.slick-list {
  position: relative;
  background-color: #e9e9e9;
}
.slick-slider .slick-track, .slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}
.slick-track {
  display: flex;
  align-items: end;
  padding-top: 20px;
  height: 200px;
  position: relative;
}
.slick-slide {
  display: flex;
  align-items: end;
  justify-content: center;
}
.slider img {
  width: 120px;
  height: 80px;
  object-fit: cover;
  transform: scale(1);
  transform-origin: center bottom;
}
.slick-center img {
  transform: scale(2.2);
  transition: all .5s;
  position: relative;
  z-index: 1;
}
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<div class="slider">
  <div>
    <img src="https://itproger.com/img/courses/x1476977488.jpg.pagespeed.ic.RdIpJiqNIr.jpg" alt="">
  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">

  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">

  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">

  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
  </div>
</div>

    PS 顺便说一句，再次重写这个 swiper 或使用现代且经过验证的东西要容易得多，因为它可能不会按照您想要的方式工作，因为 javascript 负责容器的大小，并且它的重新计算仍然决定。它的选项中可能有一些东西，但是没有兴趣去发现（太歪了）。

    • 1

相关问题