我怎样才能像App Store一样制作一个Swiper slider？

Question

我想用 Swiperjs 制作一个 slider，就像 Apple App Store 轮播一样（你可以在游戏选项卡上看到）。

我试图在 Vue Swiper（vue 的 package）中制作它：

HTML 代码：

<div id="app">
  <h1>Slider</h1>
  <!-- Slider main container -->
<vue-swiper url="http://www.google.com"></vue-swiper>


  <div>

CSS：

ody {
  background: #f0f0f0;
  font-family: Tahoma;
}
#app{
  width:400px;
  height:700px;
  background:white;
  margin: auto;
  border-radius: 10px;
}
h1 {
  padding: 30px 10px 0 10px;
}
.swiper-container {
    padding-top: 10px;
    width: 100%;
    height: 180px;
}
.swiper-slide {
  width: 300px;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  background: url('https://i.vimeocdn.com/video/376634544.jpg?mw=1920&mh=1080&q=70');
  background-size: cover;
}

Javascript 代码：

ue.component('vue-swiper', {
    data: function() {
        return {
           imageItems:[]
        };
    },
  props:['url'],
    mounted: function () {
        var mySwiper = new Swiper ('.swiper-container', {
                        slidesPerView: 'auto',
                        spaceBetween: 10,
                        centeredSlides:true,
                        direction: 'horizontal',
                        loop: false,
                        // pagination: '.swiper-pagination',
                        // paginationType:'bullets',
                        nextButton: false,
                        prevButton: false,
        }); 
  },
  template:`
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
    </div>
    // <div class="swiper-pagination"></div>



</div>
  `
});
var app = new Vue({
  el: '#app',
  data: {

  },

})

如何让第一张幻灯片向左浮动，最后一张幻灯片向右浮动，如下所示：

在我的代码中，第一张幻灯片和最后一张幻灯片居中。

Answer 1

我想我真的解决了我的问题。

在安装时，当Swiper启动时，我添加了自定义样式

on: {
  init: function () {
    document.getElementById('wrapper').style.transform = "translate3d(10px, 0px, 0px)"
  },
}

接触时（滑动事件）

mySwiper.on('touchEnd', function () {
            setTimeout(() => {
                if (mySwiper.activeIndex == 0) {
                    document.getElementById('wrapper').style.transform = "translate3d(10px, 0px, 0px)"
                }
                if (mySwiper.activeIndex == mySwiper.slides.length - 1) {
                    var translate_last = mySwiper.snapGrid[mySwiper.activeIndex] + mySwiper.snapGrid[0] + 10;
                    var translate_style = 'translate3d(-' + translate_last +  'px, 0px, 0px)';
                    document.getElementById('wrapper').style.transform = translate_style
                }
            }, 10);

        });

检查我的新Codepen

Answer 2

你只在最后触发事件。 如果你向后滑动，它不会将幻灯片转换回初始部分。

将其更改为 mySwiper.on('progress', ...

swiper.on('progress', function(){
  setTimeout(() => {
    if (swiper.activeIndex == 0) {
        $(".swiper-slide").css('transform', 'translate3d(125px, 0px, 0px)');
    }
    if (swiper.activeIndex == swiper.slides.length - 1) {
        var translate_last = swiper.snapGrid[swiper.activeIndex] + swiper.snapGrid[0] + 10;
        var translate_style = 'translate3d(-' + translate_last +  'px, 0px, 0px)';
        $(".swiper-slide").css('transform', translate_style);
                                }
  }, 10);
                            
  swiper.on('reachEnd', function(){
        $(".swiper-slide").css('transform', 'translate3d(0px, 0px, 0px)');
  });
});