How can I create a carousel/slider effect in JavaScript?

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  
});  

});

Answer 2

Look at this:

http://www.instantshift.com/2012/03/26/80-useful-jquery-plugins-to-enrich-your-sites-user-experience/

80 JQuery plugins to enhance your site. JCarousel can be used to create such a slider, but I prefer nr 3 on the list above: Flexslider. It can be used as a responsive slider to be able to adjust its size for multiple platforms (tablets/mobile phones/flexible HTML layouts).