motools + jquery (jcarousel)

  <script src="manager/media/script/mootools/mootools.js"  type="text/javascript"></script>
  <script src="assets/templates/modxhost/drop_down_menu.js"  type="text/javascript"></script>

{{carousel}}
</head>

<!--
  jCarousel core stylesheet
-->
<link rel="stylesheet" type="text/css" href="lib/jquery.jcarousel.css" />

<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="skins/bio/skin.css" />

<!--
  jQuery library
-->
<script type="text/javascript" src="lib/jquery-1.2.3.pack.js"></script>

<!--
  jCarousel library
-->
<script type="text/javascript" src="lib/jquery.jcarousel.pack.js"></script>


<script type="text/javascript">

var mycarousel_itemList = [
 {url: 'team/1.jpg', title: '1', page:'[~75~]'},
{url: 'team/2.jpg', title: '2', page:'[~60~]'},
{url: 'team/3.jpg', title: '3', page:'[~61~]'},
{url: 'team/4.jpg', title: '4', page:'[~74~]'},
{url: 'team/5.jpg', title: '5', page:'[~73~]'},
{url: 'team/6.jpg', title: '6', page:'[~86~]'},
{url: 'team/7.jpg', title: '7', page:'[~62~]'},
];

function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
{
    // The index() method calculates the index from a
    // given index who is out of the actual item range.
    var idx = carousel.index(i, mycarousel_itemList.length);
    carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[idx - 1]));
};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
{
    carousel.remove(i);
};

function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
     // carousel.buttonNext.bind('click', function() {
      //    carousel.startAuto(0);
     // });

    //carousel.buttonPrev.bind('click', function() {
    //    carousel.startAuto(0);
    //});

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};

// Credits: Robert Penners easing equations (http://www.robertpenner.com/easing/).
jQuery.easing['BounceEaseOut'] = function(p, t, b, c, d) {
	if ((t/=d) < (1/2.75)) {
		return c*(7.5625*t*t) + b;
	} else if (t < (2/2.75)) {
		return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
	} else if (t < (2.5/2.75)) {
		return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
	} else {
		return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
	}
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item)
{
    return '<a href="'+ item.page + '"><img src="' + item.url + '" width="190" height="148" border="0" class="mem" alt="' + item.title + '" /></a>';
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
		auto: 10,
		scroll: 5,
        wrap: 'circular',
        itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
        itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback},
		easing: 'BounceEaseOut',
        animation: 1000,
		initCallback: mycarousel_initCallback
    });
});
</script>