index.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>SlidesJS Basic Code Example</title>
  6. <meta name="description" content="SlidesJS is a simple slideshow plugin for jQuery. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.">
  7. <meta name="author" content="Nathan Searles">
  8. <!-- SlidesJS Required (if responsive): Sets the page width to the device width. -->
  9. <meta name="viewport" content="width=device-width">
  10. <!-- End SlidesJS Required -->
  11. <!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow -->
  12. <style>
  13. /* Prevent the slideshow from flashing on load */
  14. #slides {
  15. display: none
  16. }
  17. /* Center the slideshow */
  18. .container {
  19. margin: 0 auto
  20. }
  21. /* Show active item in the pagination */
  22. .slidesjs-pagination .active {
  23. color:red;
  24. }
  25. /* Media quires for a responsive layout */
  26. /* For tablets & smart phones */
  27. @media (max-width: 767px) {
  28. body {
  29. padding-left: 10px;
  30. padding-right: 10px;
  31. }
  32. .container {
  33. width: auto
  34. }
  35. }
  36. /* For smartphones */
  37. @media (max-width: 480px) {
  38. .container {
  39. width: auto
  40. }
  41. }
  42. /* For smaller displays like laptops */
  43. @media (min-width: 768px) and (max-width: 979px) {
  44. .container {
  45. width: 724px
  46. }
  47. }
  48. /* For larger displays */
  49. @media (min-width: 1200px) {
  50. .container {
  51. width: 1170px
  52. }
  53. }
  54. </style>
  55. <!-- SlidesJS Required: -->
  56. </head>
  57. <body>
  58. <!-- SlidesJS Required: Start Slides -->
  59. <!-- The container is used to define the width of the slideshow -->
  60. <div class="container">
  61. <div id="slides">
  62. <img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
  63. <img src="img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
  64. <img src="img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
  65. <img src="img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
  66. </div>
  67. </div>
  68. <!-- End SlidesJS Required: Start Slides -->
  69. <!-- SlidesJS Required: Link to jQuery -->
  70. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  71. <!-- End SlidesJS Required -->
  72. <!-- SlidesJS Required: Link to jquery.slides.js -->
  73. <script src="js/jquery.slides.min.js"></script>
  74. <!-- End SlidesJS Required -->
  75. <!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
  76. <script>
  77. $(function() {
  78. $('#slides').slidesjs({
  79. width: 940,
  80. height: 528
  81. });
  82. });
  83. </script>
  84. <!-- End SlidesJS Required -->
  85. </body>
  86. </html>