A functional/stateless vue component for carousel using render function with vue-awesome-swiper

carousel.vue

<!-- npm install vue-awesome-swiper  -->

<script>
import Vue from 'vue';
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr';

Vue.use(VueAwesomeSwiper);

export default {
  name: 'MyCarousel',
  functional: true,
  render(h, { children }) {
    const swiperOptions = {
      breakpoints: {
        900: {
          slidesPerView: 'auto',
          slidesPerGroup: 1,
        },
      },
      slidesPerView: 4,
      spaceBetween: 16,
      slidesPerGroup: 4,
      simulateTouch: false,
      pagination: {
        el: '.js-swiper-pagination',
        clickable: true,
      },
    };

    const slides = children.map((child) => {
      console.warn(child);

      if (!child.data) child.data = {};
      if (!child.data.class) child.data.class = [];

      child.data.class.push('swiper-slide');

      return child;
    });

    const swiperWrapper = h('div', {
      class: ['swiper-wrapper'],
    }, slides);

    const swiperPagination = h('div', {
      class: 'carousel__pagination swiper-pagination swiper-pagination-bullets js-swiper-pagination',
    });

    const swiperPreviusButton = h('div', { class: 'swiper-button-prev' });
    const swiperNextButton = h('div', { class: 'swiper-button-next' });

    return h('div', {
      directives: [
        {
          name: 'swiper',
          arg: 'mySwiper',
          value: swiperOptions,
        },
      ],
    }, [
      swiperWrapper,
      swiperPagination,
      swiperPreviusButton,
      swiperNextButton,
    ]);
  },
};
</script>

<style scoped>
.carousel__pagination {
  position: static;
  margin-top: 16px;
}
</style>