Featured Product Slider Not Working Properly

Question

In my Magento Mobile homepage, Featured Product Slider Not Working Properly. When I add this code to my mobile_homepage static block it will work only once. when I try to add another category to this code. the slider is not working. it will show product big images. Url (test.blingers.in)

<div class="featured">{{block type="mpanel/products" products_count="10" title="School Uniform" category_id="377" template="cms/home/featured_products.phtml"}}</div> 

Source Code

<?php if($this->getTitle()!=''): ?>
    <div class="block-title">
        <div class="title">
            <h2><?php echo $this->getTitle() ?></h2>
        </div>
    </div>
<?php endif ?>
<?php if (($_products = $this->getSpecialProducts('featured')) && (count($_products)>0)): ?>
<?php $helper = $this->helper('mpanel') ?>
    <?php $size = $helper->convertRatioToSize($this->getProductRatio()) ?>
    <?php 
        if($this->getCountPerRow()){
            $col = $this->getCountPerRow();
        }
        else{
            $col = 1;
        }

        $perrow = $col;

        $col = $helper->convertColRowCustom($col);
    ?>

    <div class="owl-container">
        <div class="owl-carousel products-carousel " id="featured_products" style="display:block">
            <?php $i=0; $j=0; foreach ($_products as $_product): $j++; ?>
                <?php $_product = Mage::getModel('catalog/product')->load($_product->getId()) ?>
                    <div class="item">
                        <div class="product-content">
                            <div class="product-top">
                                <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($size['width'], $size['height']) ?>" alt="<?php echo $this->stripTags($_product->getName(), null, true) ?>" />
                                </a>
                                <div class="label-product">
                                    <?php echo $helper->getProductLabel($_product) ?>
                                </div>
                            </div>

                            <h2 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></h2>
                            <?php echo $this->getPriceHtml($_product, true, '-widget-new-grid') ?>
                            <?php if ($_product->isSaleable()): ?>
                                <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="btn btn-cart btn-default btn-xs" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><?php echo $this->__('Add To Cart'); ?></button>
                            <?php endif; ?>

                        </div>
                    </div>

            <?php endforeach ?>
        </div>
    </div>  
    <script type="text/javascript">
        mgsjQuery("#featured_products").owlCarousel({
            items: 2,
            nav:false,
            margin:12,
            responsive:{
                0:{
                    items:2
                },
                600:{
                    items:2
                },
                1000:{
                    items:2
                }
            }
        });
    </script>
<?php else: ?>
<div class="alert alert-danger no-product-display">
    <p><?php echo $this->__('There are no products matching the selection.') ?></p>
</div>
<?php endif; ?>

Answer 1

Use below code:

mgsjQuery.noConflict();
    mgsjQuery(document).ready(function ($) {   
      mgsjQuery(".products-carousel").owlCarousel({
            loop:true,
            nav:false,
            margin:12,
            responsiveClass:true,
            responsive:{
                0:{
                    items:1,
                    nav:true
                },
                600:{
                    items:3,
                    nav:false
                },
                1000:{
                    items:5,
                    nav:true,
                    loop:false
                }
            }
        });
     });

Answer 2

add carousel on class instead of id. because the repeating id causes the problem

 <script type="text/javascript">
            mgsjQuery(".products-carousel").owlCarousel({
                items: 2,
                nav:false,
                margin:12,
                responsive:{
                    0:{
                        items:2
                    },
                    600:{
                        items:2
                    },
                    1000:{
                        items:2
                    }
                }
            });
        </script>

the second solution for that

id="featured_products<?php echo $this->getCategoryId() ?>"

<script type="text/javascript">
                mgsjQuery("#featured_products<?php echo $this->getCategoryId() ?>").owlCarousel({
                    items: 2,
                    nav:false,
                    margin:12,
                    responsive:{
                        0:{
                            items:2
                        },
                        600:{
                            items:2
                        },
                        1000:{
                            items:2
                        }
                    }
                });
            </script>