<div class="why-not-add" data-why-not-add>
  <div class="why-not-add__header">
    <h3 class="why-not-add__title">Why not add</h3>

    <div class="why-not-add__arrows">
      <button
          class="why-not-add__arrow why-not-add__arrow-prev"
          type="button"
          aria-label="Previous product"
          data-why-not-add-prev
      >
        <i class="fas fa-chevron-left"></i>
      </button>

      <button
          class="why-not-add__arrow why-not-add__arrow-next"
          type="button"
          aria-label="Next product"
          data-why-not-add-next
      >
        <i class="fas fa-chevron-right"></i>
      </button>
    </div>
  </div>

  <div class="swiper-container why-not-add__slider" data-why-not-add-slider>
    <div class="swiper-wrapper">
      {{#each products}}
        <div class="swiper-slide why-not-add__slide">
          {{> bloomreach/why-not-add-card this}}
        </div>
      {{/each}}
    </div>
  </div>

  <div class="why-not-add__pagination" data-why-not-add-pagination></div>
</div>