Как сделать слайдер Swiper похожим на App Store? - PullRequest
Новая
       22

Как сделать слайдер Swiper похожим на App Store?

0 голосов
/ 26 июня 2019

Я хочу сделать слайдер со Swiperjs, как карусель Apple App Store (вы можете увидеть на вкладке Игры).

Я попытался сделать это в 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

В моем коде первый слайд и последний слайд центрированы.

1 Ответ

0 голосов
/ 26 июня 2019

Мне кажется, я действительно решил свою проблему.

При подключении, когда запускается Swiper, я добавляю собственный стиль 

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

При касании (событие swiper) 

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

...