?
Path : /home/admin/public_html/old/happyezystyle/Slides/examples/Carousel/ |
Current File : /home/admin/public_html/old/happyezystyle/Slides/examples/Carousel/index.html |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Slides, A Slideshow Plugin for jQuery</title> <style type="text/css" media="screen"> /* Load CSS before JavaScript */ /* Slides container Important: Set the width of your slides container Set to display none, prevents content flash */ .slides_container { width:470px; display:none; } /* Each slide Important: Set the width of your slides If height not specified height will be set by the slide content Set to display block */ .slides_container div.slide { width:470px; height:170px; display:block; } /* Set the size of your carousel items */ .item { float:left; width:135px; height:135px; margin:0 10px; background:#efefef; } /* Optional: Reset list default style */ .pagination { list-style:none; margin:0; padding:0; } /* Optional: Show the current slide in the pagination */ .pagination .current a { color:red; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script src="js/slides.min.jquery.js"></script> <script> $(function(){ $('#slides').slides({ preload: true, generateNextPrev: true }); }); </script> </head> <body> <div id="slides"> <div class="slides_container"> <div class="slide"> <div class="item"> Item One </div> <div class="item"> Item Two </div> <div class="item"> Item Three </div> </div> <div class="slide"> <div class="item"> Item Four </div> <div class="item"> Item Five </div> <div class="item"> Item Six </div> </div> <div class="slide"> <div class="item"> Item Seven </div> <div class="item"> Item Eight </div> </div> </div> </div> </body> </html>