Responsive Auto Content Carousel Plugin For jQuery - mkslider

File Size: 6.49 KB
Views Total: 1806
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Auto Content Carousel Plugin For jQuery - mkslider

Just another content carousel slider plugin for jQuery that scrolls automatically and infinitely through all different kinds of content with CSS3 animations and useful controls.

Basic usage:

1. Include jQuery library together with the jQuery mkslider plugin's JS and CSS files on the webpage.

<link rel="stylesheet" href="path/to/jquery.mkslider.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="path/to/jquery.mkslider.js"></script>

2. Add a set of html content to the carousel slider.

<div id="slider">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
  <div class="slide">4</div>
  <div class="slide">5</div>
</div>

3. Create a pagination for the carousel slider.

<nav id="additional-menu">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</nav>

4. Initialize the carousel slider with default options.

$('#slider').mkslider({
  externalNavigator: '#additional-menu'
});

5. Full plugin options to customize your carousel slider.

$('#slider').mkslider({

  // autoplay
  auto: true,

  // autoplay interval
  autoTimeout: 2000,

  // display play / pause icons
  autoIcon: true,
  autoIconPlay: '►',
  autoIconPause: '&#9646;&#9646;',

  // animation speed
  animationTime: 1000,
  animationPerSlide: true,

  // display arrows navigation
  arrows: true,
  arrowNext: '→',
  arrowPrev: '←',

  // display bottom navigation
  navigator: true,
  navigatorItemText: '●',
  externalNavigator: '',
  
});

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