0

I'm using slick slider in my page and I need to zoom image on hovering image. So for this Im using a zoom jquery plugin and it's working in normal image but not working in slick slider. here is my code

<ul class="autoplay">
 <li>    
    <div class="inner_item_img1">
        <img src="images/krishna_kanhiya.jpg" class="light-zoom">
    </div>
    <div class="inner_item_txt">
        <p>Krishna is always my source of inspiration.</p>
    </div>
    <div class="clearfix"></div>
</li>

js

and I added "lightzoom.js" this

  $(document).ready(function () {
     $('img.light-zoom').lightzoom({
        zoomPower   : 2,    //Default
        glassSize   : 180,  //Default
    });
});
Community
  • 1
  • 1
Nitish Kumar
  • 80
  • 1
  • 2
  • 8
  • Do you have a link to your issue? Are you getting any console errors? – Isabel Inc Sep 09 '16 at 12:34
  • No, I'm not getting any errors. but on same page if I use an image outside slick slider, the zoom script is working on that image. – Nitish Kumar Sep 09 '16 at 14:45
  • You seem to have an extra comma in your code. Remove the comma after 180 and see if that helps – Isabel Inc Sep 09 '16 at 14:47
  • Thanks, and I did that but still not working – Nitish Kumar Sep 10 '16 at 19:55
  • Do you have a live url of the implementation? – Isabel Inc Sep 11 '16 at 13:33
  • Here is a link for my code https://jsfiddle.net/awqcpfce/4/ please add slick js and jquery – Nitish Kumar Sep 12 '16 at 09:16
  • The issue is that the slider plugin captures the event and handles processing differently. Not to mention the DOM manipulation it's doing to get the slider working. You will need to change a lot of code to get it working. I suggest using a slider with inbuilt zoom functionality like this one http://www.menucool.com/zoom-slider – Isabel Inc Sep 14 '16 at 12:52

3 Answers3

1

This worked for me

.slick-slider{
    touch-action: auto!important;
}
Malika
  • 7
  • 5
0

I found an answer here: https://github.com/kenwheeler/slick/issues/2505

It works with this "Remove these lines in slick.scss: -ms-touch-action: pan-y; touch-action: pan-y;"

I've removed form slick.css

rahul
  • 7,573
  • 7
  • 39
  • 53
Cristina A
  • 13
  • 5
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/18983920) – André Kool Mar 02 '18 at 13:15
  • I've removed from slick.css this "part -ms-touch-action: pan-y; touch-action: pan-y;" – Cristina A Mar 27 '18 at 09:02
  • removing the touch-action property may enable the zoom but the user cannot scroll and see the left and right most part of the image when it is zoomed. – Amit Dave Apr 15 '21 at 22:04
0

You can override the slick slider (v. 1.4) with the css rule .slick-slider { touch-action: inherit; }

menepet
  • 796
  • 13
  • 17