Листать слайдер наведением мыши

[dranoc]

Есть слайдер с кнопками для перелистывания изображений, а как сделать чтобы он листался наведением мыши (например наводишь мышку в левую часть, листаеться влево, наводишь в правую то вправо)

<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">&lsaquo;</a>
                <a href="#" class="jcarousel-control-next">&rsaquo;</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);

[рони]

dranoc,

(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"
        }).jcarouselAutoscroll({
            interval: 1800,
            target: "-=1",
            autostart: false
        }).mousemove(function(event) {
            var prev = event.clientX < jcarousel.innerWidth() / 2;
            var data = jcarousel.data("prev");
            if (data != prev) {
                var target =
                    prev ? "-=1" : "+=1";
                jcarousel.data("prev", prev).jcarousel("scroll", target).jcarouselAutoscroll("reload", {
                    target: target
                }).jcarouselAutoscroll("start")
            }
        }).mouseleave(function() {
            jcarousel.jcarouselAutoscroll("stop")
        });
        $(".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);