How did they get the slider to work like this

How did this website get the slider to work like this?

http://www.wistar.org/

I'm making one myself but the next/previous images you can see for about 1/4th of the whole is what keeps me wondering. All I accomplished is to just next/previous with a 0 cycle time but that fade of the next/previous image is what keeps me wondering.

Anyone has suggestions on how to approach this method?

Thanks in advance.

Jsfiddle isn't the original since I can't post it due to it being wordpress php(made this quickly):

jsfiddle.net/RkgrG/40/ (Not enough rep to link sorry)

Solution

Try this:

pastebin.com/ga3CGtH4

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130801/jquery.cycle2.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.carousel.min.js"></script>
    </head>
    <body>
        <style>
            #home-rotator-container { width:100%; overflow:hidden; position:relative; }
            #home-rotator .cycle-slideshow { width:3300px; }
            #home-rotator .cycle-slideshow img  { width: 1100px; height: 400px; }
            #home-rotator .cycle-slideshow {
                position:absolute;
                top:0;
                left:0;
            }
        </style>

        <div id="home-rotator-container">
            <div id="home-rotator">    
                <div class="cycle-slideshow" data-cycle-fx="carousel" data-cycle-speed="800" data-cycle-carousel-visible="3">
                    <img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
                    <img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
                    <img src="http://jquery.malsup.com/cycle2/images/beach3.jpg">
                    <img src="http://jquery.malsup.com/cycle2/images/beach4.jpg">
                    <img src="http://jquery.malsup.com/cycle2/images/beach5.jpg">
                    <img src="http://jquery.malsup.com/cycle2/images/beach6.jpg">  
                </div>            
            </div><!-- /#home-rotator -->
        </div><!-- /#home-rotator-container -->
        <script type="text/javascript">
            // function that determines offset
            function positionRotator()
            {
                var rotator_size = 1100;
                var initial_width = $(window).width();          
                var offset = (rotator_size - ((initial_width - rotator_size) / 2)) * -1;
                $("#home-rotator .cycle-slideshow").css("left",offset);            
            }          

            // do initial positioning
            positionRotator();      

            // re-position if screen is resized
            $(window).resize(function() {
              positionRotator();                      
            });

        </script>

    </body>
</html>

EDIT: if you change sizes remember to change the offset too:

var rotator_size = 1100;