Question

我想要使用Apple App Store轮播等Swiperjs制作滑块（您可以在“游戏”标签上看到）。

我尝试在此处使用Vue Swiper（用于Vue的软件包）制作它：

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

  },

})

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

First slide float left

Last slide float right

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

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

如何制作像App Store这样的Swiper滑块？

1 个答案: