Minimal Flexible Image Carousel - jQuery Neat Slider

File Size: 87.5 KB
Views Total: 1473
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Flexible Image Carousel - jQuery Neat Slider

Neat Slider is a minimal (less than 1kb), flexible, responsive slider jQuery plugin that enables you to switch between images just like a carousel.

How to use it:

1. Include the Neat Slider plugin after jQuery library.

<script src="/path/to/jquery.slim.min.js"></script>
<link rel="stylesheet" href="/path/to/neat-slider.css">
<script src="/path/to/neat-slider.js"></script>

2. Include the Linearicons which will be used for next and previous controler icons.

<link rel="stylesheet" href="/path/to/icon-font.min.css">

3. Add your own images together with the navigation & pagination controls to the slider. That's it.

<div class="neat-slider">
  <!-- Previous image arrow -->
  <span class="[ lnr lnr-chevron-left-circle ] arrow" id="prev" alt="Previous"></span>

  <!-- Image container -->
  <div class="ns-image-container">
    <img src="https://source.unsplash.com/700x506/?yoga">
    <img src="https://source.unsplash.com/700x506/?fitness"">
    <img src="https://source.unsplash.com/700x506/?holiday"">
    <img src="https://source.unsplash.com/700x506/?cat"">
    <img src="https://source.unsplash.com/700x506/?girl"">
    <img src="https://source.unsplash.com/700x506/?sports"">
  </div>

  <!-- Next image arrow -->
  <span class="[ lnr lnr-chevron-right-circle ] arrow" id="next" alt="Next"></span>

  <!-- Dot navigation -->
  <div class="dotnav"></div>
</div>

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