carousel moving to bottom when clicking next and before buttons

Instead of using bootstrap, I use CSS to cover those. My code looks as follows:

<style>
@keyframes tonext {
  75% {
    left: 0;
  }
  95% {
    left: 100%;
  }
  98% {
    left: 100%;
  }
  99% {
    left: 0;
  }
}

@keyframes tostart {
  75% {
    left: 0;
  }
  95% {
    left: -300%;
  }
  98% {
    left: -300%;
  }
  99% {
    left: 0;
  }
}

@keyframes snap {
  96% {
    scroll-snap-align: center;
  }
  97% {
    scroll-snap-align: none;
  }
  99% {
    scroll-snap-align: none;
  }
  100% {
    scroll-snap-align: center;
  }
}

body {
  max-width: 100rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  font-family: 'Lato', sans-serif;
}

* {
  box-sizing: border-box;
  scrollbar-color: transparent transparent; /* thumb and track color */
  scrollbar-width: 0px;
}

*::-webkit-scrollbar {
  width: 0;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: transparent;
  border: none;
}

* {
  -ms-overflow-style: none;
}

*{
    -webkit-animation-delay: 3600s;
}

ol, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.carousel {
  position: relative;
  padding-top: 50%;
  filter: drop-shadow(0 0 10px #0003);
  perspective: 100px;
}

.carousel__viewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  overflow-x: scroll;
  counter-reset: item;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.carousel__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  counter-increment: item;
  -webkit-animation: slide 3600s infinite linear;
}

.carousel__slide:nth-child(even) {
    -webkit-animation-delay: 3600s;
}

.carousel__slide:nth-child(odd) {
    -webkit-animation-delay: 3600s;
}

.carousel__slide:before {
  content: counter(item);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-40%,70px);
  color: #fff;
  font-size: 2em;
}

.carousel__snapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
}

@media (hover: hover) {
  .carousel__snapper {
    animation-name: tonext, snap;
    animation-timing-function: ease;
    animation-duration: 4s;
    animation-iteration-count: infinite;
  }

  .carousel__slide:last-child .carousel__snapper {
    animation-name: tostart, snap;
  }
}

@media () {
  .carousel__snapper {
    animation-name: none;
  }
}

.carousel:hover .carousel__snapper,
.carousel:focus-within .carousel__snapper {
  animation-name: none;
}

.carousel__navigation {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}

.carousel__navigation-list,
.carousel__navigation-item {
  display: inline-block;
}

.carousel__navigation-button {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #333;
  background-clip: content-box;
  border: 0.25rem solid transparent;
  border-radius: 50%;
  font-size: 0;
  transition: transform 0.1s;
}

.carousel::before,
.carousel::after,
.carousel__prev,
.carousel__next {
  position: absolute;
  top: 0;
  margin-top: 20%;
  width: 3rem;
  height: 3rem;
  transform: translateY(-50%);
  border-radius: 50%;
  font-size: 0;
  outline: 0;
}

.carousel::before,
.carousel__prev {
  left: -0.5rem;
}

.carousel::after,
.carousel__next {
  right: 1rem;
}

.carousel::before,
.carousel::after {
  content: '';
  z-index: 1;
  background-color: #333;
  background-size: 2rem 2rem;
  background-repeat: no-repeat;
  background-position: center center;
  color: #fff;
  font-size: 2.5rem;
  line-height: 4rem;
  text-align: center;
  pointer-events: none;
}

.carousel::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
}

.carousel::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
}

    .outer-container{
        display: flex;
        justify-content: space-around;
        /*max-width: 960px;*/
        margin-left: 10px;
        padding-top: 10px;
    }
    
    .vertical-separator{
        border: solid 1px #D5DBDB;
    }
    
    .left-container{
        padding-right: 5px;
    }
    
    .right-container{
        padding-top:  20px;
        padding-left: 5px;
        padding-right:  5px;
    }
    .center {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
</style>  
<crowd-form answer-format="flatten-objects">
    <div id="errorBox"></div>
    
    <section class="carousel" aria-label="survey" data-interval="false">
      <ol class="carousel__viewport">
        </li>  
        <li id="carousel__slide1"
            tabindex="0"
            class="carousel__slide">
          <div class="carousel__snapper">
            <div class="outer-container">
                <span class="left-container">
                    <h3>#1</h3>
                    <img src = "${h1_image_url}" width="100" height="250">
                </span>
                <span class="vertical-separator"></span>
                <span class="right-container">
                    <div>
                        <br>
                        <br>
                        <br>
                        <br>
                        <p><strong>choose one</strong></p>
                        <input type="radio" id="Happy_1" name="h1" value="Happy">
                        <label for="Happy_1">Happiness</label><br>
                        <input type="radio" id="Sad_1" name="h1" value="Sad">
                        <label for="Sad_1">Sadness</label><br>
                        <input type="radio" id="Happy_1" name="h1" value="Happy">
                        <label for="Happy_2">Happiness</label><br>
                        <input type="radio" id="Happy_2" name="h1" value="Happy">
                        <label for="Happy_3">Happiness</label><br>
                        <input type="radio" id="Happy_3" name="h1" value="Happy">
                        <label for="Happy_3">Happiness</label><br>
                        
                    </div>
                </span>
            </div>
           <a href="#carousel__slide2"
           class="carousel__prev">Go to last slide</a>
           <a href="#carousel__slide2"
           class="carousel__next">Go to next slide</a>
          </div>
        </li>
        <li id="carousel__slide2"
            tabindex="0"
            class="carousel__slide">
            <div class="carousel__snapper">
                <div class="outer-container">
                    <span class="left-container">
                        <h3>#2</h3>
                        <img src = "${h2_image_url}" class="center" width="100" height="250">
                    </span>
                    <span class="vertical-separator"></span>
                    <span class="right-container">
                        <div>
                        <br>
                        <br>
                        <br>
                        <br>
                            <p><strong>choose one</strong></p>
                            <input type="radio" id="Happy_4" name="h2" value="Happy">
                            <label for="Happy_4">Happiness</label><br>
                            <input type="radio" id="Sad_2" name="h2" value="Sad">
                            <label for="Sad_2">Sadness</label><br>
                            <input type="radio" id="Sad_3" name="h2" value="Sad">
                            <label for="Sad_3">Sadness</label><br>
                            <input type="radio" id="Sad_4" name="h2" value="Sad">
                            <label for="Sad_4">Sadness</label><br>
                            <input type="radio" id="Sad_5" name="h2" value="Sad">
                            <label for="Sad_5">Sadness</label><br>
                            
                        </div>
                    </span>
                </div>
              <a href="#carousel__slide1"
               class="carousel__prev">Go to previous slide</a>
              <a href="#carousel__slide1"
               class="carousel__next">Go to next slide</a>
            </div> 
            </li>
      </ol>
      <aside class="carousel__navigation">
        <ol class="carousel__navigation-list">
          <li class="carousel__navigation-item">
            <a href="/#carousel__slide1"
               class="carousel__navigation-button">Go to slide 1</a>
          </li>
          <li class="carousel__navigation-item">
            <a href="/#carousel__slide2"
               class="carousel__navigation-button">Go to slide 2</a>
          </li>
        </ol>
      </aside>
    </section>
</crowd-form>

When I press the next and previous buttons, the page moves itself to the bottom of the browser. I want to fix the browser if the user does not scroll the window.

I tired to add href="/#carouselExample" but it does not work. Is there any other way I can fix it?

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum