I'm trying to make a slider that I got my content from the array in JavaScript. how to handle it. what I want is that when I click the left and right buttons, so I want it to have a transition effect when the content changes.like opacity, scale ?

[jsfiddle](https://jsfiddle.net/ibrahimgedik/3at4mgpq/23/);
Here's a copy of my project,I can do it with css, but I want to know how content from the array with javascript can have a transition effect.

```
const title = document.querySelector('.title');
const caption = document.querySelector('.caption');
const image = document.querySelector('.image');

var array = [
  {title:'Title 1', caption:'Caption 1', image:'https://images.unsplash.com/photo-1484417894907-623942c8ee29?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=889&q=80' },

  {title:'Title 2', caption:'Caption 2', image:'https://images.unsplash.com/photo-1544256718-3bcf237f3974?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80' },

  {title:'Title 3', caption:'Caption 3', image:'https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80' }
];

var index = 0;
var sliderCount = array.length;

showSlide(index);

document.querySelector('#left-btn').addEventListener('click', function () {
    index--;
    showSlide(index);

});
document.querySelector('#right-btn').addEventListener('click', function () {
    index++;
    showSlide(index);
});

function showSlide(i) {
    index = i;

    if (i < 0) {
        index = sliderCount - 1;
    }

    if (i >= sliderCount) {
        index = 0;
    }

    title.textContent = array[index].title;
    caption.textContent = array[index].caption;
    image.setAttribute('src', array[index].image);
}

```