If you are looking to implement responsive slider for your website so, you can use below code that will help to create own slider or carousel:

<script src=”owl.carousel.min.js” type=”text/javascript”></script>
<link href=”owl.carousel.css” type=”text/css” rel=”stylesheet” />
<?php
$collection = Mage::getModel(‘catalog/product’)->getCollection();
?>

<div class=”owl-carousel”>
<?php
foreach ($collection as $_product) :
$_product = Mage::getModel(‘catalog/product’)->setStoreId($storeId)->load($_product->getId());

?>
<div>
<a href=”<?php echo $_product->getProductUrl() ?>” title=”<?php echo $this->stripTags($this->getImageLabel($_product, ‘small_image’), 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) ?><?php //echo $this->stripTags($this->getImageLabel($_product, ‘small_image’), null, true) ?>” />

</a>
<span class=”setboxdataname”><a class=”title-des” href=”<?php echo $_product->getProductUrl() ?>” title=”<?php echo $this->stripTags($_product->getName(), null, true) ?>”><?php echo $_helper->productAttribute($_product, $_product->getName(), ‘name’) ?></a></span>
<?php endforeach ?>
</div>

Now add script part:

<script type=”text/javascript”>

jQuery(document).ready(function(){
jQuery(“.owl-carousel”).owlCarousel({
loop:true,
margin:2,
autoplay: true,
responsiveClass:true,
responsive:{
0:{
items:2,
nav:true,
navText: [“<img alt=’Previous’ src='<?php echo $this->getSkinUrl(‘images’);?>/previous-img.png’>”,”<img alt=’Next’ src='<?php echo $this->getSkinUrl(‘images’);?>/nex-img.png’>”]
},
480:{
items:3,
nav:true,
navText: [“<img alt=’Previous’ src='<?php echo $this->getSkinUrl(‘images’);?>/previous-img.png’>”,”<img alt=’Next’ src='<?php echo $this->getSkinUrl(‘images’);?>/nex-img.png’>”]

},
767:{
items:4,
nav:true,
navText: [“<img alt=’Previous’ src='<?php echo $this->getSkinUrl(‘images’);?>/previous-img.png’>”,”<img alt=’Next’ src='<?php echo $this->getSkinUrl(‘images’);?>/nex-img.png’>”]

},
799:{
items:4,
nav:true,
navText: [“<img alt=’Previous’ src='<?php echo $this->getSkinUrl(‘images’);?>/previous-img.png’>”,”<img alt=’Next’ src='<?php echo $this->getSkinUrl(‘images’);?>/nex-img.png’>”]

},
1000:{
items:6,
nav:true,
navText: [“<img alt=’Previous’ src='<?php echo $this->getSkinUrl(‘images’);?>/previous-img.png’>”,”<img alt=’Next’ src='<?php echo $this->getSkinUrl(‘images’);?>/nex-img.png’>”],
loop:false
}
}
});
});

</script>

Please login or Register to submit your answer
Not the answer you are looking for? Browse other questions tagged or ask your own question.