API tools faq
paste
dimaslanjaka

minifiedhtml.ex

dimaslanjaka
Mar 4th, 2017
114
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.83 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>ResponsiveSlides.js · Responsive jQuery Slider & Slideshow</title> <meta name="author" content="Viljami Salminen"> <meta name="description" content="ResponsiveSlides.js is a tiny jQuery plugin that automatically creates responsive slider using images inside a container."> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="responsiveslides.css"> <link rel="stylesheet" href="example.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="responsiveslides.min.js"></script> <script>$(function (){// Slideshow 1 $(".rslides1").responsiveSlides({speed: 1000, maxwidth: 800}); // Slideshow 2 $(".rslides2").responsiveSlides({auto: false, pager: true, speed: 500, maxwidth: 540});}); </script></head><body> <div id="wrapper"> <h1>ResponsiveSlides.js v1.55</h1> <h2>Simple & lightweight responsive slider plugin (in 1kb)</h2> <ul class="rslides rslides1"> <li><img src="1.jpg" alt=""></li><li><img src="2.jpg" alt=""></li><li><img src="3.jpg" alt=""></li></ul> <p><a href="http://responsiveslides.com/">ResponsiveSlides.js</a> is a tiny jQuery plugin that creates a responsive slider using elements inside a container. It has been used on sites like <a href="http://www.buildwindows.com/launch" rel="external">Microsoft's Build 2012</a> and <a href="https://gridsetapp.com" rel="external">Gridset App</a>. ResponsiveSLides.js works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don't natively support it. Only dependency is <a href="http://jquery.com/" rel="external">jQuery</a> (1.6 and up supported) and that all the images are same size.</p><p>Biggest difference to other responsive slider plugins is the file size (1.4kb minified and gzipped) + that this one doesn't try to do everything. Responsive Slides has basically only two different modes: Either it just automatically fades the images, or operates as a responsive image container with pagination and/or navigation to fade between slides.</p><h3>Features</h3> <ul class="list"> <li>Fully responsive</li><li>1kb minified and gzipped</li><li>CSS3 transitions with JavaScript fallback</li><li>Simple markup using unordered list</li><li>Settings for transition and timeout durations</li><li>Multiple slideshows supported</li><li>Automatic and manual fade</li><li>Works in all major desktop and mobile browsers</li><li>Captions and other html-elements supported inside slides</li><li>Separate pagination and next/prev controls</li><li>Possibility to choose where the controls append to</li><li>Possibility to randomize the order of the slides</li><li>Possibility to use custom markup for pagination</li><li>Can be paused while hovering slideshow and/or controls</li><li>Images can be wrapped inside links</li><li>Optional 'before' and 'after' callbacks</li></ul> <br><br><h3>Usage:</h3> <h4>1. Link files</h4> <pre><code><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  2. <script src="responsiveslides.min.js"></script></code></pre> <h4>2. Add Markup</h4> <pre><code><ul class="rslides">
  3.  <li><img src="1.jpg" alt=""></li>
  4.  <li><img src="2.jpg" alt=""></li>
  5.  <li><img src="3.jpg" alt=""></li>
  6. </ul></code></pre> <h4>3. Add CSS</h4> <pre><code>.rslides {
  7.  position: relative;
  8.   list-style: none;
  9.   overflow: hidden;
  10.   width: 100%;
  11.   padding: 0;
  12.   margin: 0;
  13.   }
  14.  
  15. .rslides li {
  16.   -webkit-backface-visibility: hidden;
  17.   position: absolute;
  18.   display: none;
  19.   width: 100%;
  20.   left: 0;
  21.   top: 0;
  22.   }
  23.  
  24. .rslides li:first-child {
  25.   position: relative;
  26.   display: block;
  27.   float: left;
  28.   }
  29.  
  30. .rslides img {
  31.   display: block;
  32.   height: auto;
  33.   float: left;
  34.   width: 100%;
  35.   border: 0;
  36.   }</code></pre> <h4>4. Hook up the slideshow</h4> <pre><code><script>
  37.   $(function() {
  38.     $(".rslides").responsiveSlides();
  39.   });
  40. </script></code></pre> <h4>5. Options you can customize</h4> <pre><code>$(".rslides").responsiveSlides({
  41.   auto: true,             // Boolean: Animate automatically, true or false
  42.   speed: 500,            // Integer: Speed of the transition, in milliseconds
  43.   timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
  44.   pager: false,           // Boolean: Show pager, true or false
  45.   nav: false,             // Boolean: Show navigation, true or false
  46.   random: false,          // Boolean: Randomize the order of the slides, true or false
  47.   pause: false,           // Boolean: Pause on hover, true or false
  48.   pauseControls: true,    // Boolean: Pause when hovering controls, true or false
  49.   prevText: "Previous",   // String: Text for the "previous" button
  50.   nextText: "Next",       // String: Text for the "next" button
  51.   maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
  52.   navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
  53.   manualControls: "",     // Selector: Declare custom pager navigation
  54.   namespace: "rslides",   // String: Change the default namespace used
  55.   before: function(){},   // Function: Before callback
  56.   after: function(){}     // Function: After callback
  57. });</code></pre> <p>That's all! Download the latest version, this demo and changelog from <a href="https://github.com/viljamis/ResponsiveSlides.js">Github</a>. For more examples about the usage <a href="http://responsiveslides.com/themes/themes.html">go here</a> or view <a href="http://responsiveslides.com/with-captions/themes.html">a demo with captions</a>.</p><br><br><br><br><h3>Example with options "auto:false" and "pager: true"</h3> <ul class="rslides rslides2"> <li><img src="1.jpg" alt=""></li><li><img src="2.jpg" alt=""></li><li><img src="3.jpg" alt=""></li></ul> <br><br><h3>ResponsiveSlides.js is tested with the following browser</h3> <ul class="list"> <li>Internet Explorer 6,7,8,9</li><li>Firefox 3,6,8,11</li><li>Safari 5,5.1</li><li>Chrome 15,20</li><li>Opera 11,11.6</li><li>iOS Safari</li><li>Symbian 3 Webkit</li><li>Opera Mobile 10.1</li><li>Opera Mini for iOS</li><li>IE7, IE9 Mobile</li><li>Firefox Mobile</li><li>Android 2.3+</li><li>Kindle browser</li></ul> <br><br><h3>Support</h3> <p>Please post your bug reports to <a href="https://github.com/viljamis/ResponsiveSlides.js/issues">GitHub issues</a>. For support requests, use <a href="http://stackoverflow.com">Stackoverflow</a>.</p><a href="https://github.com/viljamis/ResponsiveSlides.js" id="download">Download the latest version from GitHub</a> <p class="footer">ResponsiveSlides.js is created by <a href="https://viljamis.com">@viljamis</a>. Special thanks to <a href="https://github.com/bgutschke">Bastian Gutschke</a>.</p></div><a href="http://github.com/viljamis/ResponsiveSlides.js" class="github"><img style="position: absolute; top: 0; right: 0; border: 0;" src="forkme.png" alt="Fork me on GitHub"></a></body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!