Making a slideshow with arrays Javascript

Question

My goal is to make a slideshow. I have only 1 image here and plan to use more later.

<!DOCTYPE html>
<html onmousedown='event.preventDefault();'>
<head>
<title> Slides </title>
<meta charset='utf-8'>
<style>

 table{
 margin: 1.5in;
 }

.arrow{
 color: blue;
 cursor: pointer;
 }

I attempted to make the image class 640 x 540 pixels, centered both horizontally and vertically. I want to avoid internal padding. Not sure if it's right.

.img{
 height: 540px;
 width: 640px;
 position: relative;
 }

For the image element itself I put no margin, is 100% wide, has a 1 pixel solid black border.

 #image{
 width: 100%;
 border: solid 1px;
 border-color: black;
 }
</style>
<script>

I want to make 2 globals, "images" and "imgidx". -images - an array that is filled in with the paths of the images in the images directory as strings.

-imgidx - a number initially set to 0.

Next I want to fill in the following functions.

-Increment or decrement imgidx.

-set the 'src' attribute on the img element (identified by the id 'img') to the image at images[imgidx]. If imgidx is > the number of images in the images array, it should wrap back to zero. If it goes below zero it should be set to 1 less than the length of the array.

function previmg() {
}
function nextimg() {
}
</script>
</head>
<body>
<table>
<tr>
<!-- Clicking on the arrows should change the image being displayed: -->
<td class='arrow' onclick='previmg();'> &#171;
<td class='image'><img id='img' src='https://img-9gag-fun.9cache.com/photo/appxzbM_460s.jpg'>
<td class='arrow' onclick='nextimg();'> &#187;
</table>
</body>
</html>

so did you want to change the src of the img or did you want images to move around? — A. L
– A. L, Commented Apr 12, 2017 at 0:17
I plan to reuse the code for different images later on. I want to be able to got forward and backwards. — HTMLnoobcs17001
– HTMLnoobcs17001, Commented Apr 12, 2017 at 0:28
were you going to have more img or just that single img which changes its src based on what arrow you click? — A. L
– A. L, Commented Apr 12, 2017 at 0:32
I am planing to have at least 8 images. I am unsure on the best way to have the images put into a function but I would like for it to change to the next image after the next arrow is clicked then wrap back to the first image at the end. So 12345678 --> 12345678 — HTMLnoobcs17001
– HTMLnoobcs17001, Commented Apr 12, 2017 at 0:43
What I'm asking is the difference in execution. Basically, just having 1 image and changing the src means the image will just reload, whereas having multiple images will give you the option of create sliding animations and such — A. L
– A. L, Commented Apr 12, 2017 at 0:45

A. L · Accepted Answer · 2017-04-12 00:57:44Z

2

Just change the img src based on whichever direction you're clicking, using the image index as to where the src should point to.

var images = ['http://placehold.it/300x150?text=Image1', 'http://placehold.it/300x150?text=Image2', 'http://placehold.it/300x150?text=Image3'];

var index = 0;

var the_image = document.getElementById("main-image");
the_image.src = images[0];

function show_image(direction)
{
  if (direction == "left")
  {
    index--;
  }
  else
  {
    index++;
    index %= images.length;
  }
  
  if (index < 0)
  {
    index = images.length - 1;
  }
  
  the_image.src = images[index];
}

<div>
  <button onclick="show_image('left')">&lt;</button>
  <button onclick="show_image('right')">&gt;</button>
</div>

<div>
  <img id="main-image" />
</div>

answered Apr 12, 2017 at 0:57

A. L

12.7k29 gold badges100 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

HTMLnoobcs17001 Over a year ago

Can I replace the divs with my <td>?

A. L Over a year ago

@HTMLnoob yes, it doesn't matter what container you put it in, just make sure you have some way of identifying your img e.g. id. Was just lazy.

HTMLnoobcs17001 Over a year ago

Awesome! Thanks a ton!

Vivick · Accepted Answer · 2017-04-12 00:46:29Z

1

I guess the variable that you increment is imgidx, then you should use this calculations :

imgidx -= 1;
imgidx %= images.length;

imgidx += 1;
imgidx %= images.length;

Here are some examples of how it works :

//imgidx is 9, images.length is 10
//user click on next
imgidx += 1;//here imgidx is 10
imgidx %= images.length;//10%10 is 0, back to zero \o/

``

//img idx is 0, images.length is 10
//user click on prev
imgidx -= 1;//here imgidx is -1
imgidx %= images.length;//-1%10 is -1
imgidx+=(imgidx < 0)?images.length:0;//-1 + 10 = 9, the "last" image

edited Apr 12, 2017 at 0:46

answered Apr 12, 2017 at 0:16

Vivick

5,0212 gold badges15 silver badges28 bronze badges

7 Comments

HTMLnoobcs17001 Over a year ago

Thanks! It def needs to wrap like this from 0.

Vivick Over a year ago

It does, basic math.

Vivick Over a year ago

Apparently programming languages standards want to go against math rules ... JS makes (-1)%10 = -1 which, in math, is nonsense (you can't have a negative remainder unless you're doing it wrong). Therefore I update my answer.

A. L Over a year ago

Explain to me how 1%10 is 1 but -1%10 is 9. Do you actually know what modulus does?

Vivick Over a year ago

Oh wait, -1≡-1%10, nvm my bad it makes sense now :@

|

Felix Haeberle · Accepted Answer · 2017-04-12 00:39:04Z

0

I did a small slideshow based on your needs!

Maybe I could help you.. buttons are not working but are preconfigured!

$('.arrowLeft').on('click', function (){
  // your code goes here
});

$('.arrowRight').on('click', function (){
 // your code goes here
});

.arrowLeft{
  z-index: 100;
  position: fixed;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 10%;
  background-color: red;
}

.arrowRight{
  z-index: 100;
  position: fixed;
  width: 50px;
  height: 50px;
  top: 50%;
  right: 10%;
  background-color: red;
}

.arrow {
  color: blue;
  cursor: pointer;
}

.img {
  height: 540px;
  width: 640px;
  position: relative;
}

img {
  position: fixed;
  top: 0%;
  left: 20%;
  width: 60%;
  border: solid 1px;
  border-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <div class='arrowLeft'></div>
    <div class='arrowRight'></div>
    <td class='image'>
      <img id='img-3' src='http://placehold.it/200x200?text=Slide3' />
    </td>
    <td class='image'>
      <img id='img-2' src='http://placehold.it/200x200?text=Slide2' />
    </td>
    <td class='image'>
      <img id='img-1' src='http://placehold.it/200x200?text=Slide1' />
    </td>
  </tr>
</table>

edited Apr 12, 2017 at 0:39

answered Apr 12, 2017 at 0:37

Felix Haeberle

1,61414 silver badges21 bronze badges

5 Comments

A. L Over a year ago

Check your code, your buttons don't work. Or at the very least, throws errors

A. L Over a year ago

Would be better if you could actually submit complete code (as in it actually works)

Felix Haeberle Over a year ago

Checked it! Its only preconfigured in case of different behaviors on click which the OP can self-set.

A. L Over a year ago

It's still an incomplete answer as you haven't shown any version of a complete answer. If you could make the left/right buttons show their prev/next slides that would be deserving of an up vote.

HTMLnoobcs17001 Over a year ago

This doesn't function

Collectives™ on Stack Overflow

Making a slideshow with arrays Javascript

3 Answers 3

3 Comments

7 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

7 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related