Minimal Image Gallery & Carousel Plugin - jQuery Albery

Albery is a small and easy-to-use jQuery plugin to create a basic image carousel where the users are able to slide through images by clicking the thumbnails and/or next/pre arrows.

How to use it:

1. Insert a group of original images together with the next/prev navigation buttons into the carousel.

<div class="albery-container">

  <div class="albery-wrapper">

    <div class="albery-item">
      <img src="img/1.jpg" alt="">
    </div>
    <div class="albery-item">
      <img src="img/2.jpg" alt="">
    </div>
    <div class="albery-item">
      <img src="img/3.jpg" alt="">
    </div>
    <div class="albery-item">
      <img src="img/4.jpg" alt="">
    </div>
    <div class="albery-item">
      <img src="img/5.jpg" alt="">
    </div>

  </div>

  <div class="move-right">
    <a href="#" id="rightArrow">▶</a>
  </div>
  <div class="move-left">
    <a href="#" id="leftArrow">◀</a>
  </div>

</div>

2. Insert a group of small images to the thumbnail carousel.

<div class="pagination-container">
  <div class="pagination-wrapper">
    <div class="pagination-item" data-item="1">
      <img src="img/1_thumb.jpg" alt="">
    </div>
    <div class="pagination-item" data-item="2">
      <img src="img/2_thumb.jpg" alt="">
    </div>
    <div class="pagination-item" data-item="3">
      <img src="img/3_thumb.jpg" alt="">
    </div>
    <div class="pagination-item" data-item="4">
      <img src="img/4_thumb.jpg" alt="">
    </div>
    <div class="pagination-item" data-item="5">
      <img src="img/5_thumb.jpg" alt="">
    </div>
  </div>
</div>

3. Import the jQuery Albery plugin's files into the document.

<link rel="stylesheet" href="css/albery.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
        crossorigin="anonymous"></script>
<script src="js/albery.js"></script>

4. Initialize the gallery & carousel by calling the function on the image container.

$(".albery-container").albery();

5. Set the width of the images & animation speed in milliseconds.

$(".albery-container").albery({
  speed: 500, // default: 200
  imgWidth: 400, // default: 600
});

6. Customize the thumbnail carousel.

$(".albery-container").albery({
  paginationBorder: 5,
  paginationItemWidth: 116
});

Changelog:

2018-10-26

• Fixed for microsoft edge bug unicode character

---

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