Make a Transition when Toggling Classes in CSS and JS

I want to make a slideshow with images that have text on them and I wan to change the shown image with a next and previous button.
I want the images to have an opacity transition when switching between them, which is done with toggling classes and I don't get the transition to work.
Everything else in the slideshow works already.
I appreciate every answer ^^

Here is my code:

    <section class="featured container section">
        <div class="featured__slides">
          <div class="featured__active featured__item">
            <img class="featured__img" src="/featured/f1.jpg">
          </div>
          <div class="featured__unactive featured__item">
            <img class="featured__img" src="/featured/f2.jpg">
          </div>
        </div>
        
        <div class="featured__arrows">
          <button class="featured__arrow featured__prev">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
              <path fill-rule="evenodd" d="M7.72 12.53a.75.75 0 010-1.06l7.5-7.5a.75.75 0 111.06 1.06L9.31 12l6.97 6.97a.75.75 0 11-1.06 1.06l-7.5-7.5z" clip-rule="evenodd" />
            </svg>          
          </button>

          <button class="featured__arrow featured__next">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
              <path fill-rule="evenodd" d="M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z" clip-rule="evenodd" />
            </svg>                    
          </button>
        </div>
    </section>

    <style>
    .featured {
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    
        position: relative;
    }
    
    .featured__item {
        display: none;
        -webkit-transition: all .3s linear 0s;
        transition: all .3s linear 0s;
        opacity: 0;
    }
    
    .featured__active {
        display: block;
        opacity: 1;
    }
    
    .featured__arrows {
        display: flex;
        justify-content: space-between;
        position: absolute;
        left: 0;
        right: 0;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    
    .featured__arrow {
        height: var(--size-lg);
        width: var(--size-lg);
        color: var(--clr-cyan400);
    }
    </style>

    <script>
    const nextArrow = document.getElementsByClassName("featured__next");
    const prevArrow = document.getElementsByClassName("featured__prev");
    
    var idx = 0;
    var slides = document.getElementsByClassName("featured__slides");
    var slideshowElements = $(slides).children();
    
    $(nextArrow).click(function () { 
        slideshowElements[idx].classList.toggle("featured__active");
        slideshowElements[idx].classList.toggle("featured__unactive");
        if (slideshowElements.length - 1 == idx)
        {
            idx = 0;
        } 
        else
        {
            idx++;
        }
        slideshowElements[idx].classList.toggle("featured__active");
        slideshowElements[idx].classList.toggle("featured__unactive");
    });
    
    $(prevArrow).click(function () { 
        slideshowElements[idx].classList.toggle("featured__active");
        slideshowElements[idx].classList.toggle("featured__unactive");
        if (idx == 0)
        {
            idx = slideshowElements.length - 1;
        } 
        else
        {
            idx--;
        }
        slideshowElements[idx].classList.toggle("featured__active");
        slideshowElements[idx].classList.toggle("featured__unactive");
    });
    </script>

I also already tried the transition on the "featured__img" class which is also not working.

It seems that you're missing a key part in your CSS to make the opacity transition work when toggling classes. Let's update your CSS and JavaScript code to achieve the desired effect.

First, update your CSS classes to include the opacity property:

.featured__item {
  -webkit-transition: all .3s linear 0s;
  transition: all .3s linear 0s;
  opacity: 0; /* Add this line */
}

.featured__item.active {
  opacity: 1; /* Add this line */
}

Now, your JavaScript code seems to be fine, but you can simplify it a bit by creating a function to handle the logic of updating the slideshow. Here's the updated version of your JavaScript code:

const nextArrow = $(".featured__next");
const prevArrow = $(".featured__prev");

let idx = 0;
const slides = $(".featured__slides");
const slideshowElements = slides.children();

function updateSlideshow(newIndex) {
  slideshowElements.eq(idx).toggleClass("featured__active");
  slideshowElements.eq(newIndex).toggleClass("featured__active");
  idx = newIndex;
}

nextArrow.click(function () {
  const newIndex = (idx + 1) % slideshowElements.length;
  updateSlideshow(newIndex);
});

prevArrow.click(function () {
  const newIndex = (idx - 1 + slideshowElements.length) % slideshowElements.length;
  updateSlideshow(newIndex);
});

// Initialize the first item as active
slideshowElements.eq(idx).toggleClass("featured__active");

codesandbox.io/s/little-morning-git4i7 here is a working example with a slightly different approach