Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save kiwiupover/879f4bdc01116393543aeeadee57b5b4 to your computer and use it in GitHub Desktop.
Save kiwiupover/879f4bdc01116393543aeeadee57b5b4 to your computer and use it in GitHub Desktop.
Swiper Custom Next/Previous Buttons
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 500px;
height: 300px;
margin: 20px auto;
padding: 100px 50px;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
box-shadow: 0 20px 60px #555;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
<button class="swiper-prev">Previous</button>
<button class="swiper-next">Next</button>
{{#swiper-container
prevButton=".swiper-prev"
nextButton=".swiper-next"
slidesPerView=3
spaceBetween=20px
}}
{{#swiper-slide}}Slide 1{{/swiper-slide}}
{{#swiper-slide}}Slide 2{{/swiper-slide}}
{{#swiper-slide}}Slide 3{{/swiper-slide}}
{{#swiper-slide}}Slide 4{{/swiper-slide}}
{{#swiper-slide}}Slide 5{{/swiper-slide}}
{{/swiper-container}}
{
"version": "0.10.7",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.10.0",
"ember-data": "2.10.0",
"ember-template-compiler": "2.10.0",
"ember-testing": "2.10.0"
},
"addons": {
"ember-cli-swiper": "github:kiwi"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment