javascript - carousel with 6 to 8 divs stacked vertically/ horizontally (room layout) controlling the slider -

i trying create slider controlled static boxes on left (vertically , horizontally) room layout,. clicking on each of box show image in carousel / slider . in short boxes controls images displayed. nothing fancy image have fade effect on main box. trying achieve using jquery. not sure start. illustration attaching visual. pointers / or guidance appreciated.

thanks

i created you, it's 3 infinite carousels, positioned , sized accordlingly create layout different functionalities working. it'll give start on wish achieve.

built on example provided: http://jsfiddle.net/bradleyiw/eg8f3a0b/

if wish user via click inside js add

object.onclick=function(){myscript}; 

where object element user required click, , script place javascript. wish control image movement change function call onclick method, change element name box , inside script dictate change image.

this should (right , left button control): http://web.enavu.com/tutorials/making-a-jquery-infinite-carousel-with-nice-features/

with code i've provided you, if wish carousel have change when user hovers.

create <div> element around each <ul>. give id , change div:hover {} attribute in css.

example 1 infinite fade carousel:

html:

<div id="slide_con">     <ul class="slider">       <li>         <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->       </li>       <li>         <img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->       </li>       <li>         <img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->       </li>       <li>         <img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->       </li>     </ul> </div> 

css:

slider {   margin: 10px 0;   width: 500px; /* update slider width */   height: 150px; /* update slider height */   position: relative;   overflow: hidden; }  .slider li {   display:block;   position: absolute;    top: 0;    left: 0;  } 

js:

// settings var $slider = $('.slider'); // class or id of carousel slider var $slide = 'li'; // use 'img' if you're not using ul var $transition_time = 1000; // 1 second var $time_between_slides = 4000; // 4 seconds  function slides(){   return $slider.find($slide); }  slides().fadeout();  // set active classes slides().first().addclass('active'); slides().first().fadein($transition_time);  // auto scroll  $interval = setinterval(     function(){       var $i = $slider.find($slide + '.active').index();        slides().eq($i).removeclass('active');       slides().eq($i).fadeout($transition_time);        if (slides().length == $i + 1) $i = -1; // loop start        slides().eq($i + 1).fadein($transition_time);       slides().eq($i + 1).addclass('active');     }     , $transition_time +  $time_between_slides  ); 

this code taken from: http://paulmason.name/item/simple-jquery-carousel-slider-tutorial

if want make responsive, change width of ul px %

i know doesn't show need, it's start.