mav-slider v1.0.4

mav-slider

mav-slider is a package that provides a cool and customizable slider for your website.

Installation

Use the CDN link to start using the package.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mav-slider@1.0.2/css/mav-slider.min.css">
<script src="https://cdn.jsdelivr.net/npm/mav-slider@1.0.2/mav-slider.min.js"></script>

Or use the package manager npm to install the package.

npm install mav-slider

Usage

Basic Usage

<div id="mavSlider">
     <img src="https://raw.githack.com/SochavaAG/example-mycode/master/pens/1_images/img-1098x549-15.jpg" alt=""/>
     <img src="https://raw.githack.com/SochavaAG/example-mycode/master/pens/1_images/img-1098x549-5.jpg" alt="" />
     <img src="https://raw.githack.com/SochavaAG/example-mycode/master/pens/1_images/img-1098x549-1.jpg" alt=""/>
     <img src="https://raw.githack.com/SochavaAG/example-mycode/master/pens/1_images/img-1098x549-10.jpg" alt=""/>
     <img src="https://raw.githack.com/SochavaAG/example-mycode/master/pens/1_images/img-1098x549-4.jpg" alt=""/>
</div>

import MavSlider from 'mav-slider';
import 'mav-slider/css/mav-slider.css';

#initialize the package
new MavSlider();

Result:

Using Custom Configuration

<div id="customContainer">
     <!-- Your Images -->
</div>

new MavSlider({
   dotSize: 3,
   offset: 1,
   slideHeight: "300px",
   slideWidth: "300px",
});

Result:

Using Ajax

new MavSlider({
     container: "#mavSlider2",
     ajax: {
          url: "https://picsum.photos/v2/list?page=2&limit=5",
          srcImgLocator: "download_url",
     },
});

Result:

Custom Configuration

Ajax Configuration