Home » Jquery » is there any solution for this problem in jQuery-Exceptionshub

is there any solution for this problem in jQuery-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:
*$("#next").click(function(){
    $("div").css("margin-left","-=100px"); 
});*

how I can perform the same functionality using transform JQuery

*$("#next").click(function(){
    $("div").css("transform","translateX(-404px)"); 
});*
How to&Answer:

In jQuery, ID(#) only works for the first element. If you have multiple ids with same name, you need to name it like this:

$("#next-1").click(function(){
    $("div-1").css("margin-left","-=100px"); 
});

$("#next-2").click(function(){
    $("div-2").css("margin-left","-=100px"); 
});

Then it will work.
You can write dynamic code so that you will not have write same jQuery code again and again. You can give a common class and set a attribute with a unique number. After that, you can use that unique number to add margin. Ex:

$("#next").click(function(){
    let number = $(this).attr('number'); //you can give any name for the attribute but the value must be a unique number
    $("div-"+number).css("margin-left","-=100px"); 
});

Hope this would help. Happy coding 🙂

Answer:

$(document).ready(function(){
// $(window).load(function(){
    var lengthSlider = $(".slider-items").length;
    var next = 3;

    $("#next").click(function(){
        if(next < lengthSlider)
        {

            currentImage =  $(".slider-inner").css("margin-left","-=404px");
            next++;
        }
    });    

    $("#prev").click(function(){
        if($(".slider-inner").css("margin-left") != "0px")
        {
            // currentImage = currentImage
            $(".slider-inner").css("margin-left","+=404px");
            next--;
        }
    });
});