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

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: ''
    }
    
});