I have embedded a few slideshows into my website so I thought I would explain how I went about it. I used an already existing slideshow from a tutorial online, which used jQuery.
First off, I placed a file named 'responsiveslides.min.js' into the same folder as my HTML files. This is what enables the Javascript to work to make the site responsive.
The next piece of code was to be placed at the bottom of the <body> section of my HTML. This was unusual to me as I would have put a script in the <head> tags, but it was specifically instructed to place it at the bottom.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
<script>
$(function() {
$(".rslides").responsiveSlides({
auto: true, // Boolean: Animate automatically, true or false
speed: 500, // Integer: Speed of the transition, in milliseconds
timeout: 4000, // Integer: Time between slide transitions, in milliseconds
pager: false, // Boolean: Show pager, true or false
nav: false, // Boolean: Show navigation, true or false
random: false, // Boolean: Randomize the order of the slides, true or false
pause: false, // Boolean: Pause on hover, true or false
pauseControls: true, // Boolean: Pause when hovering controls, true or false
prevText: "", // String: Text for the "previous" button
nextText: "", // String: Text for the "next" button
maxwidth: "", // Integer: Max-width of the slideshow, in pixels
navContainer: "", // Selector: Where controls should be appended to, default is after the 'ul'
manualControls: "", // Selector: Declare custom pager navigation
namespace: "rslides", // String: Change the default namespace used
before: function(){}, // Function: Before callback
after: function(){} // Function: After callback
});
});
</script>
In this script I can go in and make changes on what I want to appear. In bold above you can see the 'nav' feature. If I want navigation buttons to appear on the Slideshow I can change it to "true" instead of "false" and they will appear.
In the area I want the slideshow to appear, I put this:
<div class="container">
<ul class="rslides">
<li><img src="images/ash_1.jpg" alt=""></li>
<li><img src="images/ash_2.jpg" alt=""></li>
<li><img src="images/ash_3.jpg" alt=""></li>
<li><img src="images/ash_4.jpg" alt=""></li>
<li><img src="images/ash_5.jpg" alt=""></li>
<li><img src="images/ash_6.jpg" alt=""></li>
</ul>
</div>
This seems extremely simple, almost too simple to me. In bold above you can see "class="rslides". This relates to the next code, placed in the CSS, which tells the browser how to display that Class, as well as the script in the bottom of the body.
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
display: block;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
margin-right: auto;
margin-left: auto;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
margin-right: auto;
margin-left: auto;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
margin-right: auto;
margin-left: auto;
}
In order to make sure my slideshow displays properly I had to make sure all of my images were the same dimensions (also, to make them smaller sizes and so they load quicker, exported and compressed for the web), and that they were in the 'images' folder, reference in the src code in the HTML.
No comments:
Post a Comment