Touch-friendly Swiper/Carousel In Plain JavaScript – awesome-slider

Category: Javascript , Slider | June 19, 2019
Author: metxnbr
Views Total: 1,924 views
Official Page: Go to website
Last Update: June 19, 2019
License: MIT

Preview:

Touch-friendly Swiper/Carousel In Plain JavaScript – awesome-slider

Description:

awesome-slider is a lightweight, customizable, mobile-friendly swiper/carousel plugin written in pure JavaScript.

Main features:

  • Supports any HTML content: images, text, etc.
  • Auto rotation.
  • Custom Indicator.
  • Custom image loader.
  • Supports mouse drag and touch swipe events.
  • Auto adjusts the size on resize.

How to use it:

Install & download.

# Yarn
$ yarn add awesome-slider

# NPM
$ npm install awesome-slider --save

Import the minified version of the awesome-slider library into the document.

<script src="./dist/awesome-slider.min.js"></script>

Define an array of images or any web contents as follows:

var myImages = ["./assets/1.png", "./assets/2.png", "./assets/3.png"];

// or
var myContent = [
    {
      tagName: "div",
      attrs: {
        style:
          "width:100%; height: 100%; background-color: pink; font-size: 32px; color: #fff;"
      },
      children: [
        "It's not just picture",
        {
          tagName: "div",
          attrs: {
            style:
              "width:100%; height: 100%; background-color: pink; font-size: 14px; color: #fff;"
          },
          children: [
            "text text text text text text text text text text text text text"
          ]
        }
      ]
    },
    {
      tagName: "a",
      attrs: {
        href: "2.png",
        style: "width:100%; height: 100%",
        target: "_blank"
      },
      children: [
        {
          tagName: "img",
          attrs: {
            src: "./assets/2.png",
            style: "width:100%; height: 100%"
          }
        }
      ]
    },
    {
      tagName: "img",
      attrs: {
        src: "./assets/3.png",
        style: "width:100%; height: 100%"
      }
    },
    {
      tagName: "img",
      attrs: {
        src: "./assets/none.png",
        style: "width:100%; height: 100%"
      }
    }
]

Generate a default swiper/carousel on the page.

var awesomeSlider = new AwesomeSlider(myImages, container, options);

Possible options to config the swiper/carousel.

var awesomeSlider = new AwesomeSlider(myImages, container, {

    // ratio
    ratio: 5 / 1,

    // autoplay
    autoplay: true,

    // duration in ms
    duration: 5000,

    // interval in ms
    interval: 3000,

    // custom indicator
    // false or null: disable
    indicator: {
      style: Function,
      active: Function,
    },

    // 1 = Slide 2
    initIndex: 0,

    // custom controls
    manual: {
      previous: previous,
      next: next
    },

    // animation
    timing: Function | String,

    // auto resize the swiper/carousel
    enableResize: true,

    // image loader
    imageDownloading: Object,

    // image placeholder
    imagePlaceholder: Object,

    // additional CSS class(es)
    className: {
      list: '',
      item: ''
    }
    
});

You Might Be Interested In:


Leave a Reply