swiper-slides

swiper-slides

swiper-slides is an ember addon that combines Swiper.js swipe navigation and query param management in a single component. Simply define an appropriate param in a given controller and you're good to go!

Installation

• npm install
• ember g swiper-slides

Getting Started

Given the following markup:

{{#swiper-slides options=swiperOptions param=slide}}
  <div class='swiper-slide'>
    one
  </div>
  <div class='swiper-slide'>
    two
  </div>
  <div class='swiper-slide'>
    three
  </div>
{{/swiper-slides}}

We can initialize our swiper instance with the following code in our controller:

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: ['slide'],
  slide: null,

  swiperOptions: {
    initialSlide: 1
  }
});

This will give us a swiper instance managed by the 'slide' query param. Whenever the slide changes the component will update the query param with the index of the current slide. Refreshing the page will bring you back to that same slide.