*$("#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)");
});*
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--;
}
});
});
Tags: exception, jqueryjquery