How did they get the slider to work like this [closed]

Question 1

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;

Question 2

I'll create one from scratch cause I need it for my project I'm doing right now

Still making the JS logic, but to show you the first steps:

DEMO

HTML:

<div id="galleryOverflow">  
  <div id="galleryCenter">    
    <div id="gallery">

      <span style="background-image:url(//placehold.it/960x540/ada);">1</span>
      <span style="background-image:url(//placehold.it/960x540/fbi);">2</span>
      <span style="background-image:url(//placehold.it/960x540/fof);">3</span>
      <span style="background-image:url(//placehold.it/960x540/ie5);">4</span>

    </div>    
  </div>

</div>

CSS:

#galleryOverflow{
  position:relative;
  width:100%;
  height:540px;
  overflow:hidden;
  background:#ddd;
}
#galleryCenter{
  position:relative;
  margin:0 auto;
  width:960px;
  background:#eee;
  height:540px;
}
#gallery{
  position:absolute;
  height:540px;
  width:100%;
  top:0;
  left:0;
  white-space:nowrap;
  font-size:0; /* remove right 4px margin */
}
#gallery span{
  font-size:18px; /* reset font */
  vertical-align:top;
  display:inline-block;
  height:540px;
  width:100%;
  background: transparent none no-repeat center center;
  background-size:cover;
}

The base is to have a 100% width element with overflow:hidden which will prevent the page to show horizontal scrollbars,
than inside that one you put a centered 960px element
and inside that centered element, you absolute position an element that will hold all your SPAN slides.
To position the SPANs horizontally you need to set to their parent the white-space:nowrap; and to remove 4px margin gap the font-size to 0
Than for your SPANs you need to reset the font size and to allow to have text inside them set the vertical-align property.
Now your SPAN slides extend faaar on the right side but the center one (currently the first one) will be always centered with the page even on page resize.
Now all you need to to with JS is to take the last image, place it in-front of the first one, and logically : move the .css() of the entire SPANs container (the #gallery) to -960px making the first image visible again.

DEMO WITH JS/jQuery

$(function(){ // DOM ready

    var $gallery = $('#gallery');
    var $slide   = $("span", $gallery);
    var W = $('#galleryCenter').width(); // 960
    var N = $slide.length; // number of slides     

    // Prepare gallery:
    // Take last slide and set in front of all
    $slide.last().prependTo($gallery); 
    // Now move gallery to show again the first slide
    $gallery.css({left:-W}); 


    $('#prev, #next').click(function(){

      $slide = $("span", $gallery); // recatch all elements

      if( !$gallery.is(':animated') ){ // Prevent clicks if gall is animated

        if(this.id == "next"){

          var $first = $slide.eq( 0 );
          $first.clone().appendTo( $gallery );
          $gallery.animate({ left: '-='+W },800, function(){
            $first.remove(); // we don't need it any more
            // but now we have a 960px gap so:
            $(this).css({left: -W }); // reset to -960
          });

        }else{ // == "prev"

          var $last = $slide.eq( N-1 ); // N-1 is the last one
          $last.clone().prependTo( $gallery );
          // now that we prepended the lasts element the gallery jumped 
          // to +960 cause of that insertion, let's reset it:
          $gallery.css({ left: -W*2 });
          // and let's animate
          $gallery.animate({left:'+='+W},800, function(){
            $last.remove(); // we don't need it any more
          });

        }
      }

    });

});

DEMO WITH AUTOSLIDE AND PAUSE ON HOVER

To make it autoslide you need an setInverval so for that we need a new var

var intv;

and below the "prev next clicks function" this code:

  // //////////////////////
  // LOOP AUTOMATICALLY
  function auto(){
    intv = setInterval(function(){
      $('#next').click(); // Do a "next" click
    }, 3200 );// every 3200ms
  }
  auto(); // start loop

To pause the loop on mouseenter add:

  $('#galleryOverflow').hover(function(e){
    return e.type=="mouseenter" ? clearinterval(intv) : auto();
  });

FINAL DEMO EXAMPLE

Question 3

If you talking about image, it swap B/W images and color images fading them out

example : http://www.wistar.org/sites/default/files/imagecache/desat/home/masthead_images/cell.jpg http://www.wistar.org/sites/default/files/home/masthead_images/cell.jpg

for the box that slide content: it slide between divs and images simultaneously.