Прокрутка изображений в карточке товара - Дизайн и оформление

<script type="text/javascript">
$("#foo2").carouFredSel({
 circular: false,
 infinite: false,
 auto    : false,
 prev    : {
 button  : "#foo2_prev",
 key     : "left"
           },
 next    : {
 button  : "#foo2_next",
 key     : "right"
           },
 pagination  : "#foo2_pag"
});
</script>

<div id='list_product_image_thumb'>
		  
		  <div class="image_carousel">
              <div id="foo2">

     <?php if ( (count($this->images)>1) || (count($this->videos) && count($this->images)) ) {?>
          <?php foreach($this->images as $k=>$image){?>
               <a class="lightbox" href="<?php print $this->image_product_path?>/<?php print $image->image_full;?>">
                    <img class="jshop_img_thumb" src="<?php print $this->image_product_path?>/<?php print $image->image_thumb?>" alt="<?php print htmlspecialchars($image->_title)?>" title="<?php print htmlspecialchars($image->_title)?>" />
               </a>
          <?php }?>
     <?php }?>
	           </div>
               <div class="clearfix"></div>
               <a class="prev" id="foo2_prev" href="#"><span>prev</span></a>
               <a class="next" id="foo2_next" href="#"><span>next</span></a>
               <div class="pagination" id="foo2_pag"></div>
           </div>

           </div>

<script type="text/javascript" src="<?php print JURI::base();?>/components/com_jshopping/js/jquery.carouFredSel-6.2.1-packed.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function() {		
		// Using custom configuration
		jQuery('#foo2').carouFredSel({
			auto: false,
			prev: '#prev2',
			next: '#next2',
			pagination: "#pager2",
			mousewheel: true,
			swipe: {
				onMouse: true,
				onTouch: true
			}
		});	
	});		
</script>

<span id='list_product_image_thumb'>
	<?php if ( (count($this->images)>1) || (count($this->videos) && count($this->images)) ) {?>
        <?php foreach($this->images as $k=>$image){?>
            <img class="jshop_img_thumb" src="<?php print $this->image_product_path?>/<?php print $image->image_thumb?>" alt="<?php print htmlspecialchars($image->_title)?>" title="<?php print htmlspecialchars($image->_title)?>" onclick="showImage(<?php print $image->image_id?>)" />
        <?php }?>
    <?php }?>
</span>

<div id='list_product_image_thumb' class="list_carousel">
	<?php if ( (count($this->images)>1) || (count($this->videos) && count($this->images)) ) {?>
        <ul id="foo2">
        <?php foreach($this->images as $k=>$image){?>
            <li><img class="jshop_img_thumb" src="<?php print $this->image_product_path?>/<?php print $image->image_thumb?>" alt="<?php print htmlspecialchars($image->_title)?>" title="<?php print htmlspecialchars($image->_title)?>" style="max-width:50px;max-height:50px;" onclick="showImage(<?php print $image->image_id?>)" /></li>
        <?php }?>
        </ul>
    <?php }?>            
    <div class="clearfix"></div>
    <a id="prev2" class="prev" href="#">&lt;</a>
    <a id="next2" class="next" href="#">&gt;</a>
    <div id="pager2" class="pager"></div>
</div>