Magento 1.9 home page carousel

Question

How to achieve this or what feature is it termed in magento.

I need to get scrollable sections something like in below snaps:

1) New products in one section with products

2) Offers in another section

How to achieve the same in front page??

Answer 1

Try this,

Download js & css file to this link Link

then add your css and js in your local.xml

<action method="addItem"><type>skin_css</type><name>css/allproduct/owl.carousel.css</name></action>             
                <action method="addItem"><type>skin_css</type><name>css/allproduct/owl.theme.css</name></action>
                <action method="addItem"><type>skin_css</type><name>css/allproduct/owl.transitions.css</name></action>
                <action method="addItem"><type>skin_css</type><name>css/allproduct/slider.css</name></action>               
                <action method="addItem"><type>skin_js</type><name>js/allproduct/jquery-1.9.1.min.js</name></action>
                <action method="addItem"><type>skin_js</type><name>js/allproduct/noconflict.js</name></action>              
                <action method="addItem"><type>skin_js</type><name>js/allproduct/owl.carousel.js</name></action>

my.phtml

<?php 
    $isActiveFeature = Mage::getStoreConfig('mps_allproduct/featureenable/featureactive');
    $isFeaturewanttodisplaytitle = Mage::getStoreConfig('mps_allproduct/featureenable/featurewantdisplay');
    $isFeaturewanttodisplayaddtocart = Mage::getStoreConfig('mps_allproduct/featureenable/featureaddtocart');
    $isFeaturewanttocompare = Mage::getStoreConfig('mps_allproduct/featureenable/featurecompare');
    $isFeaturewanttowishlist = Mage::getStoreConfig('mps_allproduct/featureenable/featurewishlist');
    if ($isActiveFeature == 1){
            if($isFeaturewanttodisplaytitle == 1){?>
                <div class="slidertitle">
                    <h1> <?php echo Mage::getStoreConfig('mps_allproduct/featureenable/featuretitle');?></h1>
                </div>
            <?php }?>
        <?php $isFeature = $this->_getProductCollection();
        $isFeatureCount = $isFeature->count();
        if($isFeatureCount > 0){?>
            <div class="owl-sliders" id="owl-feature">
            <?php foreach ($isFeature as $_product){?>
                    <div class="owl-product-item">  
                        <a href="<?php echo $_product->getProductUrl()?>" title="<?php echo $_product->getName();?>" class="product-image">
                            <img class="lazyOwl" data-src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame(false)->resize(150); ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />                
                        </a>
                        <h2 class="product-name">
                            <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_product->getName(); ?>
                            </a>
                        </h2>
                        <?php if($_product->getRatingSummary()): ?>
                        <?php echo $this->getReviewsSummaryHtml($_product, 'short',true) ?>
                        <?php endif; ?>
                        <?php echo $this->getPriceHtml($_product, true, '-new') ?>

                        <div class="actions">
                           <?php if($isFeaturewanttodisplayaddtocart == 1){
                                if($_product->isSaleable()): ?>
                                    <button type="button" title="<?php echo $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($isFeaturewanttowishlist == 1){?>
                                   <li>
                                        <a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?>
                                        </a>
                                    </li>
                                <?php }
                                if ($isFeaturewanttocompare ==1){?>
                                    <li>
                                        <span class="separator">|</span>
                                         <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?>
                                         </a>
                                    </li>
                                <?php }?>
                            </ul>                              
                        </div>

                    </div>
                <?php }?>
            </div>
            <div class="customNavigation">
              <a class="btn prev"> Previous </a>
              <a class="btn next"> Next </a>

            </div>
        <?php }

        else{
            echo "No Feature Product";
        }

    }

    else{

        echo '<h2 style="color: red; text-transform: unset; font-weight: bold; font-size: 18px;">Please Enable Feature Product system-&gt;configuration-&gt;All Product Configuration</h2>';
    }
?>






<script type="text/javascript">

    jQuery(document).ready(function($) { 
        var owl = $("#owl-feature");
        owl.owlCarousel({
          pagination : false, //Remove Pagination
          lazyLoad : true, // Lazy Load Product Image
          touchDrag  : false,
          mouseDrag  : false,
          items : 5, //10 items above 1000px browser width
          itemsDesktop : [1000,5], //5 items between 1000px and 901px
          itemsDesktopSmall : [900,3], // betweem 900px and 601px
          itemsTablet: [600,2], //2 items between 600 and 0
          itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
      });
      // Custom Navigation Events
      $(".next").click(function(){
        owl.trigger('owl.next');
      })
      $(".prev").click(function(){
        owl.trigger('owl.prev');
      })

});
</script>

it's my custom extension plz remove unwanted variables