Infinite slider using HTML elements reorder

Question

I have a parent div and inside 6 children divs. I styled them using :nth-child. Depending on the number they have different positions and z-index-es. I need to create a function (onClick on the button next to my main-slider div) that will change the order of children in my parent div. So that:

1. first child -> last (sixth) child
2. second child -> first child
3. third child -> second child
4. fourth child -> third child
5. fifth child -> fourth child
6. last (sixth) child -> first child

And i want to make it in the infinite loop, so that the user can click and rewind children divs all the time. (Later I will make a second button to create opposite function on the second button, to rewind divs in opposite direction)

I have HTML looking like this:

<div class="main-picture">
   <button>         
   <div class="main-slider">
      <div class="main-slider__slide"></div>
      <div class="main-slider__slide"></div>
      <div class="main-slider__slide"></div>
      <div class="main-slider__slide"></div>
      <div class="main-slider__slide"></div>
      <div class="main-slider__slide"></div>
   </div>
   </button>                    
</div>

And SCSS like this:

.main-slider {
    display: flex;
    position: relative;
    z-index: -1;
    width: 700px;
    height: 392px;

    &__slide {
        width: 200px;
        height: 392px;
        position: absolute;
        left: 50%;

        &:nth-child(1) {
            transform: translate(-150%) scale(80%);
            z-index: 0;
            background-color: red;
        }
        &:nth-child(2) {
            transform: translate(-75%) scale(90%);
            z-index: 1;
            background-color: blue;
        }
        &:nth-child(3) {
            z-index: 2;
            background-color: green;
        }
        &:nth-child(4) {
            transform: translate(75%) scale(90%);
            z-index: 1;
            background-color: yellow;
        }
        &:nth-child(5) {
            transform: translate(150%) scale(80%);
            z-index: 0;
            background-color: black;

        }&:nth-child(6) {
            z-index: -1;
            background-color: greenyellow;
        }
    }
}

It should look like this:

visualization