Press "Enter" to skip to content

Pure Javascript Image Gallery Swipe Box Plugin

SwiperBox is a small JavaScript swiper library for creating a mobile-friendly touch gallery with support for drag and drop events.

javascript swipe event, javascript swipe library, javascript swipe carousel, javascript swipe left right event, mobile swipe event javascript, css swipe gesture, javascript image gallery with thumbnails

How to make use of it:

1. Download the package and insert the SwiperBox.js script into the HTML file.

<script src="SwiperBox.js"></script>

2. Select a group of items to display in the gallery.

myItems = [
  '<div class="myitem"><img src="1.jpg" /></div>',
  '<div class="myitem"><img src="2.jpg" /></div>',
  '<div class="myitem"><img src="3.jpg" /></div>'
]

3. Configure the swipeable gallery.

var mySwipe = new SwiperBox({
    items: myItems
});

4. Append the gallery anywhere on the web page.

mySwipe.HTMLElement.style.width = "400px";
mySwipe.HTMLElement.classList.add("mygal");
document.getElementById("example").appendChild(mySwipe.HTMLElement);

5. Handle the event of clicking on gallery items.

mySwipe.onClick = function(index,elem) {
  alert("clicked on index"+index);
}

6. Navigate to a specific item.

mySwipe.GoTo(2)

Minimal Swipeable Gallery In Pure JavaScript, SwiperBox Plugin/Github, css swipe carousel


See Demo And Download

Official Website(vladimirnetworks): Click Here

This superior jQuery/javascript plugin is developed by vladimirnetworks. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.