Javascript 我如何制作一个类似于Swiper slider的应用商店？

我想用Swiperjs制作一个滑块，比如苹果应用商店旋转木马（你们可以在游戏标签上看到）

我尝试在Vue Swiper（Vue的一个软件包）中实现此功能：

HTML代码：

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


  <div>

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: {

  },

})

ue.component（'vue-swiper'{
数据：函数（）{
返回{
imageItems:[]
};
},
道具：['url']，
挂载：函数（）{
var mySwiper=new Swiper（“.Swiper container”{
SlideService视图：“自动”，
间隔时间：10，
中心幻灯片：对，
方向：'水平'，
循环：false，
//分页：'.swiper分页'，
//分页类型：“项目符号”，
下一个按钮：false，
prevButton:错误，
}); 
},
模板：`
// 
`
});
var app=新的Vue({
el:“#应用程序”，
数据：{
},
})

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

---

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

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

在挂载时，当Swiper启动时，我添加自定义样式

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

触控端（swiper事件）

---

检查我的新

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

在挂载时，当Swiper启动时，我添加自定义样式

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

触控端（swiper事件）

---

检查我的新幻灯片

我的幻灯片是固定宽度和高度的，我不想使用“SlideService”来设置幻灯片边距我的幻灯片是固定宽度和高度的，我不想使用“SlideService”来设置幻灯片边距

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);

        });