Slider 3

HTML :

<section class="section nos-valeurs">
  <div class="container">
  <h2 class="title is-2 has-text-centered">Nos valeurs</h2>
   <ul class="valeurs">
      <li class="valeur is-active">
        <div class="columns is-centered">
          <figure class="column titre-valeur is-paddingless">
            <img src="img/image1.jpg" alt="Image 1">
            <figcaption class="has-text-centered title is-4">Titre 1</figcaption>
          </figure>
          <div class="column is-8 detail-valeur">
            <div class=" content color-white">
              <h3 class="title is-4 is-spaced">Titre 1</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi reiciendis eaque aperiam facilis totam optio veniam possimus corporis voluptates, ipsum maxime illo excepturi ipsam minima blanditiis sit quae? Veniam voluptate excepturi, vel quis consectetur maiores accusamus, suscipit eos reprehenderit ex itaque placeat quo magnam? Blanditiis architecto aspernatur voluptatibus rem! Libero.</p>
              <a href="#" class="button">en savoir plus</a>
            </div>
          </div>
        </div>
      </li>
      <li class="valeur">
        <div class="columns is-centered">
          <figure class="column titre-valeur is-paddingless">
            <img src="img/image2.jpg" alt="Image 2">
            <figcaption class="has-text-centered title is-4">Titre 2</figcaption>
          </figure>
          <div class="column is-8 detail-valeur">
            <div class=" content color-white">
              <h3 class="title is-4 is-spaced">Titre 2</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi reiciendis eaque aperiam facilis totam optio veniam possimus corporis voluptates, ipsum maxime illo excepturi ipsam minima blanditiis sit quae? Veniam voluptate excepturi, vel quis consectetur maiores accusamus, suscipit eos reprehenderit ex itaque placeat quo magnam? Blanditiis architecto aspernatur voluptatibus rem! Libero.</p>
              <a href="#" class="button">en savoir plus</a>
            </div>
          </div>
        </div>
      </li>
      <li class="valeur">
        <div class="columns is-centered">
          <figure class="column titre-valeur is-paddingless">
            <img src="img/image3.jpg" alt="Image 3">
            <figcaption class="has-text-centered title is-4">Titre 3</figcaption>
          </figure>
          <div class="column is-8 detail-valeur">
            <div class=" content color-white">
              <h3 class="title is-4 is-spaced">Titre 3</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi reiciendis eaque aperiam facilis totam optio veniam possimus corporis voluptates, ipsum maxime illo excepturi ipsam minima blanditiis sit quae? Veniam voluptate excepturi, vel quis consectetur maiores accusamus, suscipit eos reprehenderit ex itaque placeat quo magnam? Blanditiis architecto aspernatur voluptatibus rem! Libero.</p>
              <a href="#" class="button">en savoir plus</a>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</section>

CSS :

.nos-valeurs li.valeur{
  margin-bottom: 2rem;
}
.nos-valeurs h2.title, .nos-valeurs h3.title{
  color: var(--white);
}
.nos-valeurs .titre-valeur img{
  margin: 0 auto;
  display: block;
}
.nos-valeurs .titre-valeur figcaption{
  display: none;
}
.nos-valeurs .detail-valeur{
  margin-bottom: 1rem;
}
.nos-valeurs a.button{
  border: 1px solid var(--white);
  background-color: var(--white);
  color: var(--color-1);
}
.nos-valeurs a.button:hover{
  border: 1px solid var(--color-4);
  background-color: var(--color-4);
  color: var(--white);
}
@media screen and (min-width: 769px){
  .nos-valeurs{
    height: 560px;
  }
  .nos-valeurs .titre-valeur{
    height: 200px;
    width: 300px;
    position: absolute;
    left: 0;
    cursor: pointer;
  }
  .nos-valeurs .titre-valeur img{
    filter: grayscale(1);
  }
  .nos-valeurs .valeur.is-active .titre-valeur img{
    filter: grayscale(0);
  }
  .nos-valeurs .titre-valeur figcaption{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: rgba(255,255,255,0.5);
  }
  .nos-valeurs .valeur.is-active .titre-valeur figcaption{
    color: var(--white);
    text-shadow: 4px 2px 4px #000000;
    background-color: transparent;
  }
  .nos-valeurs .detail-valeur{
    position: absolute;
    right: -100%;
    top: 6rem;
    transition: right 0.5s ease-in-out;
  }
  .nos-valeurs .valeur.is-active .detail-valeur{
    right: 0;
  }
  .nos-valeurs .valeur:nth-of-type(1) .titre-valeur{
    top: -75px;
  }
  .nos-valeurs .valeur:nth-of-type(2) .titre-valeur{
    top: 135px;
  }
  .nos-valeurs .valeur:nth-of-type(3) .titre-valeur{
    top: 345px;
  }
}

JS :

$(document).ready(function () {
    $(".valeur").click(function () {
        $(".valeur").removeClass("is-active");
        $(this).toggleClass("is-active");
    });
});