
<script type="text/javascript" src="catalog/view/javascript/simple.carousel.js"></script>

<script type="text/javascript">
        jQuery(document).ready(function() {
            // example 1
            $("ul.example1").simplecarousel({
                width:175,
                height:255,
                visible: 2,
                auto: 3000,
                next: $('.next'),
                prev: $('.prev')
            });
           
        });
        
    </script>
	
	   <style>
        .example1 {
            margin:0;
            padding:0;
			width: 785px;
            height:200px;
            list-style:none;
        }
        
        li {
            
        }
        
        li span {
            display:block;
            margin:5px;
            
        }
        
        .next,
        .prev {
            cursor:pointer;
        }
        
        .example2 {
            margin:0;
            padding:0;
            list-style:none;
            width:697px;
            height:400px;
            overflow:hidden;
        }
        
        .example2 li {
            text-align:left;
            display:block;
            width:697px;
            height:400px;
        }
        
        .carousel-pagination li {
            display:block;
            width:10px;
            height:10px;
            margin-right:5px;
            cursor:pointer;
            float:left;
            background:#333;
        }
        
        .carousel-pagination .carousel-pagination-active {
            background:#ff0000;
        }
    </style>
	<div style="margin-left: -857px;margin-bottom: -31px;font-size: 17px;font-weight: bold;color: #8D5276;">GET INSPIRED</div>
	<div style="margin-left:900px">
	<span class="prev"><img src="catalog/view/theme/default/image/pre.png"/></span>
    <span class="next"><img src="catalog/view/theme/default/image/next.png"/></span>
	</div>
<div class="carousel-frame" style="overflow: hidden;border-style: solid;border-color: silver;border-radius: 15px;border-width: 1px;">
    <ul class="example1">
      <?php foreach ($products as $product) { ?>
      <li style="margin-left:20px">
        <?php if ($product['thumb']) { ?>
        <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
        <?php } ?>
        <div style="text-decoration: none;"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
        <div class="cart"><a href="<?php echo $product['href']; ?>"><img src="catalog/view/theme/default/image/customize.png"/></a></div>
      </li>
      <?php } ?>
  </ul>
 
</div>