Есть слайдер с кнопками для перелистывания изображений, а как сделать чтобы он листался наведением мыши (например наводишь мышку в левую часть, листаеться влево, наводишь в правую то вправо)
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li><img src="img1.jpg" alt="Image 1"></li>
<li><img src="img2.jpg" alt="Image 2"></li>
<li><img src="img3.jpg" alt="Image 3"></li>
<li><img src="img4.jpg" alt="Image 4"></li>
<li><img src="img5.jpg" alt="Image 5"></li>
<li><img src="img6.jpg" alt="Image 6"></li>
</ul>
</div>
<a href="#" class="jcarousel-control-prev">‹</a>
<a href="#" class="jcarousel-control-next">›</a>
<p class="jcarousel-pagination"></p>
</div>
(function($) {
$(function() {
var jcarousel = $('.jcarousel');
jcarousel
.on('jcarousel:reload jcarousel:create', function () {
var carousel = $(this),
width = carousel.innerWidth();
if (width >= 600) {
width = width / 3;
} else if (width >= 350) {
width = width / 2;
}
carousel.jcarousel('items').css('width', Math.ceil(width) + 'px');
})
.jcarousel({
wrap: 'circular'
});
$('.jcarousel-control-prev')
.jcarouselControl({
target: '-=1'
});
$('.jcarousel-control-next')
.jcarouselControl({
target: '+=1'
});
$('.jcarousel-pagination')
.on('jcarouselpagination:active', 'a', function() {
$(this).addClass('active');
})
.on('jcarouselpagination:inactive', 'a', function() {
$(this).removeClass('active');
})
.on('click', function(e) {
e.preventDefault();
})
.jcarouselPagination({
perPage: 3,
item: function(page) {
return '<a href="#' + page + '">' + page + '</a>';
}
});
});
})(jQuery);