You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Jul 11, 2021. It is now read-only.
ENV['ember-swiper5']={imports: '*',// or ["*"] for every modules};
ENV['ember-swiper5']={imports: ['a11y','pagination','navigation'],// only these modules};
Default configuration
<Swiper as |swiper|>
<swiper.slide> // or not contextual Swiper::Slide
Slide 1
</swiper.slide>
<swiper.slide>
Slide 2
</swiper.slide>
<swiper.slide>
Slide 3
</swiper.slide>
</Swiper>
Full configuration
<Swiper
@loop={{false}}
@speed={{400}}
@spaceBetween={{100}}
@scrollbar={{hashel='.swiper-scrollbar'hide=true}}
@on={{hashinit=(fnthis.log)}} as |swiper|
>
<!-- Block component for slides -->
<swiper.slide>
Slide 1
</swiper.slide>
<swiper.slide>
Slide 2
</swiper.slide>
<swiper.slide>
Slide 3
</swiper.slide>
<!-- If you use @pagination parameter you must use swiper.pagination component. Otherwise it won't show. -->
<swiper.pagination />
<!-- If you want to change the defaults use swiper.pagination component with block. -->
<swiper.pagination>
<divclass="my-swiper-pagination"></div>
</swiper.pagination>
<!-- Same as @pagination -->
<swiper.navigation />
<!-- Same as @pagination -->
<swiper.scrollbar />
<!-- If you want to reach the instance you should use swiper.header or swiper.footer component. This yields the instance. --><!-- swiper.content component is deprecated now. --><!-- swiper.header will place before the slider no matter where you put. --><!-- swiper.footer will place after the slider no matter where you put. --><!-- That way you can reach all parameters and invoke methods like slideTo etc... -->
<swiper.header as |self|>
<buttontype="button"{{on'click' (fnthis.slideToself)}}>
Move
</button>
</swiper.header>
<swiper.footer as |self|>
<buttontype="button"{{on'click' (fnthis.slideToself)}}>
Move
</button>
</swiper.footer>
</Swiper>
All slideXXX events returns swiper instance. That way you can reach all properties like realIndex etc...
Note: If you use sass or less; ember-swiper5 will be imported automatically.
In ember-swiper5 file; after the //IMPORT_COMPONENTS line you should import the component(s) you need.
Ex: For scrollbar: @import './components/scrollbar/scrollbar'; etc...