Представляю вашему вниманию легкий слайдер изображений товара в интернет магазине. Слайдер работает на mootools и представляет собой карусель изображений товара интернет-магазина. Слайдер не автоматический, для просмотря полного изображения нужно нажать на миниатюру снизу и воявится его увеличенная копия, плавно прокручиваясь ввево или вправо.

Слайдер работает во всех браузерах и не прихотлив к другим скриптам. Сделан он на библиотеке mootools версии 1.1. 

Css код простой и вы без труда в нем разберетесь:

/* example_6 css */ #example_6 { position: relative; /* important */ overflow: hidden; /* important */ width: 640px; /* important */ height: 540px; /* important */ margin: 0; background: #fff; } #example_6_content { position: absolute; top: 0; margin-left: 0; } #example_6_content #example_6_content li { list-style: none; margin: 0; padding: 0; } #example_6_content { width: 13440px; } #container_bd #example_6 ul li { display: block; float: left; margin: 0; padding: 0; border: none; background-color: #fff; } #container_bd #example_6 ul li img { display: block; } #example_6_frame { position: relative; margin: 485px 131px 0 131px; } #container_bd #example_6_frame ul li { margin: 0 2px; } #container_bd #example_6_frame ul li img{ border: 1px solid #9cf; padding: 2px; } #container_bd #example_6_frame ul li img:hover {border: 1px solid #369;}

Html код тоже очень легкий:

<div id="container_bd"> 
    <div id="example_6">
        <ul id="example_6_content"> 
<li class="example_6_item"><a href="#" _mce_href="#"><img src="res/ex6_1.jpg" _mce_src="res/ex6_1.jpg" alt="slide 1" /></a></li> 
<li class="example_6_item"><a href="#" _mce_href="#"><img src="res/ex6_2.jpg" _mce_src="res/ex6_2.jpg" alt="slide 2" /></a></li> 
<li class="example_6_item"><a href="#" _mce_href="#"><img src="res/ex6_3.jpg" _mce_src="res/ex6_3.jpg" alt="slide 3" /></a></li> 
<li class="example_6_item"><a href="#" _mce_href="#"><img src="res/ex6_4.jpg" _mce_src="res/ex6_4.jpg" alt="slide 4" /></a></li> 
<li class="example_6_item"><a href="#" _mce_href="#"><img src="res/ex6_5.jpg" _mce_src="res/ex6_5.jpg" alt="slide 5" /></a></li> 
<li class="example_6_item"><a href="#" _mce_href="#"><img src="res/ex6_6.jpg" _mce_src="res/ex6_6.jpg" alt="slide 6" /></a></li> 
<li class="example_6_item"><a href="#" _mce_href="#"><img src="res/ex6_7.jpg" _mce_src="res/ex6_7.jpg" alt="slide 7" /></a></li>
        </ul>
    </div>
    <div id="example_6_frame">
         <ul> 
<li><a href="#" _mce_href="#"><img id="thumb0" src="res/ex6_1t.jpg" _mce_src="res/ex6_1t.jpg" alt="thumbnail 1" /></a></li> 
<li><a href="#" _mce_href="#"><img id="thumb1" src="res/ex6_2t.jpg" _mce_src="res/ex6_2t.jpg" alt="thumbnail 2" /></a></li> 
<li><a href="#" _mce_href="#"><img id="thumb2" src="res/ex6_3t.jpg" _mce_src="res/ex6_3t.jpg" alt="thumbnail 3" /></a></li> 
<li><a href="#" _mce_href="#"><img id="thumb3" src="res/ex6_4t.jpg" _mce_src="res/ex6_4t.jpg" alt="thumbnail 4" /></a></li> 
<li><a href="#" _mce_href="#"><img id="thumb4" src="res/ex6_5t.jpg" _mce_src="res/ex6_5t.jpg" alt="thumbnail 5" /></a></li> 
<li><a href="#" _mce_href="#"><img id="thumb5" src="res/ex6_6t.jpg" _mce_src="res/ex6_6t.jpg" alt="thumbnail 6" /></a></li> 
<li><a href="#" _mce_href="#">
 <img id="thumb6" src="res/ex6_7t.jpg" _mce_src="res/ex6_7t.jpg" alt="thumbnail 7" /></a></li>
         </ul>
     </div>
</div>

Основной код Js, отвечающий за прокрутку:

window.addEvent("domready", function() { //new Accordion($$(".accordion_toggler"), $$(".accordion_content")); dp.SyntaxHighlighter.HighlightAll("usage"); var ex6Carousel = new iCarousel("example_6_content", { idPrevious: "example_6_previous", idNext: "example_6_next", idToggle: "undefined", item: { klass: "example_6_item", size: 640 }, animation: { type: "scroll", duration: 1000, amount: 1 } }); $("thumb0").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(0)}); $("thumb1").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(1)}); $("thumb2").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(2)}); $("thumb3").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(3)}); $("thumb4").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(4)}); $("thumb5").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(5)}); $("thumb6").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(6)}); });