<div id="wrapper">
  <div id="carousel">
  <img src="img/large/carnaval1.jpg" alt="c1" width="600" height="400" />
  <img src="img/large/carnaval2.jpg" alt="c2" width="600" height="400" />
  <img src="img/large/carnaval3.jpg" alt="c3" width="600" height="400" />
  <img src="img/large/carnaval4.jpg" alt="c4" width="600" height="400" />
  <img src="img/large/carnaval5.jpg" alt="c5" width="600" height="400" />
  <img src="img/large/carnaval6.jpg" alt="c6" width="600" height="400" />
  <img src="img/large/carnaval7.jpg" alt="c7" width="600" height="400" />
  <img src="img/large/carnaval8.jpg" alt="c8" width="600" height="400" />
  <img src="img/large/carnaval9.jpg" alt="c9" width="600" height="400" />
  <img src="img/large/carnaval10.jpg" alt="c10" width="600" height="400" />
  </div>
  <div id="thumbnails">
  <img src="img/small/carnaval1.jpg" alt="c1" width="100" height="100" />
  <img src="img/small/carnaval2.jpg" alt="c2" width="100" height="100" />
  <img src="img/small/carnaval3.jpg" alt="c3" width="100" height="100" />
  <img src="img/small/carnaval4.jpg" alt="c4" width="100" height="100" />
  <img src="img/small/carnaval5.jpg" alt="c5" width="100" height="100" />
  <img src="img/small/carnaval6.jpg" alt="c6" width="100" height="100" />
  <img src="img/small/carnaval7.jpg" alt="c7" width="100" height="100" />
  <img src="img/small/carnaval8.jpg" alt="c8" width="100" height="100" />
  <img src="img/small/carnaval9.jpg" alt="c9" width="100" height="100" />
  <img src="img/small/carnaval10.jpg" alt="c10" width="100" height="100" />
  </div>
  </div>

  #wrapper {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 50px #333;
  }
  #carousel {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  }
  #carousel img {
  display: block;
  float: left;
  }
  #thumbnails {
  width: 600px;
  height: 120px;
  overflow: hidden;
  position: absolute;
  top: 375px;
  left: 0;
  z-index: 2;
  }
  #thumbnails img {
  display: block;
  float: left;
  margin: 10px;
  width: 100px;
  height: 100px;
   
  box-shadow: 0 0 10px #000;
  }
  #thumbnails img:hover {
  width: 110px;
  height: 110px;
  margin: 5px;
  }
   
  #donate-spacer {
  height: 100%;
  }
  #donate {
  border-top: 1px solid #999;
  width: 750px;
  padding: 50px 75px;
  margin: 0 auto;
  overflow: hidden;
  }
  #donate p, #donate form {
  margin: 0;
  float: left;
  }
  #donate p {
  width: 650px;
  }
  #donate form {
  width: 100px;
  }

<script src="/js/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(function() {
  $('#wrapper').hover(
  function() {
  $('#carousel').trigger( 'pause' );
  $('#thumbnails').parent().animate({
  top: 280
  });
  }, function() {
   
  $('#carousel').trigger( 'play' );
  $('#thumbnails').parent().animate({
  top: 375
  });
  }
  );

  $('#carousel').carouFredSel({
  scroll: {
  fx: 'crossfade',
  onBefore: function( data ) {
  $('#thumbnails').trigger( 'slideTo', [ $('#thumbnails img[alt='+ data.items.visible.attr( 'alt' ) +']'), -2 ] );
  }
  }
  });

  $('#thumbnails').carouFredSel({
  auto: false,
  items: {
  start: -2
  }
  });

  $('#thumbnails img').click(function() {
  $('#carousel').trigger( 'slideTo', [ $('#carousel img[alt='+ $(this).attr( 'alt' ) +']') ] );

  }).css( 'cursor', 'pointer' );
  });
  </script>