Expand|Select|Wrap|Line Numbers
- .theme-default #slider {
- width:570px; /* Make sure your images are the same size */
- height:227px; /* Make sure your images are the same size */
- float: right;
- margin-top: 0px;
- margin-right: auto;
- margin-bottom: 0;
- margin-left: auto;
- }
- .theme-pascal.slider-wrapper,
- .theme-orman.slider-wrapper {
- margin-top:150px;
- }
My HTML codings is as per below
Expand|Select|Wrap|Line Numbers
- <div id="container">
- <div id="slider">
- <div id="slides">
- <div class="slides_container">
- <div class="slide"> <span class="slide"><img src="http://bytes.com/images/slider/NursesDay1.jpg" width="440" height="220" alt="Slide 1" /></span> </div>
- <div class="slide"> <img src="http://bytes.com/images/slider/NursesDay2.jpg" width="440" height="220" alt="Slide 2" />
- </div>
- <div class="slide"> <img src="http://bytes.com/images/slider/NursesDay3.jpg" width="440" height="220" alt="Slide 3" />
- </div>
- <div class="slide"> <img src="http://bytes.com/images/slider/NursesDay4.jpg" width="440" height="220" alt="Slide 4" />
- </div>
- <div class="slide"> <img src="http://bytes.com/images/slider/NursesDay5.jpg" width="440" height="220" alt="Slide 5" />
- </div>
- </div>
- <a href="#" class="prev"><img src="http://bytes.com/images/slider/arrow-prev.png" width="24" height="43" alt="Arrow Prev" /></a> <a href="#" class="next"><img src="http://bytes.com/images/slider/arrow-next.png" width="24" height="43" alt="Arrow Next" /></a> </div>
- <img src="http://bytes.com/images/slider/example-frame.png" name="frame" width="600" height="300" id="frame" /> </div>
- </div>
- </div>