Question

我正在尝试使用光滑滑块和tilt.js的垂直滑块。最后一个给鼠标悬停动画，但滑块不起作用。有没有办法让这两个图书馆一起工作？

$(document).ready(function() {
  $('.slider').slick({    
    vertical: true,
    slidesToShow: 1,
    slidesToScroll: 1,   
  });
  
  const tilt = $('.js-tilt').tilt();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<script src="https://unpkg.com/tilt.js@1.1.21/dest/tilt.jquery.min.js"></script>
<div class="slider">
  <div><img class="js-tilt" src="http://lorempicsum.com/simpsons/255/200/2" alt=""></div>
  <div><img class="js-tilt" src="http://lorempicsum.com/simpsons/255/200/2" alt=""></div>
  <div><img class="js-tilt" src="http://lorempicsum.com/simpsons/255/200/2" alt=""></div>
  <div><img class="js-tilt" src="http://lorempicsum.com/simpsons/255/200/2" alt=""></div>
  <div><img class="js-tilt" src="http://lorempicsum.com/simpsons/255/200/2" alt=""></div>
  <div><img class="js-tilt" src="http://lorempicsum.com/simpsons/255/200/2" alt=""></div>
  <div><img class="js-tilt" src="http://lorempicsum.com/simpsons/255/200/2" alt=""></div>
  <div><img class="js-tilt" src="http://lorempicsum.com/simpsons/255/200/2" alt=""></div>
</div>

Answer 1

请检查。

＆＃13;

$(document).ready(function() {
  $('.slider').slick({    
    vertical: true,
    slidesToShow: 1,
    slidesToScroll: 1,   
  });
  
  const tilt = $('.js-tilt').tilt();
});

＆＃13;

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css"/>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<script src="https://unpkg.com/tilt.js@1.1.21/dest/tilt.jquery.min.js"></script>
<div class="slider">
  <div><img class="js-tilt" src="http://lorempicsum.com/simpsons/255/200/1" alt=""></div>
  <div><img class="js-tilt" src="http://lorempicsum.com/simpsons/255/200/2" alt=""></div>
  <div><img class="js-tilt" src="http://lorempicsum.com/simpsons/255/200/3" alt=""></div>
  <div><img class="js-tilt" src="http://lorempicsum.com/simpsons/255/200/4" alt=""></div>
  <div><img class="js-tilt" src="http://lorempicsum.com/simpsons/255/200/5" alt=""></div>
  <div><img class="js-tilt" src="http://lorempicsum.com/simpsons/255/200/6" alt=""></div>
  <div><img class="js-tilt" src="http://lorempicsum.com/simpsons/255/200/7" alt=""></div>
  <div><img class="js-tilt" src="http://lorempicsum.com/simpsons/255/200/8" alt=""></div>
</div>

＆＃13;

带有tilt.js的光滑滑块

1 个答案: