Image transition CSS/JavaScript

Question

So I want to add a transition effect to those images when they change through the buttons but I'm not sure how to do that or either do it on main style CSS or through the attributes with JavaScript.

For example, giving it something like this : transition: 2s linear.

var number;
var imagecount = document.getElementsByClassName('images');

function imageshow(b) {
  for (var i = 0; i < imagecount.length; i++) {
    if (i == b) {
      imagecount[i].style.display = 'block';
      number = i;
    } else {
      imagecount[i].style.display = 'none';
    }
  }
}

function prev(number) {
  imageshow(number - 1)
  if (number == 0) {
    imageshow(imagecount.length - 1);
  }
}

function next(number) {
  imageshow(number + 1)
  if (number == imagecount.length - 1) {
    imageshow(0);
  }
}
imageshow(0);

body {
  margin: 0px;
}

.images {
  width: 700px;
  height: 500px;
  border-radius: 11px;
  border: outset 2px rgba(70, 70, 70, 0.616);
}

#slider {
  font-family: Arial, Helvetica, sans-serif;
}

<div id="slider">
  <img src="https://i.picsum.photos/id/874/536/354.jpg" class="images" alt="">
  <img src="https://i.picsum.photos/id/99/536/354.jpg" class="images" alt="">
  <img src="https://i.picsum.photos/id/684/536/354.jpg" class="images" alt="">
  <img src="https://i.picsum.photos/id/556/536/354.jpg" class="images" alt="">
  <img src="https://i.picsum.photos/id/886/536/354.jpg" class="images" alt=""><br>
  <button onclick="prev(number)">previous</button>
  <button onclick="next(number)">next</button>
</div>

score 2 · Answer 1 · answered Feb 04 '20 at 05:03

You can do something like this.

Overlap all the images using absolute positioning
Use opacity to hide images ( you cannot animate from display: none)
Set a transition on the images
Change the opacity with js ( or better add a class )

var number;
var imagecount = document.getElementsByClassName('images');

function imageshow(b) {
  for (var i = 0; i < imagecount.length; i++) {
    if (i == b) {
      imagecount[i].style.setProperty( 'opacity', '1' );
      number = i;
    } else {
      imagecount[i].style.setProperty( 'opacity', '0' );
    }
  }
}

function prev(number) {
  imageshow(number - 1)
  if (number == 0) {
    imageshow(imagecount.length - 1);
  }
}

function next(number) {
  imageshow(number + 1)
  if (number == imagecount.length - 1) {
    imageshow(0);
  }
}
imageshow(0);

body {
  margin: 0px;
}

#slider {
  position: relative;
  width: 700px;
  height: 500px;
  margin-bottom: 1rem;
  font-family: Arial, Helvetica, sans-serif;
}
.images{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 700px;
  height: 500px;
  border-radius: 11px;
  border: outset 2px rgba(70, 70, 70, 0.616);
  transition: opacity 500ms;
}

<div id="slider">
  <img src="https://i.picsum.photos/id/874/536/354.jpg" class="images" alt="">
  <img src="https://i.picsum.photos/id/99/536/354.jpg" class="images" alt="">
  <img src="https://i.picsum.photos/id/684/536/354.jpg" class="images" alt="">
  <img src="https://i.picsum.photos/id/556/536/354.jpg" class="images" alt="">
  <img src="https://i.picsum.photos/id/886/536/354.jpg" class="images" alt=""><br>
</div>
 <button onclick="prev(number)">previous</button>
  <button onclick="next(number)">next</button>

Image transition CSS/JavaScript

1 Answers1