Getting started

Installation

First step is to install it using yarn or npm:

npm install hooper

# or use yarn
yarn add hooper

Use Hooper

<template>
  <hooper>
    <slide>
      slide 1
    </slide>
    <slide>
      slide 2
    </slide>
    ...
  </hooper>
<template>

<script>
  import { Hooper, Slide } from 'hooper';

  export default {
    name: 'App',
    components: {
      Hooper,
      Slide
    }
  }
</script>

Configuring carousal

you can configure the carousal using the available props

 










<hooper :itemsToShow="3" :centerMode="true" pagination="no">
  <slide>
    slide 1
  </slide>
  <slide>
    slide 2
  </slide>
  ...

</hooper>

you can combine all settings in one object and pass it using setting prop


 





















 
 
 
 






<template>
  <hooper :settings="hooperSettings">
    <slide>
      slide 1
    </slide>
    <slide>
      slide 2
    </slide>
    ...

  </hooper>
<template>

<script>
  import { Hooper, Slide } from 'hooper';

  export default {
    name: 'App',
    components: {
      Hooper,
      Slide
    },
    data () {
      return {
        hooperSettings: {
          itemsToShow: 2,
          centerMode: true
        }
      }
    }
  }
</script>

Breakpoints

you can pass an array of breaking points to the carousal settings, to specify a custom settings for different viewport sizes, else it will fall to default settings

<template>
  <hooper :settings="hooperSettings">
    <slide>
      slide 1
    </slide>
    <slide>
      slide 2
    </slide>
    ...

  </hooper>
<template>

<script>
  import { Hooper, Slide } from 'hooper';

  export default {
    name: 'App',
    components: {
      Hooper,
      Slide
    },
    data () {
      return {
        hooperSettings: {
          itemsToShow: 2,
          centerMode: true,
          breakpoints: {
            800: {
              centerMode: false,
              itemsToShow: 3
            },
            1000: {
              itemsToShow: 6,
              pagination: 'fraction'
            }
          }
        }
      }
    }
  }
</script>

RTL

by default the carousal will automatically display according to the current document direction, unless you have explicitly set the direction throw the rtl prop

 










<hooper :rtl="true">
  <slide>
    slide 1
  </slide>
  <slide>
    slide 2
  </slide>
  ...

</hooper>

Sync

you can sync tow carousals to control each other, tow way control. to achieve this you have to pass to one of them the ref name of the other carousel.

note

The two carousel should be at the same scope

<hooper sync="hooper2">
  <slide>
    slide 1
  </slide>
  <slide>
    slide 2
  </slide>
</hooper>

<hooper ref="hooper2">
  <slide>
    slide 1
  </slide>
  <slide>
    slide 2
  </slide>
</hooper>

Addons

Hooper shipped with addons component, that add extra features to carousal

Available Addons:

  • Navigation
  • Pagination
  • Progress

Work with Addons











 
 
 
































<template>
  <hooper :settings="hooperSettings">
    <slide>
      slide 1
    </slide>
    <slide>
      slide 2
    </slide>
    ...

    <hooper-navigation slot="hooper-addons"></hooper-navigation>
    <hooper-pagination slot="hooper-addons"></hooper-pagination>
    <hooper-progress slot="hooper-addons"></hooper-progress>
  </hooper>
<template>

<script>
  import { 
    Hooper,
    Slide,
    Progress as HooperProgress,
    Pagination as HooperPagination,
    Navigation as HooperNavigation
    } from 'hooper';

  export default {
    name: 'App',
    components: {
      Hooper,
      Slide,
      HooperProgress,
      HooperPagination,
      HooperNavigation
    },
    data () {
      return {
        hooperSettings: {
          itemsToShow: 2,
          centerMode: true
        }
      }
    }
  }
</script>