Looking for a method to make this HTML/CSS image gallery transition with javascript

Description: My graphic designer drew up a very elegant style for my site, but it was a tricky design to replicate. So, I did replicate it flawlessly, but I'm left with a structure that I'm having trouble figuring out how I will go about transitioning it with javascript. I'm not even asking for scripts, simply the method.

Question: How can I make this html/css structure transition smoothly with javascript? If you believe that the structure will simply not transition, please provide an answer that helps me to clean the back end.

Image of what this looks like:

JFiddle for this: http://jsfiddle.net/YEeec/2/

If you widen the viewer there out, the gallery will show properly. It's designed to smoothly support 950px wide and above.

Tested In: Chrome

Exactly the transition I'm attempting: I'd like to transition the elements to slide from one position to the next in a loop. That was my original idea. However, simply changing the images from one spot to the next would work as well

HTML for this element:

<div class="body-3"><!-- begin body 3 :: This area will hold the scroll gallery -->
    <div class="body-3-upper-text center">
        <p>A&G - Making Technology Easy</p>
        Technology is meant to make your life easier, not harder. That's why at A&G, we work to ensure that your devices and systems work for you exactly as they should. Ask us about a budget-friendly solution for your technology needs. 
    </div>
    <div class="body-3-slider-box">
        <ul>
            <!-- the idea behind this slider setup is for image1 - image7 (or unlimited image count) will be able to be rotated through the selection seamlessly.  -->
            <!-- when image3 is moved to the position of image4 (when the slider-selected class is moved to image3 and image4 recieves the slider-right-1 class), image2 moves to the position of image3 (image2 recieves the slider-left-1 class), and the same happens with image1, and then image7 rotates into the position of image1 by recieving the slider-left-3 class -->

        <div class="slider-left-set">
        <div id="slider-set-width-ext">
            <!-- notice that technically, the slider-left set is listed backwards. This is because these elements need to float right, causing the first Item to be listed from the right side instead of listing left to right -->
            <li class="slider-left-1" id="left-1"><img src="images/slider_3.png"><p class="front">Product 3 Title</p><span class="front">Product 3 Description</span><img id="reflection" src="images/slider_3.png"><div id="fade"></div></li>
            <li class="slider-left-2" id="left-2"><img src="images/slider_2.png"><p class="front">Product 2 Title</p><span class="front">Product 2 Description</span><img id="reflection" src="images/slider_2.png"><div id="fade"></div></li>
            <li class="slider-left-3" id="left-3"><img src="images/slider_1.png"><p class="front">Product 1 Title</p><span class="front">Product 1 Description</span><img id="reflection" src="images/slider_1.png"><div id="fade"></div></li>
        </div>
        </div>

        <div class="slider-center-set">
            <li class="slider-selected" id="slider-selected"><img src="images/slider_4.png"><p class="front">Managed Services</p><span class="front">Get protected by A&G today</span><img id="reflection" src="images/slider_4.png"><div id="fade"></div></li>
        </div>

        <div class="slider-right-set">
        <div id="slider-set-width-ext">
            <li class="slider-right-1" id="right-1"><img src="images/slider_5.png"><p class="front">Product 4 Title</p><span class="front">Product 5 Description</span><img id="reflection" src="images/slider_5.png"><div id="fade"></div></li>
            <li class="slider-right-2" id="right-2"><img src="images/slider_6.png"><p class="front">Product 5 Title</p><span class="front">Product 6 Description</span><img id="reflection" src="images/slider_6.png"><div id="fade"></div></li>
            <li class="slider-right-3" id="right-3"><img src="images/slider_7.png"><p class="front">Product 6 Title</p><span class="front">Product 7 Description</span><img id="reflection" src="images/slider_7.png"><div id="fade"></div></li>
        </div>
        </div>

        </ul>
        <div class="body-3-control-bar">
            <img class="center-link" src="images/link.png">
            <div id="transition-left"></div>
            <div id="transition-right"></div>

        </div>
    </div>
</div><!-- end body 3 -->

CSS for this particular element:

/*slider-selected class should set the centered list item to show the title and description. Otherwise, the default classes will not render.*/

.body-3-slider-box .slider-selected
{
pointer-events:auto;
}

/*this is to control the span section*/



.body-3-slider-box .slider-selected img
{
background-color:#252525;
}

.body-3-slider-box .slider-selected span
{
opacity:1;
}

/*this is to control the paragraph*/

.body-3-slider-box .slider-selected p
{
opacity:1;
}

/*this defines the text area above the sliders*/

.body-3-upper-text
{
width:80%;
font-size:16px;
color:#7f7f7f;
text-align:center;
}

/*this controls the style of the header of the upper text section above the sliders*/

.body-3-upper-text p
{
text-align:center;
font-size:20px;
margin-bottom:10px;
color:black;
}


.body-3-slider-box
{
margin-top:0px;
padding-top:50px;
width:100%;
height:430px;
overflow:hidden;

}

.body-3-slider-box ul
{
width:100%;
height:230px;
list-style:none;

}

.body-3-slider-box li
{
margin:0px 0px 0px 0px;
width:310px;
text-align:center;
opacity:0.7;
transition:opacity 0.2s;
}

.body-3-slider-box li p
{
margin-top:15px;
pointer-events:none;
font-size:18px;
font-weight:bold;
 opacity:0; 
}

.body-3-slider-box li img
{
width:300px;
height:170px;
background-color:#adadad;
margin-left:auto;
margin-right:auto;

}

.body-3-slider-box li:hover
{
opacity:1;
}

.body-3-slider-box li span
{
pointer-events:none;
opacity:0;
color:#7f7f7f;

}

.body-3-control-bar
{
margin-top:0px;
width:100%;
height:50px;
background-color:none;
z-index:2;
position:absolute;
}

.body-3-control-bar #transition-left
{
float:left;
margin-left:30%;
margin-top:-65px;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
border-style:solid;
border-color:#7f7f7f;
border-width:0px 0px 1px 1px;
width:35px;
height:35px;
}

.body-3-control-bar #transition-right
{
float:right;
margin-right:30%;
margin-top:-65px;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
border-style:solid;
border-color:#7f7f7f;
border-width:1px 1px 0px 0px;
width:35px;
height:35px;
}

.body-3-control-bar #transition-left:hover
{
border-width:0px 0px 2px 2px;
}


.body-3-control-bar #transition-right:hover
{
border-width:2px 2px 0px 0px;
}


.center-link
{
margin-left:49%;
margin-top:20px;
}

.slider-left-3
{
float:right;
}

.slider-left-2
{
float:right;
}

.slider-left-1
{
float:right;
}

.body-3-slider-box .slider-selected
{
opacity:1;
/* margin-left:auto;
margin-right:auto; */
}

.slider-right-1
{
float:left;
}
.slider-right-2
{
float:left;
}
.slider-right-3
{
float:left;
}

.slider-left-set
{
float:left;
height:170px;
width:33.33%;
}

.slider-center-set
{
float:left;
width:33.33%;
height:170px;
}

.slider-center-set li
{
margin-left:auto;
margin-right:auto;
}

.slider-center-set li img
{
transition:margin-top 0.5s ease-out, margin-bottom 0.5s ease-out;
}

.slider-center-set li img:hover
{
margin-top:-10px;
margin-bottom:20px;
}

.slider-center-set li:hover #reflection
{
opacity:0.3;
-webkit-transform:rotateX(70deg) rotateZ(180deg) rotateY(180deg);
}

.slider-right-set
{
float:left;
width:33.33%;
height:170px;
}

.slider-left-set #slider-set-width-ext 
{
width:350%;
margin-left:-250%;
}

.slider-right-set #slider-set-width-ext 
{
width:350%;
margin-right:-250%;
}

#reflection
{
position:relative;
z-index:1;
margin-top:-119px;
-webkit-transform:rotateX(70deg) rotateZ(180deg) rotateY(180deg);
opacity:0.9;
box-shadow:  0px 0px 900px 30px white;
transition:opacity 0.5s ease-out, -webkit-transform 0.5s ease-out;
}

#fade
{
position:relative;
z-index:2;
margin-top:-175px;
width:302px;
height:175px;
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 55%, rgba(255,255,255,0.3) 89%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-    stop(0%,rgba(255,255,255,1)), color-stop(55%,rgba(255,255,255,0.7)), color-stop(89%,rgba(255,255,255,0.3)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 55%,rgba(255,255,255,0.3) 89%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 55%,rgba(255,255,255,0.3) 89%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 55%,rgba(255,255,255,0.3) 89%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 55%,rgba(255,255,255,0.3) 89%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',     endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
margin-left:auto;
margin-right:auto;
-webkit-transform:rotateX(70deg) rotateZ(180deg) rotateY(180deg);
}

.front
{
position:relative;
z-index:3;

}