Responsive photo gallery slider – Jslide

DirectCode | October 8, 2016 | Gallery, jQuery, Plugins, Slider | No Comments

Seamless, responsive and nice photo gallery on desktop and mobile.

Jslide – Full screen, responsive photo gallery slider

Jslide is a fashion jQuery plugin, that displays galleries in a fullscreen slideshow, with arrows navigation and easing effects. The plugin allows the programmer to create an image slideshow / gallery from various types of data sources (JSON data, inline Html elements, Javascript array objects).

Responsive photo gallery slider - Jslide — Responsive photo slider – Jslide

Usage

The plugin is really easy to use. Please take a look at samples below.

<ul id="slide_list" class="slide_list">
  <li><div style="background-image:url(img/01.jpg)" 
    data-source="json/json.php"></div></li>
  <li><div style="background-image:url(img/02.jpg)" 
    data-source="json/json.php?f=img_1"></div></li>
  ...
</ul>

JavaScript:

$('#slide_list > li > div').JslideAnchor({
  jslide_obj: '#slide',
  jslide_config: {
    show_broad: true,
    show_nav: true,
    pagination: true,
    hook_slidemove_before_click: function(k, datas) {
      var html = '<h1>' + datas[k].caption + '</h1>';
      html += '<p>' + datas[k].desc + '</p>';
      this.$broad.html(html);
     }
  }
});

Demo:

http://lab.a2.kiiiick.com/JS/jquery.jslide/demo-list.html

License: MIT

GitHub:

https://github.com/lihom/jquery.jslide

See also:

Javascript Image Slider – Non jQuery

Accelerometer-enabled and responsive jQuery slider plugin

Sly scrolling plugin – a lightweight, one directional slider

Something sweet? Try Choco Slider – flexible jQuery slideshow plugin

Blueberry image slider plugin

JCoverflip – jQuery image slider