index.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>SlidesJS Standard 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. <!-- CSS for slidesjs.com example -->
  12. <link rel="stylesheet" href="css/example.css">
  13. <link rel="stylesheet" href="css/font-awesome.min.css">
  14. <!-- End CSS for slidesjs.com example -->
  15. <!-- SlidesJS Optional: If you'd like to use this design -->
  16. <style>
  17. body {
  18. -webkit-font-smoothing: antialiased;
  19. font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  20. color: #232525;
  21. padding-top:70px;
  22. }
  23. #slides,
  24. #slides2,
  25. #slides3 {
  26. display: none;
  27. margin-bottom:50px;
  28. }
  29. .slidesjs-navigation {
  30. margin-top:3px;
  31. }
  32. .slidesjs-previous {
  33. margin-right: 5px;
  34. float: left;
  35. }
  36. .slidesjs-next {
  37. margin-right: 5px;
  38. float: left;
  39. }
  40. .slidesjs-pagination {
  41. margin: 6px 0 0;
  42. float: right;
  43. list-style: none;
  44. }
  45. .slidesjs-pagination li {
  46. float: left;
  47. margin: 0 1px;
  48. }
  49. .slidesjs-pagination li a {
  50. display: block;
  51. width: 13px;
  52. height: 0;
  53. padding-top: 13px;
  54. background-image: url(img/pagination.png);
  55. background-position: 0 0;
  56. float: left;
  57. overflow: hidden;
  58. }
  59. .slidesjs-pagination li a.active,
  60. .slidesjs-pagination li a:hover.active {
  61. background-position: 0 -13px
  62. }
  63. .slidesjs-pagination li a:hover {
  64. background-position: 0 -26px
  65. }
  66. a:link,
  67. a:visited {
  68. color: #333
  69. }
  70. a:hover,
  71. a:active {
  72. color: #9e2020
  73. }
  74. .navbar {
  75. overflow: hidden
  76. }
  77. </style>
  78. <!-- End SlidesJS Optional-->
  79. <!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow -->
  80. <style>
  81. #slides {
  82. display: none
  83. }
  84. .container {
  85. margin: 0 auto
  86. }
  87. /* For tablets & smart phones */
  88. @media (max-width: 767px) {
  89. body {
  90. padding-left: 20px;
  91. padding-right: 20px;
  92. }
  93. .container {
  94. width: auto
  95. }
  96. }
  97. /* For smartphones */
  98. @media (max-width: 480px) {
  99. .container {
  100. width: auto
  101. }
  102. }
  103. /* For smaller displays like laptops */
  104. @media (min-width: 768px) and (max-width: 979px) {
  105. .container {
  106. width: 724px
  107. }
  108. }
  109. /* For larger displays */
  110. @media (min-width: 1200px) {
  111. .container {
  112. width: 1170px
  113. }
  114. }
  115. </style>
  116. <!-- SlidesJS Required: -->
  117. </head>
  118. <body>
  119. <!-- SlidesJS Required: Start Slides -->
  120. <!-- The container is used to define the width of the slideshow -->
  121. <div class="container">
  122. <div id="slides">
  123. <img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
  124. <img src="img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
  125. <img src="img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
  126. <img src="img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
  127. <a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left"></i></a>
  128. <a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right"></i></a>
  129. </div>
  130. <div id="slides2">
  131. <img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
  132. <img src="img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
  133. <img src="img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
  134. <img src="img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
  135. <a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left"></i></a>
  136. <a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right"></i></a>
  137. </div>
  138. <div id="slides3">
  139. <img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
  140. <img src="img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
  141. <img src="img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
  142. <img src="img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
  143. <a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left"></i></a>
  144. <a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right"></i></a>
  145. </div>
  146. </div>
  147. <!-- End SlidesJS Required: Start Slides -->
  148. <!-- SlidesJS Required: Link to jQuery -->
  149. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  150. <!-- End SlidesJS Required -->
  151. <!-- SlidesJS Required: Link to jquery.slides.js -->
  152. <script src="js/jquery.slides.min.js"></script>
  153. <!-- End SlidesJS Required -->
  154. <!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
  155. <script>
  156. $(function() {
  157. $('#slides').slidesjs({
  158. width: 940,
  159. height: 528,
  160. navigation: false
  161. });
  162. /*
  163. To have multiple slideshows on the same page
  164. they just need to have separate IDs
  165. */
  166. $('#slides2').slidesjs({
  167. width: 940,
  168. height: 528,
  169. navigation: false,
  170. start: 3,
  171. play: {
  172. auto: true
  173. }
  174. });
  175. $('#slides3').slidesjs({
  176. width: 940,
  177. height: 528,
  178. navigation: false
  179. });
  180. });
  181. </script>
  182. <!-- End SlidesJS Required -->
  183. </body>
  184. </html>