CODEWITHSUNDEEP
jqueryhtmlcsssliderslick.js
Gulfam Arshad
Gulfam Arshad

Reputation: 73

Slide the slider on click event (Slick Slider)

I am new in jquery. I am using a custom cursor and want to move the slider on click event now if the cursor is in left side of slider on click event it should slide on left side (to the previous slide) and if the cursor is in right side of slider on click it should slide on right side (to the next slide).

Currently it only moves in one direction i.e. in right direction. here is my jquery code.

 $("#slider-arrow").mousemove(function(e){

    var z = $("#slider-arrow").width();
    var x = e.pageX - this.offsetLeft;

    if( x >= z/2){

        $(this).css({ cursor : 'url(<?php echo base_url('/assets/images/icon-next.png')?>), auto'})

        .click(function () {

                    $("#slider-arrow").slick('slickNext');

            });
    }else if( x <= z/2){

        $(this).css({ cursor : 'url(<?php echo base_url('/assets/images/icon-open-prev.png')?>), auto'})

        .click(function () {

                   $("#slider-arrow").slick('slickPrev');

        });
    }

});

Upvotes: 0

Views: 5458

Answers (1)

Saeed.Gh
Saeed.Gh

Reputation: 1305

you used $("#slider-arrow").mousemove(... according to provided html code the #slider-arrow is your slider div and consider e.pageX gives you the place of mouse in the #slider-arrow division so you don't need to subtract the offset I think.

Upvotes: 0

Related Questions