Fullscreen Responsive Image Slider with jQuery - Tinyslide

File Size: 2.44 MB
Views Total: 18103
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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> <img src="2.jpg" alt="">
      <figcaption> Description </figcaption>
    <figure> <img src="3.jpg" alt="">
      <figcaption> Description </figcaption>

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(){}



  • updated to the latest version


  • pause transitions when focus lost


  • fix timeout


  • fix loading issue


  • 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.