CODEWITHSUNDEEP
javascriptvue.jssliderswiper.js
Vu Ngo
Vu Ngo

Reputation: 86

How can I make a Swiper slider like App Store?

I want make a slider with Swiperjs like Apple App Store carousel (you can see at Games tab).

I tried to make it in Vue Swiper (a package for vue) here:

HTML code:

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

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

  },

})

How can I make the first slide float to left and the last slide float to right, like this:

First slide float left

Last slide float right

In my code, the first slide and the last slide are centered.

Upvotes: 2

Views: 1295

Answers (2)

JayDee
JayDee

Reputation: 61

u fire the event only at the end. if u slide back it wouldn't transform slides back to initialtion-part.

change it to 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)');
  });
});

Upvotes: 0

Vu Ngo
Vu Ngo

Reputation: 86

I think I really resolved my issue.

On mounted, when Swiper initiate, I add custom style

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

On touchend (swiper event)

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

        });

Check my new Codepen

Upvotes: 2

Related Questions