index.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  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. display: none
  25. }
  26. #slides .slidesjs-navigation {
  27. margin-top:3px;
  28. }
  29. #slides .slidesjs-previous {
  30. margin-right: 5px;
  31. float: left;
  32. }
  33. #slides .slidesjs-next {
  34. margin-right: 5px;
  35. float: left;
  36. }
  37. .slidesjs-pagination {
  38. margin: 6px 0 0;
  39. float: right;
  40. list-style: none;
  41. }
  42. .slidesjs-pagination li {
  43. float: left;
  44. margin: 0 1px;
  45. }
  46. .slidesjs-pagination li a {
  47. display: block;
  48. width: 13px;
  49. height: 0;
  50. padding-top: 13px;
  51. background-image: url(img/pagination.png);
  52. background-position: 0 0;
  53. float: left;
  54. overflow: hidden;
  55. }
  56. .slidesjs-pagination li a.active,
  57. .slidesjs-pagination li a:hover.active {
  58. background-position: 0 -13px
  59. }
  60. .slidesjs-pagination li a:hover {
  61. background-position: 0 -26px
  62. }
  63. #slides a:link,
  64. #slides a:visited {
  65. color: #333
  66. }
  67. #slides a:hover,
  68. #slides a:active {
  69. color: #9e2020
  70. }
  71. .navbar {
  72. overflow: hidden
  73. }
  74. </style>
  75. <!-- End SlidesJS Optional-->
  76. <!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow -->
  77. <style>
  78. #slides {
  79. display: none
  80. }
  81. .container {
  82. margin: 0 auto
  83. }
  84. /* For tablets & smart phones */
  85. @media (max-width: 767px) {
  86. body {
  87. padding-left: 20px;
  88. padding-right: 20px;
  89. }
  90. .container {
  91. width: auto
  92. }
  93. }
  94. /* For smartphones */
  95. @media (max-width: 480px) {
  96. .container {
  97. width: auto
  98. }
  99. }
  100. /* For smaller displays like laptops */
  101. @media (min-width: 768px) and (max-width: 979px) {
  102. .container {
  103. width: 724px
  104. }
  105. }
  106. /* For larger displays */
  107. @media (min-width: 1200px) {
  108. .container {
  109. width: 1170px
  110. }
  111. }
  112. </style>
  113. <!-- SlidesJS Required: -->
  114. </head>
  115. <body>
  116. <!-- SlidesJS Required: Start Slides -->
  117. <!-- The container is used to define the width of the slideshow -->
  118. <div class="container">
  119. <div id="slides">
  120. <img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
  121. <img src="img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
  122. <img src="img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
  123. <img src="img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
  124. <a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left icon-large"></i></a>
  125. <a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right icon-large"></i></a>
  126. </div>
  127. </div>
  128. <!-- End SlidesJS Required: Start Slides -->
  129. <!-- SlidesJS Required: Link to jQuery -->
  130. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  131. <!-- End SlidesJS Required -->
  132. <!-- SlidesJS Required: Link to jquery.slides.js -->
  133. <script src="js/jquery.slides.min.js"></script>
  134. <!-- End SlidesJS Required -->
  135. <!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
  136. <script>
  137. $(function() {
  138. $('#slides').slidesjs({
  139. width: 940,
  140. height: 528,
  141. navigation: false
  142. });
  143. });
  144. </script>
  145. <!-- End SlidesJS Required -->
  146. </body>
  147. </html>