Many times you have seen "sliding divs" in the apps , which are used to display images, ads etc . In this post i will tell you how to made such type of application. The application is quite simple. We will makes use of XHTML, CSS and Javascript libraray jquery.
The demo should look like this :
So first we write the HTML markup code for the
<!--- DISPLAY CONTAINER --->
<div id="container">
<!-- OUTTER WRAPPER -->
<div id="slider-wrapper">
<!-- SLIDE 1 -->
<div id="slide1" class="slide">
<img src="/Images/forest.jpg" alt="Slide 1" style="float: left; <--give your image path-->
margin-right: 20px;" />
<h2>
Showing Forest Image</h2>
<p>
You can use any html element here.
</p>
</div>
<!-- SLIDE 2 -->
<div id="slide2" class="slide">
<img src="/Images/Mypic.jpg" alt="Slide 2" style="float: left;
margin-right: 20px;" />
<h2>
MY PIC </h2>
<p>
Here you can add any text /html elemet
</p>
</div>
<!-- SLIDE 3 -->
<div id="slide3" class="slide">
<img src="/Images/Love.jpg" alt="Slide 3" style="float: left;
margin-right: 20px;" />
<h2>
Pic showing love</h2>
<p>
You can use any html elements
or put anything you wish in these containers.
</p>
</div>
</div>
</div>
<!--- NAVIGATION BUTTONS -->
<a href="javascript:void(0)" onclick="PreviousSlide()" id="PreviousButton" style="margin-right: 10px;">
Previous</a>
<a href="javascript:void(0)" onclick="NextSlide()" id="NextButton">Next </a>
You'll notice that there is a div with an id of "container" .This is going to be the display area for the slides. Then we have another div with the id "slider-wrapper" this is the main div that contains all of our slides. Then within that div, we have multiple divs with ids of "slide1", "slide2" and "slide3" and so on.., as you may have guessed, these are out actual slides. Now we wont actually use the slide id's for anything but naming purposes. You'll notice that we have assigned a class to these slides called "slide", this is what we will use to style them because we want all slides to have the same properties. Inside of these slides, you can put anything you want including HTML tags. Now we move to the styling part of our application.
CSS Style :
/* dISPLAY ARE OF OUR SLIDE, customize it */
#container
{
width: 550px;
overflow: hidden;
}
/* SET TO THE TOTAL WIDTH OF ALL DIVS */
#slider-wrapper
{
width: 1650px;
}
/* THESE ARE THE INDIVIDUAL SLIDE PROPERTIES */
.slide
{
width: 550px;
height: 200px;
overflow: hidden;
float: left;
}
The css is quite simple. Now finally our script will come
jQUERY Script code:
<script type="text/javascript">
var SlideWidth = 550;
var SlideSpeed = 500;
$(document).ready(function () {
// set the prev and next buttons display
SetNavigationDisplay();
});
function CurrentMargin() {
// get current margin of slider
var currentMargin = $("#slider-wrapper").css("margin-left");
// first page load, margin will be auto, we need to change this to 0
if (currentMargin == "auto") {
currentMargin = 0;
}
// return the current margin to the function as an integer
return parseInt(currentMargin);
}
function SetNavigationDisplay() {
// get current margin
var currentMargin = CurrentMargin();
// if current margin is at 0, then we are at the beginning, hide previous
if (currentMargin == 0) {
$("#PreviousButton").hide();
}
else {
$("#PreviousButton").show();
}
// get wrapper width
var wrapperWidth = $("#slider-wrapper").width();
// turn current margin into postive number and calculate if we are at last slide, if so, hide next button
if ((currentMargin * -1) == (wrapperWidth - SlideWidth)) {
$("#NextButton").hide();
}
else {
$("#NextButton").show();
}
}
function NextSlide() {
// get the current margin and subtract the slide width
var newMargin = CurrentMargin() - SlideWidth;
// slide the wrapper to the left to show the next panel at the set speed. Then set the nav display on completion of animation.
$("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, function () { SetNavigationDisplay() });
}
function PreviousSlide() {
// get the current margin and subtract the slide width
var newMargin = CurrentMargin() + SlideWidth;
// slide the wrapper to the right to show the previous panel at the set speed. Then set the nav display on completion of animation.
$("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, function () { SetNavigationDisplay() });
}
</script>
So here is the jQUERY image slider, you can simply add the the images in place of my image. Tell me if you face any problem.
Happy BLOGGING :)