Slider de uno en uno

[Dradi7]

Bueno si revisas bien el codigo el esta usando solamente

FancyBox - jQuery Plugin

este es el codigo que obtuve al usar el inspector

Código HTML:

<div id="slider">
                        <div>
                            <ul>
                                <li><a href="images/slider_pic1_big.jpg"><span></span><img src="images/slider_pic1.jpg" width="383" height="383" alt=""><div>Invecto Nasea</div></a></li>
                                <li><a href="images/slider_pic2_big.jpg"><span></span><img src="images/slider_pic2.jpg" width="383" height="383" alt=""><div>Vareor Gerta</div></a></li>
                                <li><a href="images/slider_pic3_big.jpg"><span></span><img src="images/slider_pic3.jpg" width="383" height="383" alt=""><div>Devero Mias</div></a></li>
                                <li><a href="images/slider_pic4_big.jpg"><span></span><img src="images/slider_pic4.jpg" width="383" height="383" alt=""><div>Lorem Ipsum</div></a></li>
                                <li><a href="images/slider_pic5_big.jpg"><span></span><img src="images/slider_pic5.jpg" width="383" height="383" alt=""><div>Jertyad Vase</div></a></li>
                                <li><a href="images/slider_pic6_big.jpg"><span></span><img src="images/slider_pic6.jpg" width="383" height="383" alt=""><div>Sereve Beast</div></a></li>
                                <li><a href="images/slider_pic7_big.jpg"><span></span><img src="images/slider_pic7.jpg" width="383" height="383" alt=""><div>Lertys Ferode</div></a></li>
                                <li><a href="images/slider_pic8_big.jpg"><span></span><img src="images/slider_pic8.jpg" width="383" height="383" alt=""><div>Misear Keryas</div></a></li>
                            </ul>
                        </div>
                        <a id="prev" href=""></a>
                        <a id="next" href=""></a>
                    </div>
<!-- ESTO ES PARA MOSTRAR LAS IMAGENES EN PEQUEÑO -->
<div class="contentSlider">
                        <ul>
                            <li>
                                <img src="images/page2_pic1.jpg" width="150" height="105" alt="">
                                <h3>stricies phaleda</h3>
                                <p>anritma hasesera de <a href="#!/page_more"><span class="more"></span></a></p>
                            </li>
                            <li>
                                <img src="images/page2_pic2.jpg" width="150" height="105" alt="">
                                <h3>quia dolor sit</h3>
                                <p>anritma hasesera de <a href="#!/page_more"><span class="more"></span></a></p>
                            </li>
                        </ul>
                    </div>
 

El JavaScript

Código Javascript:

$("#slider > div").jCarouselLite({
        btnNext:'#next',
        btnPrev:'#prev',
        easing: 'easeOutSine',
        speed: 500,
        visible: 1,
    });
    
    $(".contentSlider").jCarouselLite({
        btnNext:'.next_slide',
        btnPrev:'.prev_slide',
        easing: 'easeOutSine',
        speed: 500,
        visible: 2,
    });
    
    $('#slider li a').each(function(){
        $(this).find('span').stop().animate({opacity:0}, 0);
        $(this).hover(function()
        {
            $(this).find('span').stop().animate({opacity:1}, aniButtonDuration,'easeOutCubic')                     
        }, function(){
            $(this).find('span').stop().animate({opacity:0}, aniButtonDuration,'easeInSine')                           
        })
    })
    
    $('#slider li a').fancybox({
        'overlayColor'  :   '#000',
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   500, 
        'speedOut'      :   300
     });
 

Eso es todo