Minimal Full-width Carousel Plugin With jQuery - mn-jq-slide

mn-jq-slide is a super tiny (less than 1k gzipped) jQuery slider plugin to create a responsive, full-width, auto-rotating image carousel that is fully configurable via HTML data attribute.

How to use it:

1. Load the jQuery mn-jq-slide plugin's style sheet mn-jq-slider.css in the header of the document.

<link href="mn-jq-slider.css" rel="stylesheet">

2. Optional: Load Font Awesome Iconic font for the navigation arrows:

<link rel="stylesheet" href="font-awesome.min.css">

3. Load jQuery JavaScript library and the jQuery mn-jq-slide plugin's JavaScript mn-jq-slider.js at the end of the document so the page loads faster.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="mn-jq-slider.js"></script>

4. Insert your own images to the page and config the carousel using the following data attributes:

• data-timer: transition delay in milliseconds.
• data-copy: copyright information.
• data-img: path to image.

<div class="mn-jq-slider" id="slider" data-timer="5000">
  <div class="mn-jq-chrome">
    <div class="mn-jq-prev"><i class="fa fa-fw fa-chevron-left"></i></div>
    <div class="mn-jq-next"><i class="fa fa-fw fa-chevron-right"></i></div>
    <div class="mn-jq-counter"></div>
    <div class="mn-jq-dots"></div>
  </div>
  <div class="mn-jq-slide" data-copy="&copy; 2017 jQuery Script" data-img="https://picsum.photos/1200/500/?random"></div>
  <div class="mn-jq-slide" data-copy="&copy; 2017 jQuery Script" data-img="https://picsum.photos/1300/500/?random"></div>
  <div class="mn-jq-slide" data-copy="&copy; 2017 jQuery Script" data-img="https://picsum.photos/1400/500/?random"></div>
  <div class="mn-jq-slide" data-copy="&copy; 2017 jQuery Script" data-img="https://picsum.photos/1210/500/?random"></div>
  <div class="mn-jq-slide" data-copy="&copy; 2017 jQuery Script" data-img="https://picsum.photos/1600/500/?random"></div>
</div>

5. Call the function on the top container and the plugin will take care of the rest.

makeSlider("#slider");

---

This awesome jQuery plugin is developed by modalnodes. For more Advanced Usages, please check the demo page or visit the official website.