jq-bgslider

A simple full-page jQuery Background slider.

2.0.2
Source
npm

Version published: 8 years ago

Weekly downloads: 39; decreased by-13.33%

Maintainers: 1

Weekly downloads

Created: 8 years ago

Source

jq-bgslider

A simple full-page jQuery Background slider.

Creates a full-screen sliding image background on your <body>. Only 2.13kB minified.

Usage

Insert the following at the end of your body tag.

Quick Start

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://unpkg.com/jq-bgslider@2.0.1/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

npm install jq-bgslider --save

// 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,
});

API

`jqBgslider([options])`

Loads the background slider on the <body> with the provided options.

Arguments

[options] (Object): If specified, customizes the behavior of the background slider.
- [images] (Array): The images to be used in the background. Default value is a nice collection of nature images.
- [slideDuration] (Number): The time, in milliseconds, to stay on each image/slide before switching to the next. Default value: 5000.
- [animDuration] (Number): The duration, in milliseconds, of the animation between each image/slide. Default value: 1000.

Examples

jq-bgslider Demo

In the demo site, a translucent white overlay is added with the following CSS:

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

License

MIT

FAQs

What is jq-bgslider?

Is jq-bgslider popular?

Is jq-bgslider well maintained?

Package last updated on 25 Dec 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install