带tilt.js的滑块滑块

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

请检查一下。

​

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

<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>

​