The thought of developing your own image slider to meet up with your need may seem challenging and time consuming. I stumbled upon a tutorial conducted by HelpingDevelop that took the whole process from scratch to finish in simple and easy way that anybody can understand.
Sometimes the existing image slider out there may not meet up with your specifications as a web developer. The size may either be too large or too small, the layout design may not be what you want among others. In this step by step tutorial, you can actually follow along and come out with a fabulous image slider for yourself. This part #1 only covers the foundation that will be improved in subsequent series.
The entire code:
<html>
<head>
<title>jquery image Slider</title>
<style>
.slider{
width:800px;
height:350px;
overflow:hidden;
margin:30px auto;
background-image:url(img/loader.png);
background-repeat:no-repeat;
background-position:center;
}
.shadow{
background-image:url(img/sliderbg.png);
background-repeat:no-repeat;
background-position:top;
width:846px;
height:133px;
margin:-60px auto;
}
.slider img{
width:800px;
height:350px;
display:none;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script> </head> <body> <div class="slider"> <img src="images/slider1.png" border="0" alt="Slider 1"> <img src="images/slider2.png" border="0" alt="Slider 2"> <img src="images/slider3.png" border="0" alt="Slider 3"> <img src="images/slider4.png" border="0" alt="Slider 4"> </div> <div class="shadow"></div> </body> </html>Breaking it down...
.slider{
width:800px;
height:350px;
overflow:hidden;
margin:30px auto;
background-image:url(img/loader.png);
background-repeat:no-repeat;
background-position:center;
}
The CSS property above is assigned to the DIV with the slider class. This div is the frame that will hold the image slider. The width is set to 800px with height of 350px. The overflow property tells the browser to hide part of the image if it exceeds the width or the height. The margin is set 30px top and bottom whereas the left and right margin is set to auto. While we wait for the images to be loaded within that frame, an animated loader is used to inform the visitor images will be loaded pretty soon and will be positioned at the center. So all the images within the slider class will be loaded within this frame. That's all it is to this section.
Up next...
.shadow{
background-image:url(img/sliderbg.png);
background-repeat:no-repeat;
background-position:top;
width:846px;
height:133px;
margin:-60px auto;
}
This part could be optional if you so wish. It's the part beneath the slider. It is there to add more beauty to the design if you would asked me.
And...
.slider img{
width:800px;
height:350px;
display:none;
}
This part enforces all the images to comply to width of 800px with a height of 350px. Display is set to none since we'll be using jQuery to load all the images.
The HTML part of this is self-explanatory. Coming up next.... jQuery image slider part#2
0 comments:
Post a Comment