【jQuery】jQueryを使用した背景スライダープラグインjq-bgslider

jQuery

January 15, 2017

TAGS:
jQuery
Slider

jq-bgsliderは背景にフルスクリーンスライダーを作成するための軽量のjQueryプラグイン。

Quick Start

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://unpkg.com/jq-bgslider@2.0.2/build/jq-bgslider.min.js"></script>
<script>
  // Originally in ES6, so default export is accessed via .default
  jqBgslider.default({
    images = [
      'https://i.imgur.com/gz0Yq3E.jpg',
      'https://i.imgur.com/e3Fjb93.jpg',
      'https://i.imgur.com/8FoJQYg.jpg',
    ],
    slideDuration: 2000,
    animDuration: 500,
  });
</script>

Webpack

// ES5
const jqBgslider = require('jq-bgslider').default;

// ES6
import jqBgslider from 'jq-bgslider';

jqBgslider({
  images = [
    'https://i.imgur.com/gz0Yq3E.jpg',
    'https://i.imgur.com/e3Fjb93.jpg',
    'https://i.imgur.com/8FoJQYg.jpg',
  ],
  slideDuration: 2000,
  animDuration: 500,
});

Examples

body::before {
  display: block;
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(255,255,255,0.7);
}

MIT

Demo/Download