CSS keep changes after animation

I am making a css slider. I have 10 slides in total and display only 5 at a time. I've managed to scroll the slides to the left so that slide 1 disappears and slide 7 becomes visible once the element is hovered. By using animation-fill-mode: forwards I manage to keep the state after animation but when I unhover the element goes back to the original state.

Is there any way to make the change permanent and once I hover again the element scrolls further?

<div class="carousel">
   <div class="slide">Slide 1</div>
   <div class="slide">Slide 2</div>
   <div class="slide">Slide 3</div>
   <div class="slide">Slide 4</div>
   <div class="slide">Slide 5</div>
   <div class="slide">Slide 6</div>
   <div class="slide">Slide 7</div>
   <div class="slide">Slide 8</div>
   <div class="slide">Slide 9</div>
   <div class="slide">Slide 10</div>
</div>

.slide {
    height: 214px;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    background-color: #fff;
    width: 200px;
    display: inline-block;
    position: relative;
}

.carousel{
    position: relative;
    margin: auto;
    margin-top: 20px;
    transition: 1s;
    height: 222px;
    white-space: nowrap;
    overflow: hidden;
    width: 1270px;
    background-color:grey;
}

.carousel:hover .slide {
  animation-name: example;
  animation-duration: 1.5s;
  animation-fill-mode:forwards;
}

@keyframes example {
  from {left: 0px;}
  to {left: -202px;}
}