<div class="slider container -withCallout">
  <svg class="slider__calloutIcon icon accent-primary" role="presentation">
      <use href="/main-icons-sprite.svg#quote" />
  </svg>
  <div class="slider__callout">
    <span class="h3">
      Don’t take our word for it, read some of our thoughtful testimonials and decide for yourself.
    </span>
  </div>
  <div class="slider__content">
    <p-slider slides-per-view="auto" space-between="32" navigation="true" pagination-clickable="true" loop="true">
      <swiper-slide loading="lazy">
        <blockquote class="testimonial">
          <p class="testimonial__content">
          Suspendisse ac blandit nisi, non tempor purus. Pellentesque ornare tellus molestie quam pretium aliquet. Mauris eu est at velit cursus rutrum non sit amet turpis. Phasellus mauris est, fermentum sit amet tincidunt ultricies, egestas a ante proin et eros rutrum urna sollicitudin euismod non ut sem!
          </p>
          <footer class="testimonial__footer">
            <div class="testimonial__citationPhotoWrapper">
              <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto">
            </div>
            <cite class="testimonial__citation">
              Firstnamerson Lastname
              <span class="testimonial__citationTitle">
                Director of Important Titles, CorporateCorp
              </span>
            </cite>
          </footer>
        </blockquote>
      </swiper-slide>
      <swiper-slide loading="lazy">
        <blockquote class="testimonial">
          <p class="testimonial__content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil accusantium eligendi tempore placeat facere non enim expedita eum iusto delectus veniam inventore, a cumque vel? Illum ipsa in tempore minima?
          </p>
          <footer class="testimonial__footer">
            <div class="testimonial__citationPhotoWrapper">
              <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto">
            </div>
            <cite class="testimonial__citation">
              Firstnamerson Lastname
              <span class="testimonial__citationTitle">
                Director of Important Titles, CorporateCorp
              </span>
            </cite>
          </footer>
        </blockquote>
      </swiper-slide>
      <swiper-slide loading="lazy">
        <blockquote class="testimonial">
          <p class="testimonial__content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia quo, maiores rerum ducimus et numquam maxime labore dolores laboriosam dolorum repudiandae consequuntur animi voluptas dignissimos reprehenderit modi non quibusdam amet.
          </p>
          <footer class="testimonial__footer">
            <div class="testimonial__citationPhotoWrapper">
              <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto">
            </div>
            <cite class="testimonial__citation">
              Firstnamerson Lastname
              <span class="testimonial__citationTitle">
                Director of Important Titles, CorporateCorp
              </span>
            </cite>
          </footer>
        </blockquote>
      </swiper-slide>
      <swiper-slide loading="lazy">
        <blockquote class="testimonial">
          <p class="testimonial__content">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae animi molestias non itaque reiciendis facere est suscipit consequuntur eaque ipsum explicabo, corporis nulla enim earum fuga, distinctio voluptate possimus deserunt?
          </p>
          <footer class="testimonial__footer">
            <div class="testimonial__citationPhotoWrapper">
              <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto">
            </div>
            <cite class="testimonial__citation">
              Firstnamerson Lastname
              <span class="testimonial__citationTitle">
                Director of Important Titles, CorporateCorp
              </span>
            </cite>
          </footer>
        </blockquote>
      </swiper-slide>
      <swiper-slide loading="lazy">
        <blockquote class="testimonial">
          <p class="testimonial__content">
          Suspendisse ac blandit nisi, non tempor purus. Pellentesque ornare tellus molestie quam pretium aliquet. Mauris eu est at velit cursus rutrum non sit amet turpis. Phasellus mauris est, fermentum sit amet tincidunt ultricies, egestas a ante proin et eros rutrum urna sollicitudin euismod non ut sem!
          </p>
          <footer class="testimonial__footer">
            <div class="testimonial__citationPhotoWrapper">
              <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto">
            </div>
            <cite class="testimonial__citation">
              Firstnamerson Lastname
              <span class="testimonial__citationTitle">
                Director of Important Titles, CorporateCorp
              </span>
            </cite>
          </footer>
        </blockquote>
      </swiper-slide>
      <swiper-slide loading="lazy">
        <blockquote class="testimonial">
          <p class="testimonial__content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, exercitationem adipisci laboriosam nulla modi omnis excepturi vitae deleniti illum porro. Mollitia modi laudantium doloremque fugiat nostrum itaque quod quo error!
          </p>
          <footer class="testimonial__footer">
            <div class="testimonial__citationPhotoWrapper">
              <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto">
            </div>
            <cite class="testimonial__citation">
              Firstnamerson Lastname
              <span class="testimonial__citationTitle">
                Director of Important Titles, CorporateCorp
              </span>
            </cite>
          </footer>
        </blockquote>
      </swiper-slide>
      <swiper-slide loading="lazy">
        <blockquote class="testimonial">
          <p class="testimonial__content">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit, obcaecati! Suscipit quidem ipsa qui sunt nihil aliquid. Alias veniam maxime, assumenda amet, totam, cupiditate sunt ab exercitationem voluptas incidunt harum.
          </p>
          <footer class="testimonial__footer">
            <div class="testimonial__citationPhotoWrapper">
              <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto">
            </div>
            <cite class="testimonial__citation">
              Firstnamerson Lastname
              <span class="testimonial__citationTitle">
                Director of Important Titles, CorporateCorp
              </span>
            </cite>
          </footer>
        </blockquote>
      </swiper-slide>
    </p-slider>
  </div>
</div>

<script setup>
  import { register } from 'swiper/element/bundle'
  import { computed, ref, useTemplateRef, watchEffect } from 'vue'

  register()

  const swiper = ref(null)
  const slides = ref([])
  const swiperEl = useTemplateRef('swiper')

  const init = e => {
    slides.value = e.target.swiper?.slides
    console.log(e.target, e.target?.swiper, swiperEl.value)
  }
</script>
<template>
  <swiper-container ref="swiper" v-bind="$attrs" @swiperafterinit="init">
    <slot />
  </swiper-container>

  <ul>
    <li v-for="(slide, i) of slides">{{ i }}</li>
  </ul>
</template>