如何更改jQuery循环插件的标签位置？

Question

我有jQuery cycle plugin的扩展版本，效果很好（JSFiddle）。

如何为其添加参数，以便左侧的标签可以显示在右侧？

var $output = $('#output');
var $pager = $('#tabs');
var settings = [];
var positionFromTop = [];
var pagerPaddingTop = parseInt($pager.css('padding-top'), 10);

//grab the data from the html, store it in settings, and remove
//we do this for full compatibility with cycle
$pager.children().each(function(i, value) {
  var $this = $(this);
  settings[i] = $this.clone();
  positionFromTop[i] = $this.position().top - pagerPaddingTop;
});
$pager.empty();

function onBefore(curr, next, opts) {
  $pager
    .stop()
    .animate({
      scrollTop: positionFromTop[$(next).index()]
    }, 1000);
}

(function($) {
  $output.cycle({
    pager: $pager,
    before: onBefore,
    pause: true,
    pauseOnPagerHover: true,
    pagerAnchorBuilder: function(i) {
      return settings[i];
    },
    prev: $('#pager_prev'),
    next: $('#pager_next')
  });
})(jQuery);

#pager_wrapper {
  width: 320px;
  height: 240px;
}

#pager_prev,
#pager_next {
  display: block;
  width: 286px;
  position: absolute;
  z-index: 15;
  height: 20px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  cursor: pointer;
}

#pager_prev {
  background: #f8f8f8 url('http://png-2.findicons.com/files/icons/977/rrze/16/sort_up.png') no-repeat bottom center;
}

#pager_next {
  bottom: 0;
  background: #f8f8f8 url('http://png-4.findicons.com/files/icons/977/rrze/16/sort_down.png') no-repeat top center;
}

body {
  background: #EEE;
  font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

#content {
  width: 750px;
  margin: 50px auto;
  padding: 20px;
  background: #FFF;
  border: 1px solid #CCC;
}

h1 {
  margin: 0;
}

hr {
  border: none;
  height: 1px;
  line-height: 1px;
  background: #CCC;
  margin-bottom: 20px;
  padding: 0;
}

p {
  margin: 0;
  padding: 7px 0;
}

.clear {
  clear: both;
  line-height: 1px;
  font-size: 1px;
}

a {
  outline-color: #888;
}

h3 {
  margin: 0;
  padding: 7px 0 0 0;
  font-size: 16px;
  text-transform: uppercase;
}

div#feature_list {
  width: 750px;
  height: 240px;
  overflow: hidden;
  position: relative;
}

div#feature_list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

div#feature_list ul#tabs {
  position: relative;
  padding-top: 22px;
  left: 0;
  z-index: 10;
  width: 320px;
  height: 196px;
  overflow: hidden;
  border-left: 1px solid #ccc;
}

ul#tabs li {
  font-size: 12px;
  font-family: Arial;
}

ul#tabs li img {
  padding: 5px;
  border: none;
  float: left;
  margin: 10px 10px 0 0;
}

ul#tabs li a {
  color: #222;
  text-decoration: none;
  display: block;
  padding: 10px;
  height: 60px;
  outline: none;
}

ul#tabs li a:hover {
  text-decoration: underline;
}

ul#tabs li.activeSlide a {
  background: url('http://jqueryglobe.com/labs/feature_list/feature-tab-current.png');
  color: #FFF;
}

ul#tabs li.activeSlide a:hover {
  text-decoration: none;
  cursor: default;
}

ul#output {
  right: 0;
  width: 463px;
  height: 240px;
  position: absolute;
  top: 0;
}

ul#output li {
  position: absolute;
  width: 463px;
  height: 240px;
}

ul#output li a {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 8px 12px;
  text-decoration: none;
  font-size: 11px;
  color: #FFF;
  background: #000;
  -moz-border-radius: 5px;
}

ul#output li a:hover {
  background: #D33431;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="//ajax.microsoft.com/ajax/jquery.cycle/2.99/jquery.cycle.min.js"></script>
<div id="content">
  <h1>Feature List</h1>

  <p>This is a demo page. Built using <a href='http://jquery.malsup.com/cycle/'>jquery cycle plug-in</a>.</p>

  <hr />

  <div id="feature_list">
    <div id="pager_wrapper">
      <span id="pager_prev">&nbsp;</span>
      <ul id="tabs">
        <li>
          <a href="javascript:;">
            <img src="http://jqueryglobe.com/labs/feature_list/services.png" />
            <h3>Services</h3>
            <span>Lorem ipsum dolor sit amet consect</span>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="http://jqueryglobe.com/labs/feature_list/programming.png" />
            <h3>Programming</h3>
            <span>Lorem ipsum dolor sit amet consect</span>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="http://jqueryglobe.com/labs/feature_list/applications.png" />
            <h3>Applications</h3>
            <span>Lorem ipsum dolor sit amet consect</span>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="http://jqueryglobe.com/labs/feature_list/applications.png" />
            <h3>My Tab</h3>
            <span>Lorem ipsum dolor sit amet consect</span>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="http://jqueryglobe.com/labs/feature_list/applications.png" />
            <h3>My Tab2</h3>
            <span>Lorem ipsum dolor sit amet consect</span>
          </a>
        </li>
      </ul>

      <span id="pager_next">&nbsp;</span>
    </div>
    <ul id="output">
      <li>
        <img src="http://jqueryglobe.com/labs/feature_list/sample1.jpg" width='463' height='240' />
        <a href="#">See project details</a>
      </li>
      <li>
        <img src="http://jqueryglobe.com/labs/feature_list/sample2.jpg" width='463' height='240' />
        <a href="#">See project details</a>
      </li>
      <li>
        <img src="http://jqueryglobe.com/labs/feature_list/sample3.jpg" width='463' height='240' />
        <a href="#">See project details</a>
      </li>
      <li>
        <img src="broken.jpg" width='463' height='240' />
        <a href="#">See project details</a>
      </li>
      <li>
        <img src="http://jqueryglobe.com/labs/feature_list/sample3.jpg" width='463' height='240' />
        <a href="#">See project details</a>
      </li>
    </ul>
  </div>
</div>