How to add slider for new products, best sellers, and most viewed product blocks on my website?

Question

I tried adding slider to my new products without using any extensions, by simply calling slideshow-container class and slideshow class in

new_grid.phtml

which is located in

/app/design/frontend/mywebsite/default/template/catalog/product/widget/new/content/

as highlighted in the below code. The products are sliding with one image at a time in my New products block as shown in the image attached to this. I want to add four images per slide to my slider. Please suggest me the appropriate solution.

<?php if (($_products = $this->getProductCollection()) && $_products-   >getSize()): ?>
<div class="widget widget-new-products">
<div class="widget-title">
    <h2><?php echo $this->__('New Products') ?></h2>
</div>
<div class="widget-products **slideshow-container**">

    <?php echo $this->getPagerHtml() ?>
    <?php $_columnCount = $this->getColumnCount(); ?>
    <?php $i=0; ?>
    <ul class="products-grid products-grid--max-<?php echo  $_columnCount; ?>-col-widget **slideshow**">
        <?php foreach ($_products->getItems() as $_product): ?>
            <li class="item<?php if(($i-1)%$_columnCount==0): ?>  first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
                <?php $_imgSize = 210; ?>
                <?php // The image size is locked at 210 for this for   display purposes. CSS has it at 75% which should equate to 278px?>
                <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>" class="product-image">
                    <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(210) ?>"  alt="<?php echo $this->stripTags($_product->getName(), null, true) ?>" />
                </a>
                <div class="product-info">
                    <h3 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $this- >helper('catalog/output')->productAttribute($_product, $_product- >getName() , 'name') ?></a></h3>
                    <?php echo $this->getPriceHtml($_product, true, '-widget-new-grid') ?>
                    <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                    <div class="actions">
                        <?php if ($_product->isSaleable()): ?>
                            <button type="button" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Add to Cart')) ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                        <?php else: ?>
                            <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                        <?php endif; ?>
                        <ul class="add-to-links">
                            <?php if ($this->helper('wishlist')->isAllow()) : ?>
                                <li><a href="<?php echo $this->getAddToWishlistUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
                            <?php endif; ?>
                            <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                                <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
                            <?php endif; ?>
                        </ul>
                    </div>
                </div>
            </li>
        <?php endforeach; ?>

    </ul>
</div>

Answer 1

I don't think why it's not working. You try for Owl Carousel

Before that you dowmload js and css file in this link :http://owlgraphic.com/owlcarousel/#demo

<?php if (($_products = $this->getProductCollection()) && $_products-   >getSize()): ?>
<div class="widget widget-new-products">
<div class="widget-title">
    <h2><?php echo $this->__('New Products') ?></h2>
</div>
<div id="owl-example" class="owl-carousel">

    <?php echo $this->getPagerHtml() ?>
    <?php $_columnCount = $this->getColumnCount(); ?>
    <?php $i=0; ?>
    <ul class="products-grid products-grid--max-<?php echo  $_columnCount; ?>-col-widget **slideshow**">
        <?php foreach ($_products->getItems() as $_product): ?>
            <li class="item<?php if(($i-1)%$_columnCount==0): ?>  first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
                <?php $_imgSize = 210; ?>
                <?php // The image size is locked at 210 for this for   display purposes. CSS has it at 75% which should equate to 278px?>
                <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>" class="product-image">
                    <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(210) ?>"  alt="<?php echo $this->stripTags($_product->getName(), null, true) ?>" />
                </a>
                <div class="product-info">
                    <h3 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $this- >helper('catalog/output')->productAttribute($_product, $_product- >getName() , 'name') ?></a></h3>
                    <?php echo $this->getPriceHtml($_product, true, '-widget-new-grid') ?>
                    <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                    <div class="actions">
                        <?php if ($_product->isSaleable()): ?>
                            <button type="button" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Add to Cart')) ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                        <?php else: ?>
                            <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                        <?php endif; ?>
                        <ul class="add-to-links">
                            <?php if ($this->helper('wishlist')->isAllow()) : ?>
                                <li><a href="<?php echo $this->getAddToWishlistUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
                            <?php endif; ?>
                            <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                                <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
                            <?php endif; ?>
                        </ul>
                    </div>

Script

$(document).ready(function() {

$("#owl-example").owlCarousel({

navigation : false, // Show next and prev buttons
slideSpeed : false,
paginationSpeed : false,
singleItem:true,
lazyEffect: "fade",
autoPlay:4000
});
});

Here you need to set all view size and how many item you want to display

Follow this http://owlgraphic.com/owlcarousel/#demo