How do I make it possible to slide only to the right when using the bootstrap carousel?

Question

I want to implement it so that I can only slide in one direction, but I don't know how to do it. If I go from the first slide to the second slide, I want to make sure that I don't slide again first. Please tell me how to prevent it from going back after the order.

here is my code

<template>
  <main>
    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" style="height:80vh;">

      <ol class="carousel-indicators">
        <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active" id="step-0"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="1" id="step-1"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="2" id="step-2"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="3" id="step-3"></li>
      </ol>

      <div class="carousel-inner">
        <div class="carousel-item active">
          <div><img src="/img/layout/onboarding1.png" style="width:100%;"></div>
          <div class="pl-5 pr-5">
            <button type="button" class="btn btn-lg btn-secondary btn-block waves-effect waves-themed ft-score">시작하기</button>
          </div>
        </div>
        <div class="carousel-item">
          <div><img src="/img/layout/onboarding2.png" style="width:100%;"></div>
          <div class="pl-5 pr-5">
            <button type="button" class="btn btn-lg btn-secondary btn-block waves-effect waves-themed ft-score">시작하기</button>
          </div>
        </div>
        <div class="carousel-item">
          <div><img src="/img/layout/onboarding3.png" style="width:100%;"></div>
          <div class="pl-5 pr-5">
            <button type="button" class="btn btn-lg btn-secondary btn-block waves-effect waves-themed ft-score">시작하기</button>
          </div>
        </div>
        <div class="carousel-item">
          <div><img src="/img/layout/onboarding4.png" style="width:100%;"></div>
          <div class="pl-5 pr-5">
            <button @click="goHome" type="button" class="btn btn-lg btn-primary btn-block waves-effect waves-themed ft-score">시작하기</button>
          </div>
        </div>

      </div>
    </div>
  </main>
</template>

<script>
export default {
  data() {
    return {
      step: 0
    }
  },
  setup() {
  },
  mounted() {
    $('#carouselExampleCaptions').on('slide.bs.carousel', function (e) {
      this.step = e.to

      setTimeout(() => {
        for (let idx = 0; idx < e.to; idx++) {
          $('#step-' + idx).addClass('active')
        }
      }, 1);
    })

    // loop => wrap false
    $('#carouselExampleCaptions').carousel({
      interval: false,
      wrap: false
    });
  },
  methods: {
    goHome: function() {
      this.$router.push({
        name: 'HomeMain'
      })
    }
  },
}
</script>

<style scoped>
</style>

i want oneside slide by bootstrap carousel

Answer 1

i found a solution. it just return false when event direction is right!

like this,

$('#yourCarousel').on('slide.bs.carousel', function (e) {
      if (e.direction === "right") return false
})

i suffered from this promble in the last few days but i thought just easily moment, so Eureka!

i'm free !!!!!!!!!!!!!!!!!!!!