123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212 |
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>SlidesJS Standard Code Example</title>
- <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.">
- <meta name="author" content="Nathan Searles">
- <!-- SlidesJS Required (if responsive): Sets the page width to the device width. -->
- <meta name="viewport" content="width=device-width">
- <!-- End SlidesJS Required -->
- <!-- CSS for slidesjs.com example -->
- <link rel="stylesheet" href="css/example.css">
- <link rel="stylesheet" href="css/font-awesome.min.css">
- <!-- End CSS for slidesjs.com example -->
- <!-- SlidesJS Optional: If you'd like to use this design -->
- <style>
- body {
- -webkit-font-smoothing: antialiased;
- font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
- color: #232525;
- padding-top:70px;
- }
- #slides,
- #slides2,
- #slides3 {
- display: none;
- margin-bottom:50px;
- }
- .slidesjs-navigation {
- margin-top:3px;
- }
- .slidesjs-previous {
- margin-right: 5px;
- float: left;
- }
- .slidesjs-next {
- margin-right: 5px;
- float: left;
- }
- .slidesjs-pagination {
- margin: 6px 0 0;
- float: right;
- list-style: none;
- }
- .slidesjs-pagination li {
- float: left;
- margin: 0 1px;
- }
- .slidesjs-pagination li a {
- display: block;
- width: 13px;
- height: 0;
- padding-top: 13px;
- background-image: url(img/pagination.png);
- background-position: 0 0;
- float: left;
- overflow: hidden;
- }
- .slidesjs-pagination li a.active,
- .slidesjs-pagination li a:hover.active {
- background-position: 0 -13px
- }
- .slidesjs-pagination li a:hover {
- background-position: 0 -26px
- }
- a:link,
- a:visited {
- color: #333
- }
- a:hover,
- a:active {
- color: #9e2020
- }
- .navbar {
- overflow: hidden
- }
- </style>
- <!-- End SlidesJS Optional-->
- <!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow -->
- <style>
- #slides {
- display: none
- }
- .container {
- margin: 0 auto
- }
- /* For tablets & smart phones */
- @media (max-width: 767px) {
- body {
- padding-left: 20px;
- padding-right: 20px;
- }
- .container {
- width: auto
- }
- }
- /* For smartphones */
- @media (max-width: 480px) {
- .container {
- width: auto
- }
- }
- /* For smaller displays like laptops */
- @media (min-width: 768px) and (max-width: 979px) {
- .container {
- width: 724px
- }
- }
- /* For larger displays */
- @media (min-width: 1200px) {
- .container {
- width: 1170px
- }
- }
- </style>
- <!-- SlidesJS Required: -->
- </head>
- <body>
- <!-- SlidesJS Required: Start Slides -->
- <!-- The container is used to define the width of the slideshow -->
- <div class="container">
- <div id="slides">
- <img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
- <img src="img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
- <img src="img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
- <img src="img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
- <a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left"></i></a>
- <a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right"></i></a>
- </div>
- <div id="slides2">
- <img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
- <img src="img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
- <img src="img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
- <img src="img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
- <a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left"></i></a>
- <a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right"></i></a>
- </div>
- <div id="slides3">
- <img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
- <img src="img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
- <img src="img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
- <img src="img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
- <a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left"></i></a>
- <a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right"></i></a>
- </div>
- </div>
- <!-- End SlidesJS Required: Start Slides -->
- <!-- SlidesJS Required: Link to jQuery -->
- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
- <!-- End SlidesJS Required -->
- <!-- SlidesJS Required: Link to jquery.slides.js -->
- <script src="js/jquery.slides.min.js"></script>
- <!-- End SlidesJS Required -->
- <!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
- <script>
- $(function() {
- $('#slides').slidesjs({
- width: 940,
- height: 528,
- navigation: false
- });
- /*
- To have multiple slideshows on the same page
- they just need to have separate IDs
- */
- $('#slides2').slidesjs({
- width: 940,
- height: 528,
- navigation: false,
- start: 3,
- play: {
- auto: true
- }
- });
- $('#slides3').slidesjs({
- width: 940,
- height: 528,
- navigation: false
- });
- });
- </script>
- <!-- End SlidesJS Required -->
- </body>
- </html>
|