121 lines
3.7 KiB
HTML
121 lines
3.7 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>SlidesJS Basic 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 -->
|
|
|
|
<!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow -->
|
|
<style>
|
|
/* Prevent the slideshow from flashing on load */
|
|
#slides {
|
|
display: none
|
|
}
|
|
|
|
/* Center the slideshow */
|
|
.container {
|
|
margin: 0 auto
|
|
}
|
|
|
|
/* Show active item in the pagination */
|
|
.slidesjs-pagination .active {
|
|
color:red;
|
|
}
|
|
|
|
/* Media quires for a responsive layout */
|
|
|
|
/* For tablets & smart phones */
|
|
@media (max-width: 767px) {
|
|
body {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
.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/">
|
|
</div>
|
|
<div id="slidesjs-log">Slide <span class="slidesjs-slide-number">1</span> of 4</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,
|
|
callback: {
|
|
loaded: function(number) {
|
|
// Use your browser console to view log
|
|
console.log('SlidesJS: Loaded with slide #' + number);
|
|
|
|
// Show start slide in log
|
|
$('#slidesjs-log .slidesjs-slide-number').text(number);
|
|
},
|
|
start: function(number) {
|
|
// Use your browser console to view log
|
|
console.log('SlidesJS: Start Animation on slide #' + number);
|
|
},
|
|
complete: function(number) {
|
|
// Use your browser console to view log
|
|
console.log('SlidesJS: Animation Complete. Current slide is #' + number);
|
|
|
|
// Change slide number on animation complete
|
|
$('#slidesjs-log .slidesjs-slide-number').text(number);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<!-- End SlidesJS Required -->
|
|
</body>
|
|
</html>
|