CODEWITHSUNDEEP
javascripthtmlcss
yodastea5
yodastea5

Reputation: 28

How to make image always go to next one

so this may look like How do I make image click able and go to the next image? but it is the same and different, I am making sort of a comic thing for myself, and their is about 83 imgs and input/img tags, what i want is sort of , an onclick thing where when you click the img it will go to the next, but you can manually scroll if u want, so instead of writing in each one a different id or class to go to, i wanted to see what a javascript function or jquery could do cause im not that good in those languages, any help is appreciated! heres what each img looks like

<input  type="image" src="32c454ebb802ac7b6f93120d8955c7c0_html_140f0bfc048ed85.jpg" name="Image1" align="center" border="0"/>

and the css for it

input {
height: 100vh;
margin-left: 50vh;}

if you need any more of the code just ask :) thanks

Upvotes: 0

Views: 51

Answers (1)

Fakt309
Fakt309

Reputation: 861

function scrollNext(el) {
  var bounding = el.getBoundingClientRect();
  
  window.scroll({
    top: window.scrollY + bounding.top + bounding.height,
    left: 0,
    behavior: 'smooth'
  });
}
input {
height: 100vh;
margin-left: 50vw;
}
<input onclick="scrollNext(this)"  type="image" src="32c454ebb802ac7b6f93120d8955c7c0_html_140f0bfc048ed85.jpg" name="Image1" align="center" border="0"/>
<input onclick="scrollNext(this)" type="image" src="32c454ebb802ac7b6f93120d8955c7c0_html_140f0bfc048ed85.jpg" name="Image1" align="center" border="0"/>
<input onclick="scrollNext(this)" type="image" src="32c454ebb802ac7b6f93120d8955c7c0_html_140f0bfc048ed85.jpg" name="Image1" align="center" border="0"/>

Upvotes: 1

Related Questions