CMS sliders are a common way to show lots of collection content using less space. By wrapping the slide element inside a loop you can then render dynamic content inside the slider.
<div class="swiper-container relative">
<div class="swiper" data-toggle="swiper" data-options="{'slidesPerView':1,'pagination':{'el':'.swiper-pagination','clickable':true,'renderBullet':'number','bulletClass':'swiper-pagination-bullet w-8 h-8 flex justify-center items-center text-base text-center text-dark opacity-100 bg-primary-300/40 rounded-full cursor-pointer','bulletActiveClass':'swiper-pagination-bullet-active bg-primary-600 text-white'},'spaceBetween':16,'breakpoints':{'1024':{'slidesPerView':2,'slidesPerGroup':2}},'navigation':{'prevEl':'.swiper-button-prev','nextEl':'.swiper-button-next'}}">
<div class="swiper-wrapper">
<template v-for="post in posts">
<div class="swiper-slide">
<div class="h-64 flex justify-center items-center">
<img v-bind:src="post.image" />
</div>
</div>
</template>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper-pagination static mt-2 flex flex-row justify-center gap-x-2 w-full"></div>
</div>