Magento 2, Magento Development, Customization, Extension Development and Integration, Optimization, SEO and Responsive Design

Magento 2, Magento Development, Customization, Extension Development and Integration, Optimization, SEO and Responsive Design

Image slider for Magento

Using this post you can add jQuery Image slider in any page

Magento Image slider

Download the following js.

jquery.js
jquery.caroufredsel-5.6.4-packed.js

Click here for Live demo

Put that files in your skin/frontend/default/[Your Theme]/js directory.
Call these js file in your page in which you want to add the slider as following .


<script src="<?=$this->getSkinUrl()?>js/jquery.js" type="text/javascript"></script>

<script>
    $j = jQuery.noConflict(); //this way the jquery is not Conflict with other js
</script>

<script src="<?=$this->getSkinUrl()?>js/jquery.carouFredSel-5.6.4-packed.js" type="text/javascript"></script>

Add the following script in same page.

<script>
      $j(function() {
           $j('#callaction').carouFredSel({
                 prev: '.jcarousel-prev-horizontal',
                 next: '.jcarousel-next-horizontal',
                 pagination: "#pager2", auto: false
           });
     });
</script>

Now set the html as following.
<div class=" jcarousel-skin-callaction">
    <div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;">
        <div class="jcarousel-clip jcarousel-clip-horizontal" style="position: relative;">
            <ul class="jcarousel-list jcarousel-list-horizontal" id="callaction" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px; width: 1606px;">
                <li><a href="#"><img src="<?php echo $this->getSkinUrl()?>images/image1.jpg" /></a></li>
                <li><a href="#"><img src="<?php echo $this->getSkinUrl()?>images/image2.jpg" /></a></li>
                <li><a href="#"><img src="<?php echo $this->getSkinUrl()?>images/image3.jpg" /></a></li>
                <li><a href="#"><img src="<?php echo $this->getSkinUrl()?>images/image4.jpg" /></a></li>
                <li><a href="#"><img src="<?php echo $this->getSkinUrl()?>images/image5.jpg" /></a></li>
            </ul>
        </div>
        <div class="jcarousel-prev jcarousel-prev-horizontal" style="display: block;"></div>
        <div class="jcarousel-next jcarousel-next-horizontal" style="display: block;"></div>
    </div>
</div>

Now add following class in your styles.css

Please support us, Like us on Facebook.

  1. very nice post..help for me...

    ReplyDelete
  2. Thank you so much for posting all these helpful points to increase online business. Its really difficult and challenging task to manage an eCommerce website. But all these solutions will help in increasing the sale.
    magento development company in bangalore 

    ReplyDelete

 

Copyright @ 2017 HKBlog.