Question

I want to do something like this:

I tried to implement it by myself but the result was just ugly. I took a look at jCarousel, but I didn’t like it. Are there other techniques or libraries that would let me produce this effect, ideally in Javascript and/or jQuery?

Answer 1

Use the JQuery flow plugin and follow this tutorial:

http://net.tutsplus.com/articles/news/using-the-wonderful-jflow-plugin-screencast/

<script type="javascript" src="js/jFlow.js"></script>

<div id="wrap">  
<div id="controller">  
   <span class="jFlowControl">No 1 </span>  
   <span class="jFlowControl">No 2 </span>  
   <span class="jFlowControl">No 3 </span>  
</div>  

<div id="prevNext">  
    <img src="images/prev.png" alt="Previous" class="jFlowPrev">  
    <img src="images/next.png" alt="Next" class="jFlowNext">  
</div>  

<div id="slides">  
<div><img src="images/1.jpg">  
     Here is a featured image. Nice!  
 </div>  
 <div><img src="images/2.jpg">  

 Here is another neat featured image. Nice!  
 </div>  
 <div><img src="images/3.jpg">  

 Here is one last very cool featured image. Nice!  
 </div></div>  
</div>  

$(function() {  
  $("#controller").jFlow({  
    slides: "#slides",  
    width: "980px",  
    height: "313px",  
    duration: 600  
});  

});