how can I write onclick="slide(-1)" in jquery?

Question

I'm making in jquery an image slider. First time I've done in javascript and now I want to convert the code in jquery.

The question is how can I write onclick="slide(-1)" in jquery?

HTML:

<div id="container">
    <img id="img" src="img/img1.jpg">
    <div id="left-holder"><img class="left" src="img/arrow-left.png"></div>
    <div id="right-holder"><img class="right" src="img/arrow-right.png"></div>
</div>

CSS:

#container {
width: 1024px;
height: 768px;
margin: 20px auto;
position: relative;
}

#img {
width: 1024px;
height: 768px;
position: absolute;
}

#left-holder {
height: 768px;
width: 100px;
position: absolute;
left: 0px;
top: 0px;
}

#right-holder {
height: 768px;
width: 100px;
position: absolute;
right: 0px;
top: 0px;
}

.left {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 0px;
cursor: pointer;
}

.right {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
right: 0px;
cursor: pointer;
}

Jquery:

var imagecount = 1;
var total = 8;
function slide(x){
   var image = $("#img");
   imagecount = imagecount + x;
   if(imagecount > total) { imagecount = 1;}
   if(imagecount < 1) { imagecount = total;}
   image.attr("src", "img/img"+ imagecount + ".jpg");
}

Images are called : img1.jpg, img2.jpg, ..

Thank you in advance!

drop the css, and ask your question again. what do you want? /what is not working? either your English isnt very gd or your not understanding what you are doing and there for asking an arb question which doesn't really make sense. Its like asking how do i change a orange into a fruit. So the logic is that maybe English is not your first language or you are missing some key piece of information. — Seabizkit
So, I writed the code in javascript and now i want to write it in jquery and <img class="left" src="img/arrow-left.png"> had attribute onclick="slide(-1)" and i want to write the same thing, but in jquery. — R. Catalin

Trung Duong Trung Duong · Accepted Answer · 2017-02-22T08:59:30

You could try to update your script like:

var imagecount = 1;
var total = 8;
function slide(x){
   var image = $("#img");
   imagecount = imagecount + x;
   if(imagecount > total) { imagecount = 1;}
   if(imagecount < 1) { imagecount = total;}
   image.attr("src", "img/img"+ imagecount + ".jpg");
}
$(document).ready(function(){
    $("#left-holder").click(function(){
        slide(-1);
    });
    $("#right-holder").click(function(){
        slide(1);
    });
});

For more information about binding click, you could check this link JQuery Click API

how can I write onclick="slide(-1)" in jquery?

1 Answers