Responsive Fullscreen jQuery Slideshow Plugin - Responsive_DG_Slider
File Size: | 1.19 MB |
---|---|
Views Total: | 8413 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Responsive_DG_Slider is a pretty jQuery plugin that allows to create responsive full-screen slideshows with nice transition effects, easing effects, thumbnails preview and some controls.
Related Plugins:
- Simple Fullscreen Image Slideshow Plugin - fullsizable
- Stunning Fullscreen Photo Wall Gallery
- jQuery Fullscreen Background Slideshow - MaxImage
- Fullscreen Background Slideshow with Audio
- Animated Fullscreen Background Image Slideshow
- Full Screen Slider Plugin - Superslides
- Supersized Fullscreen Slideshow Plugin
- jQuery Plugin For Responsive Full Screen Image Slider - bgswitcher
How to use it:
1. Create a container for your full-screen slideshow.
<div class="fluid_container"> <div class="fluid_dg_wrap fluid_dg_emboss pattern_1 fluid_dg_white_skin" id="demo"> <div data-thumb="slides/thumbs/peace_love_and_happiness.jpg" data-src="slides/peace_love_and_happiness-wallpaper-1280x720.jpg"></div> <div data-thumb="slides/thumbs/box_people.jpg" data-src="slides/box_people-wallpaper-1280x720.jpg"></div> <div data-thumb="slides/thumbs/heart_book.jpg" data-src="slides/heart_book-wallpaper-1280x720.jpg"></div> <div data-thumb="slides/thumbs/carnations_bouquet_on_a_bench.jpg" data-src="slides/carnations_bouquet_on_a_bench-wallpaper-1280x720.jpg"></div> <div data-thumb="slides/thumbs/paint_splash_heart.jpg" data-src="slides/paint_splash_heart-wallpaper-1280x720.jpg"></div> <div data-thumb="slides/thumbs/silhouette.jpg" data-src="slides/silhouette-wallpaper-1280x720.jpg"></div> </div> </div>
2. Include required CSS file with themes
<link rel='stylesheet' href='css/fluid_dg.css' type='text/css' media='all'>
3. Include jQuery library and other necessary javascript files
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script> <script type='text/javascript' src='Scripts/jquery.mobile.customized.min.js'></script> <script type='text/javascript' src='Scripts/jquery.easing.1.3.js'></script> <script type='text/javascript' src='Scripts/fluid_dg.min.js'></script>
4. Call the plugin with some options
<script>jQuery(document).ready(function(){ jQuery(function(){ jQuery('#fluid_dg_wrap_4').fluid_dg({ height: 'auto', loader: 'bar', pagination: false, thumbnails: true, hover: false, opacityOnGrid: false, imagePath: '' }); }); }) </script>
This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.