title: Jquery code - almost figured it out
body: <p>I have been trying all day to get this to work and have been very unsuccessful. I am new to jquery and could use some help combining jquery functions. </p>
  
  <p>I am using the following code for a slideshow:</p>
  
  <pre><code>$(function() {
      $("#foo3").carouFredSel({
          items: 1,
          prev: {
              button: "#foo3_prev",
              key: "left"
          },
          next: {
              button: "#foo3_next",
              key: "right"
          },
          auto: {
              duration: 1000
          },
          scroll: {
              items: 1,
              duration: 1000,
              mousewheel: true,
              wipe: true,
              pauseOnHover: true,
              onAfter: function() {
                if ( $(this).triggerHandler( "currentPosition" ) == 0 ) {
                $(this).trigger( "pause" );
              }
          }
      },
    })
    .parent()
    .css("margin", "auto");       
  });
  </code></pre>
  
  <p>and have been unsuccessful in trying to merge the following function into it:</p>
  
  <pre><code> $("#foo3").carouFredSel({
  auto    : false,
  scroll  : {
      duration : 0.5
  }
  }).find("li").click(function() {
  var deviation = parseInt( $("#foo3_deviation").val() );
  $("#foo3").trigger("slideTo", [$(this), deviation]);
  }).css("cursor", "pointer");
  </code></pre>
  
  <p>I need to maintain the settings in the first set of code, but add the functionality of clicking on the slideshow (li) to advance to the next image.</p>
  
  <p>I don't know if you need more information to help, but if so please let me know.</p>
  
  <p>Your assistance is greatly appreciated.</p>
  
  <p><strong>FOR CLARIFICATION:</strong></p>
  
  <p>I need to add the last bit of code starting with .find(li).click(function() </p>
  
  <p>into the first section of code to make my existing slideshow <a href="http://2938.sandbox.i3dthemes.net/index.html" rel="nofollow">http://2938.sandbox.i3dthemes.net/index.html</a> function with clicking on the image as well as the auto scroll.</p>
  
  <p><strong>REVISION:</strong></p>
  
  <p>I MANAGED TO GET THIS FAR...</p>
  
  <pre><code>$(function() {
  
          $("#foo3").carouFredSel({
              auto    : true,
              scroll  : {
              items: 1,
                  duration: 1000,
                  mousewheel: true,
                  wipe: true,
                  pauseOnHover: true,
                 onAfter: function() {
              if ( $(this).triggerHandler( "currentPosition" ) == 0 ) {
                $(this).trigger( "pause" );
               }
            }},
              }).find("li").click(function() {
              var deviation = parseInt( $("#foo3_deviation").val() );
              $("#foo3").trigger("slideTo", [$(this), deviation]);
              }).css("cursor", "pointer");
            });
  </code></pre>
  
  <p>AND NOW NEED TO FIGURE OUT HOW TO GET THIS SNIPPET FROM THE FIRST PIECE OF CODE BACK IN...</p>
  
  <pre><code>    }).parent()
      .css("margin", "auto");
  </code></pre>
  
  <p>Can anyone help...?</p>