html
<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-magrate.js"></script>
<script type="text/javascript" src="slick.js"></script>
<script src="vue.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="root" class="wrapper">
<button @click="nextSlide" class="next buttons">next</button>
<button @click="prevSlide" class="prev buttons">prev</button>
<div class="my-slider">
<div class="item-wrapper"><div class="item">1</div></div>
<div class="item-wrapper"><div class="item">2</div></div>
<div class="item-wrapper"><div class="item">3</div></div>
<div class="item-wrapper"><div class="item">4</div></div>
</div>
</div>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
js file
new Vue({
el: '#root',
computed: {
methods: {
beforeChange(event, slick, current, next) {
console.log(slick);
},
prevSlide() {
$('.my-slider').slick('slickPrev');
},
nextSlide() {
$('.my-slider').slick('slickNext');
}
},
mounted() {
const mySlieder = $('.my-slider');
mySlieder.on('init', this.initSlide);
mySlieder.slick({
infinite: false,
slidesToShow: 2,
slidesToScroll: 1,
variableWidth: true,
arrows: false,
responsive: [
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
})
.on('beforeChange', this.beforeChange)
}
});
А вот в чём проблема - если делать variableWidth: true, то он последний слайд может не показать полностью, и его никак не прокрутить (infinite:false, бесконечная проекутка не нужна).
