Submit your widget

Fullscreen Image Slider with jQuery plugin

Created 10 years ago   Views 29160   downloads 4264    Author htmldrive.net
Fullscreen Image Slider with jQuery plugin
View DemoDownload
59
Share |

Features

  1. Realtime window resize responsive
  2. Optimization for tablet and smartphone
  3. Easy to installation configuration
  4. Support touch gestures
  5. Support left/right arrow keys
  6. Preload images 

Step1:include css and js files.

        <link rel="stylesheet" type="text/css" href="css/normalize.css" media="screen, projection" />
        <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="css/fullscreen_slider.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <script type="text/javascript" src="js/jquery.touchswipe.js"></script>
        <script type="text/javascript" src="js/fullscreen_slider.js"></script>

 

Step2:create slideshow images and text.

        <div id="slider" class="fullscreen_slider">
            <div class="fullscreen_slider_child">
                <div class="fullscreen_slider_image">
                    <img src="800x600.gif"  />
                </div>
                <div class="fullscreen_slider_caption">Description</div>
            </div>
            <div class="fullscreen_slider_child">
                <div class="fullscreen_slider_image">
                    <img src="800x600.gif" />
                </div>
                <div class="fullscreen_slider_caption">Description</div>
            </div>
            <div class="fullscreen_slider_child">
                <div class="fullscreen_slider_image">
                    <img src="800x600.gif" />
                </div>
                <div class="fullscreen_slider_caption">Description</div>
            </div>
        </div>

 

Step3:add script.

            $(document).ready(function (){
                $('#slider').fullscreen_slider({
                  easing: 'easeOutQuad',
                  handle_width: 60, //Prev next show width
                  speed: 'slow'
                });
            });
            $(window).resize(function() {
                $('#slider').fullscreen_slider('resize');
            });