title: How to change tab position of jQuery cycle plugin?
body: <p>I have an extended version of the <a href="http://jquery.malsup.com/cycle/" rel="nofollow noreferrer">jQuery cycle plugin</a> and works great (<a href="http://jsfiddle.net/urnPT/17/]" rel="nofollow noreferrer">JSFiddle</a>).</p>
  
  <p>How do I add a parameter to it so the tabs on the left can be displayed on the right instead?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.microsoft.com/ajax/jquery.cycle/2.99/jquery.cycle.min.js"&gt;&lt;/script&gt;
  &lt;div id="content"&gt;
    &lt;h1&gt;Feature List&lt;/h1&gt;
  
    &lt;p&gt;This is a demo page. Built using &lt;a href='http://jquery.malsup.com/cycle/'&gt;jquery cycle plug-in&lt;/a&gt;.&lt;/p&gt;
  
    &lt;hr /&gt;
  
    &lt;div id="feature_list"&gt;
      &lt;div id="pager_wrapper"&gt;
        &lt;span id="pager_prev"&gt;&amp;nbsp;&lt;/span&gt;
        &lt;ul id="tabs"&gt;
          &lt;li&gt;
            &lt;a href="javascript:;"&gt;
              &lt;img src="http://jqueryglobe.com/labs/feature_list/services.png" /&gt;
              &lt;h3&gt;Services&lt;/h3&gt;
              &lt;span&gt;Lorem ipsum dolor sit amet consect&lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="javascript:;"&gt;
              &lt;img src="http://jqueryglobe.com/labs/feature_list/programming.png" /&gt;
              &lt;h3&gt;Programming&lt;/h3&gt;
              &lt;span&gt;Lorem ipsum dolor sit amet consect&lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="javascript:;"&gt;
              &lt;img src="http://jqueryglobe.com/labs/feature_list/applications.png" /&gt;
              &lt;h3&gt;Applications&lt;/h3&gt;
              &lt;span&gt;Lorem ipsum dolor sit amet consect&lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="javascript:;"&gt;
              &lt;img src="http://jqueryglobe.com/labs/feature_list/applications.png" /&gt;
              &lt;h3&gt;My Tab&lt;/h3&gt;
              &lt;span&gt;Lorem ipsum dolor sit amet consect&lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="javascript:;"&gt;
              &lt;img src="http://jqueryglobe.com/labs/feature_list/applications.png" /&gt;
              &lt;h3&gt;My Tab2&lt;/h3&gt;
              &lt;span&gt;Lorem ipsum dolor sit amet consect&lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
  
        &lt;span id="pager_next"&gt;&amp;nbsp;&lt;/span&gt;
      &lt;/div&gt;
      &lt;ul id="output"&gt;
        &lt;li&gt;
          &lt;img src="http://jqueryglobe.com/labs/feature_list/sample1.jpg" width='463' height='240' /&gt;
          &lt;a href="#"&gt;See project details&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;img src="http://jqueryglobe.com/labs/feature_list/sample2.jpg" width='463' height='240' /&gt;
          &lt;a href="#"&gt;See project details&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;img src="http://jqueryglobe.com/labs/feature_list/sample3.jpg" width='463' height='240' /&gt;
          &lt;a href="#"&gt;See project details&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;img src="broken.jpg" width='463' height='240' /&gt;
          &lt;a href="#"&gt;See project details&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;img src="http://jqueryglobe.com/labs/feature_list/sample3.jpg" width='463' height='240' /&gt;
          &lt;a href="#"&gt;See project details&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>