Novicell Slideshow Vue Component

A Vue carousel component built on vue-awesome-swiper to display full width image slideshows with a fade effect.

How to use

The slideshow component can be used in both a browser environment and a self-built single file component.

Single File Component

To install the component in your project, run the command:

> npm i @novicell/vue-slideshow

To import the uncompiled SFC, use the following import statement (Vue will optimize templates when doing this):

import NcSlideshow from '@novicell/vue-slideshow/dist/nc-slideshow.vue

You can also import the esm component with:

import NcSlideshow from '@novicell/vue-slideshow

Browser

To reference the component in your project, add the following script tag to your page:

<script src="https://unpkg.com/@novicell/vue-slideshow"></script>

or

<script src="https://cdn.jsdelivr.net/npm/@novicell/vue-slideshow/dist/nc-slideshow.min.js"></script>

The component will automatically register itself if Vue is present on the window object.

Props

The component takes 1 prop:

options

This object directly represents the Swiper options. The defaults follow the Novicell style guide.

type: Object,
default() {
  return {
    spaceBetween: 30,
    slidesPerView: 1,
    grabCursor: true,
    effect: 'fade',
    autoplay: true,
    pagination: {
      clickable: true,
      el: '.swiper-pagination'
    },
    keyboard: {
      enabled: true
    }
  }
}

Note:

If you want to use other options than the defaults, you will have to include the necessary styles.

Slots

default

The default slot takes any number of elements and wraps them in slideshow slides.

Styling

Styling is not applied by default. If you want to apply the default (minimal) Novicell style guide styling, these files can be found in the css directory of this package:

├── css
|  ├── index.css
|  └── src
|     └── index.css
├── nc-slideshow.esm.js
├── nc-slideshow.min.js
├── nc-slideshow.min.js
└── nc-slideshow.vue

css/index.css is the compiled and ready-to-use styling.

css/src/index.css is PostCSS that will need to be compiled with postcss-nested installed in your environment.

Full stylesheet

When using more Swiper features than the default, you will need to either:

• Overwrite the styling on the default swiper classes manually OR
• Import the standard swiper styles from 'swiper/css/swiper.css'

Examples

SFC

<template>
  <NcSlideshow>
    <img class="img" src="https://source.unsplash.com/random/1920x1080" alt="random splash">
    <img class="img" src="https://source.unsplash.com/random/800x600" alt="random splash">
    <img class="img" src="https://source.unsplash.com/random/1440x900" alt="random splash">
  </NcSlideshow>
</template>

<script>
import NcSlideshow from '@novicell/vue-slideshow/dist/nc-slideshow.vue'

export default {
  components: {
    NcSlideshow
  }
}
</script>

<style>
.slideshow {
  height: 50vh;
}

.img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
</style>

Browser

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@novicell/vue-slideshow/dist/nc-slideshow.min.js"></script>

<div id="app">
  <nc-slideshow>
    <img class="img" src="https://source.unsplash.com/random/1920x1080" alt="random splash">
    <img class="img" src="https://source.unsplash.com/random/800x600" alt="random splash">
    <img class="img" src="https://source.unsplash.com/random/1440x900" alt="random splash">
  </nc-slideshow>
</div>

<script>
  const app = new Vue({
    el: '#app'
    // I am already a registered component
  })
</script>

<style>
.slideshow {
  height: 50vh;
}

.img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
</style>

Contribution

Looking to contribute something? Here's how you can help. Please take a moment to review our contribution guidelines in order to make the contribution process easy and effective for everyone involved.

License

The Novicell Slideshow Vue Component is licensed under the MIT license. (http://opensource.org/licenses/MIT)