How to put different brands in slider on homepage

Question

I have displayed different brands on my home page, but i want them to be displayed in slider to view in customized form. By the below code it takes images of manufacture and display on homepage, so what changes i need to do in this code so that they display in slide-bar. I have used perficient extension to display brands on homepage

and code which i have added in home.phtml, app/design/frontend/base/default/template/perficient/manufacturer

<?php $_manufacturersCollection = $this->getManufacturersCollection(); ?>

<div class="block">
    <div class="block-title1">
        <strong><span><?php echo $this->__('Shop By Manufacturer') ?></span></strong>
    </div>
    <div class="block-content">
        <form id="pollForm" action="<?php echo $this->getUrl('manufacturers') ?>" method="post" >
            <?php $_iterator = 0; ?>
            <ul class="products-grid first">
                <?php foreach ($_manufacturersCollection as $_manufacturer): ?>
                    <li class="item<?php if (++$_iterator == sizeof($_manufacturersCollection)): ?> last<?php endif; ?>">
                        <a class="product-images" href="<?php echo $this->getUrl('manufacturers' . '/' . $_manufacturer->getIdentifier()) ?>" title="<?php echo $_manufacturer->getManufacturer() ?>"><img alt="<?php echo $_manufacturer->getManufacturerLogo() ?>" src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA) . 'manufacturer' . '/' . $_manufacturer->getManufacturerLogo() ?>" width="80" height="80"></a>

                       <!-- <h2><?php echo Mage::getModel('perficient_manufacturer/manufacturer')->getManufacturerName($_manufacturer->getManufacturer(), Mage::app()->getStore()->getId())  ?></h2> -->
                    </li>
                <?php endforeach; ?>
            </ul>
            <div class="actions" style="clear:left;">
                <button type="submit" title="<?php echo $this->__('View All123') ?>" class="button"><span><span><?php echo $this->__('View All') ?></span></span></button>
            </div> 
        </form>
    </div>
</div>

Answer 1

You have all you need of manufacture to do a slider, but now you need to create the slider itself. If you are using jQuery in your theme, there are several slider libraries for jQuery, I recommend the slick slider.

Your code using slick slider should look something like this:

<?php $_manufacturersCollection = $this->getManufacturersCollection(); ?>

<div class="block">
    <div class="block-title1">
        <strong><span><?php echo $this->__('Shop By Manufacturer') ?></span></strong>
    </div>
    <div class="block-content">
        <form id="pollForm" action="<?php echo $this->getUrl('manufacturers') ?>" method="post" >
            <?php $_iterator = 0; ?>
            <ul class="products-grid first brand-slider">
                <?php foreach ($_manufacturersCollection as $_manufacturer): ?>
                    <li class="item<?php if (++$_iterator == sizeof($_manufacturersCollection)): ?> last<?php endif; ?>">
                        <a class="product-images" href="<?php echo $this->getUrl('manufacturers' . '/' . $_manufacturer->getIdentifier()) ?>" title="<?php echo $_manufacturer->getManufacturer() ?>"><img alt="<?php echo $_manufacturer->getManufacturerLogo() ?>" src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA) . 'manufacturer' . '/' . $_manufacturer->getManufacturerLogo() ?>" width="80" height="80"></a>

                       <!-- <h2><?php echo Mage::getModel('perficient_manufacturer/manufacturer')->getManufacturerName($_manufacturer->getManufacturer(), Mage::app()->getStore()->getId())  ?></h2> -->
                    </li>
                <?php endforeach; ?>
            </ul>
            <div class="actions" style="clear:left;">
                <button type="submit" title="<?php echo $this->__('View All123') ?>" class="button"><span><span><?php echo $this->__('View All') ?></span></span></button>
            </div> 
        </form>
    </div>
</div>

<script type="text/javascript">
// Attention to the possible conflict between jquery and prototype
jQuery('.brand-slider').slick({ 
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 3,
    variableWidth: true,
    draggable: true
});
</script>

For customizations you must change the CSS and the slick slider options (there are many). Remember to include the JS and CSS library in your theme through local.xml.