CSS 3D Horizontal Wheel Slider由Scroll管理

qfe3c7zg 于 11个月前发布在其他

关注(0)|答案(1)|浏览(88)

我想做一个由自然ScrollBar管理的3D滚轮滑块，如下所示：
x1c 0d1x的数据
这就像一个水平的3D滚轮滑块，其中前一个和下一个项目比“当前”项目小，其他项目隐藏在场景后面
我想做一个正常的水平滚动条，让人们滚动轮正常，但我不知道这是可能做到这一点。
这就是我现在所拥有的：

ul {
  width: 400px;
  list-style: none;
  display: flex;
  overflow: auto;
  gap: 15px;
  padding: 30px;
  margin: 0;

  -ms-overflow-style: none;
  scrollbar-width: none;
}
ul::-webkit-scrollbar { 
  display: none;
}

ul li {
  font-size: 50px;
  flex: 0 0 250px;
  text-align: center;
  line-height: 250px;
  background: #6A90CA;
  color: white;
  text-transform: uppercase;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.30);
}

个字符
你认为这是可能的，还是我应该改变我的方法？
多谢了！

css

来源：https://stackoverflow.com/questions/77346078/css-3d-horizontal-wheel-slider-managed-by-scroll

1条答案

按热度按时间

n1bvdmb61#

$(document).ready(function() {
  var $swiper = $(".swiper-container");
  var $bottomSlide = null;
  var $bottomSlideContent = null;
  var mySwiper = new Swiper(".swiper-container", {
    spaceBetween: 1,
    slidesPerView: 3,
    centeredSlides: true,
    roundLengths: true,
    loop: true,
    loopAdditionalSlides: 30,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    }
  });
});

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}

.swiper-container {
  position: relative;
  width: 90vw;
  height: 100px;
}

.swiper-container>.swiper-slide__content {
  position: absolute;
  top: 0;
}

.swiper-slide {
  height: 300px;
  display: flex;
  background: #eee;
  align-items: center;
  justify-content: center;
  transition: all 200ms linear;
  transform: scale(0.8);
  &.swiper-slide-active {
    transform: scale(1.2);
    background: #3333
  }
}

.swiper-slide__content {
  height: 300px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/css/swiper.css" rel="stylesheet" />

<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">
      1
    </div>
    <div class="swiper-slide">
      2
    </div>
    <div class="swiper-slide">
      3
    </div>
    <div class="swiper-slide">
      4
    </div>
    <div class="swiper-slide">
      5
    </div>
  </div>
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

赞(0）回复(0）举报 11个月前

我来回答

CSS 3D Horizontal Wheel Slider由Scroll管理

1条答案

相关问题

热门标签

最新问答