Compact jQuery Image Carousel Plugin - Myscroll.js

Myscroll.js is a simple, compact, cross-browser, jQuery based image carousel with slide or opacity transitions between slides.

Also features autoplay, caption bar, navigation/pagination controls, and more.

How to use it:

1. Code the HTML for the image carousel.

<div class="banner" id="example">
  <div class="move" id="move">
    <!-- Slides here -->
    <ul>
      <li>
        <p>Image Caption 1</p>
        <img src="1.jpg" alt="Alt 1">
      </li>
      <li>
        <p>Image Caption 1</p>
        <img src="1.jpg" alt="Alt 2">
      </li>
      <li>
        <p>Image Caption 1</p>
        <img src="1.jpg" alt="Alt 3">
      </li>
      ...
    </ul>
  </div>
  <!-- Pagination -->
  <div class="ctrl" id="ctrl"></div>
</div>

2. Insert jQuery library and the jQuery Myscroll.js plugin's files into the document.

<link rel="stylesheet" href="css/index.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="js/myscroll.js"></script>

3. Call the function on the top container to initialize the carousel.

$('#example').myscroll({
  picEl: $('#move'), // default: the first div
  ctrlEl: $('#ctrl') // default: the last div
});

4. Decide whether to show the navigation/pagination controls.

$('#example').myscroll({
  picEl: $('#move'), 
  ctrlEl: $('#ctrl'),
  libs: true, // shows pagination bullets
  arrows: true, // shows navigation arrows
  hover: true // shows arrows on hover
});

5. Config the autoplay.

$('#example').myscroll({
  picEl: $('#move'), 
  ctrlEl: $('#ctrl'),
  autoPlay: true,
  time: 2000, // interval
});

6. Config the transition effect.

$('#example').myscroll({
  picEl: $('#move'), 
  ctrlEl: $('#ctrl'),
  effect: "left", // top||left||fade
  speed: 400 // animation speed
});

---

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