awesome-swiper

1.6.0 • Public • Published

Awesome Swiper

NPM version build status David deps devDependencies Status npm download jsdelivr npm license

English | 中文


Install

# via npm 
$ npm install awesome-swiper --save
 
# or via yarn 
$ yarn add awesome-swiper

Usage

Awesome Swiper based on Swiper 4. Add Script of swiper4 in your project first

import Swiper from 'swiper';
import AwesomeSwiper from 'awesome-swiper';
 
// OR
const Swiper = require('swiper');
const AwesomeSwiper = require('awesome-swiper');
let awesomeSwiper = new AwesomeSwiper([SwiperModule]).init(context [, ...config] [, ...overlayConfig]);
 
// if need thumbs
let awesomeSwiper = new AwesomeSwiper([SwiperModule])
                        .init(context [, ...config] [, ...overlayConfig])
                        .addThumbs(thumbsContext [, ...thumbsConfig] [, ...thumbsExtraConfig]);

AwesomeSwiper() params:

  • SwiperModule: [Object] Set custom swiper constructor. Make sure the swiper version is 4.

AwesomeSwiper().init() params:

  • context: [String | Element] the wrapper of swiper. Height and width of wrapper must be initialized.
  • config: [Object]
    • speed: [Number] Duration of transition between slides (in ms). Default 300.
    • loop: [Boolean] Set to true to enable loop. Default false.
    • autoplay: [Number] Set autoplay delay. 0 means close. Default 0.
    • direction: [String] Set direction. Could be 'horizontal' or 'vertical'. Default 'horizontal'.
    • spaceBetween: [Number] Distance between slides in px. Default 0.
    • slidesPerView: [Number | 'auto'] Number of slides per view. Default 1.
    • mousewheel: [Boolean] Set to true to enable navigation through slides using mouse wheel. Default false.
    • autoFixFullImg: [Boolean] Set true to auto fix full images. Default false. Tip: Due to the impact of performance, not necessary not to set it.
    • pagination: [Object] Set pagination. If you do not want a pagination, set null.
      • color: [String] 'default' is blue. You also can set 'black' or 'white' and embed your own style
      • style: [Object] Custom pagination style. Recommended to only adjust the position here.
      • dynamicBullets: [Boolean] Good to enable if you use bullets pagination with a lot of slides. So it will keep only few bullets visible at the same time. Default false. See Swiper Pagination
    • navigation: [Object] Set navigation. If you do not want a navigation, set null.
      • color: [String] 'default' is blue. You also can set 'black' or 'white'
      • styles: [Object] Custom style
        • prev: [Object] Custom style for prevEl.
        • next: [Object] Custom style for nextEl.
      • custom: [Object] Set custom navigation elements. Default null.
        • prevEl: [String | Element] Custom prev button element.
        • nextEl: [String | Element] Custom next button element.
  • overlayConfig: [Object] Use Custom swiper api to overlay config.

AwesomeSwiper().addThumbs() params:

  • thumbsContext: [String | Element] the wrapper of thumbs. Height and width of wrapper must be initialized.
  • thumbsConfig: [Object] You can set it follow swiper api.
    • direction: [String] Set direction. Could be 'horizontal' or 'vertical'.
    • spaceBetween: [Number] Distance between slides in px. Default 10.
    • slidesPerView: [Number | 'auto'] Number of slides per view. Default 'auto'.
  • thumbsExtraConfig: [Object] Extra config for thumbs.
    • mouseOverMode: [Boolean] set true to use mouse over mode. Default false.
    • autoFixFullImg: [Boolean] Set true to auto fix full images. Default false. Tip: Due to the impact of performance, not necessary not to set it.

new css classes in AwesomeSwiper

  • .swiper-full-img: Full images container.
  • .swiper-full-bg: Full background container.
  • .swiper-explain: Explain text container.
  • .active-thumb: Active slide of thumbs.

Use in browser

<link href="swiper.min.css" rel="stylesheet">
 
<div id="basic" class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slide1</div>
    ...
  </div>
</div>
 
<script src="swiper.min.js"></script>
<script src="AwesomeSwiper.min.js"></script>
<script>
  new AwesomeSwiper().init('#basic');
</script> 

or use standalone:

<div id="basic" class="swiper-container">
  ...
</div>
 
<script src="AwesomeSwiper.standalone.min.js"></script>
<script>
  new AwesomeSwiper().init('#basic');
</script> 

Be sure to use the same version of JS and CSS files

CDN

<script src="https://cdn.jsdelivr.net/npm/awesome-swiper@1/build/AwesomeSwiper.min.js"></script>
 
// standalone
<script src="https://cdn.jsdelivr.net/npm/awesome-swiper@1/build/AwesomeSwiper.standalone.min.js"></script>

Compatibility

  • chrome >= 46
  • safari >= 8
  • firefox >= 40
  • ie >= 11
  • ios >= 8
  • android >= 4.4

Readme

Keywords

Package Sidebar

Install

npm i awesome-swiper

Weekly Downloads

10

Version

1.6.0

License

MIT

Unpacked Size

219 kB

Total Files

6

Last publish

Collaborators

  • cycdpo