Выделить код
<!--HTML--> <style> #slides .slidesNext,#slides .slidesPrevious { position:absolute; top:50%; left:-40px; width:24px; height:0; margin-top:-32px; padding-top:32px; display:block; z-index:101; overflow:hidden; background:url(../img/navigation-previous.png) no-repeat 0 0; } #slides .slidesNext { left:798px; background:url(../img/navigation-next.png) no-repeat 0 0; } /* Pagination */ .slidesPagination { margin:10px 0 0; float:right; } .slidesPagination li { float:left; margin:0 1px; list-style:none; } .slidesPagination li a { display:block; width:14px; height:0; padding-top:14px; background-image:url(../img/pagination.png); background-position:0 0; overflow:hidden; } .slidesPagination li.slidesCurrent a { background-position:0 -14px; } </style> <script> $(function(){ $("#slides").slides({ responsive: true }); }); </script> <style> #slides .slidesNext { right:-35px; left:auto; } #slides .slidesPrevious { left:-35px; } </style> <div id="container1" style="width:100%"> <p>Scale the browser window, good times.</p> <div id="slides"> <img src="http://slidesjs.com/examples/standard/img/slide-1.jpg" width="100%" alt="Slide 1"> <img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="100%" alt="Slide 2"> <img src="http://slidesjs.com/examples/standard/img/slide-3.jpg" width="100%" alt="Slide 3"> <img src="http://slidesjs.com/examples/standard/img/slide-4.jpg" width="100%" alt="Slide 4"> <img src="http://slidesjs.com/examples/standard/img/slide-5.jpg" width="100%" alt="Slide 5"> <img src="http://slidesjs.com/examples/standard/img/slide-6.jpg" width="100%" alt="Slide 6"> <img src="http://slidesjs.com/examples/standard/img/slide-7.jpg" width="100%" alt="Slide 7"> </div> </div>