2017-07-14 128 views
0

我想要一个垂直滑块与滑动滑块和tilt.js.最后一个给鼠标悬停动画,但滑块不起作用。有没有办法让这两个图书馆一起工作?滑动滑块与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/[email protected]/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>

回答

0

请检查一下。

$(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/[email protected]/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>