Ruby on Rails Stimulus: Simple carousel flow

css

.onboarding-step {
  display: none;
}

.onboarding-step.active {
  display: block;
}

onboarding_controller

// app/javascript/controllers/onboarding_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ['step'];
  static classes = [ 'active' ]

  connect() {
    this.showStep(0);
  }

  next() {
    if (this.currentStep < this.stepTargets.length - 1) {
      this.showStep(this.currentStep + 1);
    }
  }
  
  previous() {
    if (this.currentStep > 0) {
      this.showStep(this.currentStep - 1);
    }
  }

  showStep(step) {
    this.stepTargets.forEach((stepTarget) => {
      stepTarget.classList.remove(this.activeClass);
    });
    this.stepTargets[step].classList.add(this.activeClass);
    this.currentStep = step;
  }

  get currentStep() {
    return parseInt(this.data.get('currentStep'));
  }

  set currentStep(value) {
    this.data.set('currentStep', value);
  }
}

yourpage

<h1>Onboarding</h1>

<div id="onboarding-steps" data-controller="onboarding" data-onboarding-active-class="active">
  <div class="onboarding-step" data-onboarding-target="step" data-current-step="1">
    <h3>Step 1</h3>
  </div>

  <div class="onboarding-step" data-onboarding-target="step" data-current-step="2" >
    <h3>Step 2</h3>
  </div>

  <div class="onboarding-step" data-onboarding-target="step" data-current-step="3">
    <h3>Step 3</h3>
  </div>

  <div>
    <button href="" data-action="click->onboarding#previous:prevent">Previous</button>
    <button href="" data-action="click->onboarding#next:prevent">Next</button>
  </div>
</div>