Fullscreen Responsive Image Slider with jQuery - Tinyslide
File Size: | 2.44 MB |
---|---|
Views Total: | 17365 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.