<div class="slider-wrapper theme-default">
  <div id="slider" class="nivoSlider">
    <?php foreach ($products as $product) { ?>
    <?php if ($product['thumb']) { ?>
    <a class="nivo-imageLink" href="<?php echo $product['href']; ?>"><img src="catalog/view/javascript/timthumb/timthumb.php?src=<?php echo $product['thumb']; ?>&h=278&w=474&zc=1" alt="<?php echo $product['name']; ?>" title="#<?php echo $product['product_id']; ?>" /></a>
    <?php } ?>
    <?php } ?>
  </div>
  <?php foreach ($products as $product) { ?>
  <div id="<?php echo $product['product_id']; ?>" class="nivo-html-caption">
    <div class="slider_ptitle"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
    <div class="slider_ptext"><?php echo $product['description']; ?></div>
    <div class="slider_pprice">
      <?php if (!$product['special']) { ?>
      <?php echo $product['price']; ?>
      <?php } ?>
      <?php if ($product['special']) { ?>
      <?php echo $product['special']; ?>
      <?php } ?>
    </div>
    <a class="button" href="<?php echo $product['href']; ?>"><?php echo $text_buy_now; ?></a>
  </div>
  <?php } ?>
  <div class="clear"></div>
</div>
<script type="text/javascript">
    $(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
        slices: 15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 500, // Slide transition speed
        pauseTime: 4000, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: true, // Next & Prev navigation
        directionNavHide: false, // Only show on hover
        keyboardNav: true, // Use left & right arrowss
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        captionOpacity: 0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });	
});
    </script>