Fullscreen Responsive Image Slider with jQuery - Tinyslide

Tinyslide is a jQuery plugin that lets you create a responsive, fullscreen, touch-friendly, CSS3 animated image slider using Html5 figure, figcaption markups.

When you resize the window, the images will be scaled, cropped and centered to fit within their parent container, without changing the aspect ratio.

How to use it:

1. Import jQuery library and the jQuery Tinyslide plugin's JS & CSS into the Html page.

<link href="css/tinyslide.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.2.min.js" /></script>
<script src="js/tinyslide.js" /></script>

2. Markup html structure.

<section id="tiny" class="tinyslide">
  <aside class="slides">
    <figure> <img src="1.jpg" alt="">
      <figcaption> Description </figcaption>
    </figure>
    <figure> <img src="2.jpg" alt="">
      <figcaption> Description </figcaption>
    </figure>
    <figure> <img src="3.jpg" alt="">
      <figcaption> Description </figcaption>
    </figure>
  </aside>
</section>

4. Initialize the image slider.

var tiny = $('#tiny').tiny().data('api_tiny');

5. Plugin's options and callbacks with default values.

autoplay: 4000,
animationDuration: 800,
hoverPause: true,
slide: ">figure",
slides: ">aside",
slideWrapper: false,
thumbs: false,
thumb: ">figure",
showNavigator: true,
beforeTransition: function(){},
afterTransition: function(){}

Changelog:

2018-08-06

• updated to the latest version

2016-04-07

• pause transitions when focus lost

2016-04-02

• fix timeout

2015-04-02

• fix loading issue

2015-03-18

• Add much nicer touch event handling.

---

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