Code:
.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
Code:
<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>
Comment