Hooper

Examples

Default Example

  • slide 2
  • slide 3
  • slide 4
  • slide 5
  • slide 6
Item 1 of 6 
<hooper>
  <slide>
    slide 1
  </slide>
  <slide>
    slide 2
  </slide>
  <slide>
    slide 3
  </slide>
  <slide>
    slide 4
  </slide>
  <slide>
    slide 5
  </slide>
  <slide>
    slide 6
  </slide>

</hooper>
  • slide 2
  • slide 3
  • slide 4
  • slide 5
  • slide 6
Item 1 of 6 
<template>
  <hooper>
    <slide>
      slide 1
    </slide>
    <slide>
      slide 2
    </slide>
    <slide>
      slide 3
    </slide>
    <slide>
      slide 4
    </slide>
    <slide>
      slide 5
    </slide>
    <slide>
      slide 6
    </slide>

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

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

export default {
  components: {
    Hooper,
    Slide,
    HooperNavigation
  }
}
</script>

Progress Component

  • slide 2
  • slide 3
  • slide 4
  • slide 5
  • slide 6
Item 1 of 6 
<template>
  <hooper>
    <slide>
      slide 1
    </slide>
    <slide>
      slide 2
    </slide>
    <slide>
      slide 3
    </slide>
    <slide>
      slide 4
    </slide>
    <slide>
      slide 5
    </slide>
    <slide>
      slide 6
    </slide>

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

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

export default {
  components: {
    Hooper,
    Slide,
    HooperProgress
  }
}
</script>

Indicator Pagination

  • slide 2
  • slide 3
  • slide 4
  • slide 5
  • slide 6
Item 1 of 6 
<template>
  <hooper>
    <slide>
      slide 1
    </slide>
    <slide>
      slide 2
    </slide>
    <slide>
      slide 3
    </slide>
    <slide>
      slide 4
    </slide>
    <slide>
      slide 5
    </slide>
    <slide>
      slide 6
    </slide>

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

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

export default {
  components: {
    Hooper,
    Slide,
    HooperPagination
  }
}
</script>

Fraction Pagination

  • slide 2
  • slide 3
  • slide 4
  • slide 5
  • slide 6
1 / 6
Item 1 of 6 
<template>
  <hooper>
    <slide>
      slide 1
    </slide>
    <slide>
      slide 2
    </slide>
    <slide>
      slide 3
    </slide>
    <slide>
      slide 4
    </slide>
    <slide>
      slide 5
    </slide>
    <slide>
      slide 6
    </slide>

    <hooper-pagination slot="hooper-addons" mode="fraction"></hooper-pagination>
  </hooper>
</template>

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

export default {
  components: {
    Hooper,
    Slide,
    HooperPagination
  }
}
</script>

Show Multiple Items

  • slide 4
  • slide 5
  • slide 6
Item 1 of 6 
<hooper :itemsToShow="3">
  <slide>
    slide 1
  </slide>
  <slide>
    slide 2
  </slide>
  <slide>
    slide 3
  </slide>
  <slide>
    slide 4
  </slide>
  <slide>
    slide 5
  </slide>
  <slide>
    slide 6
  </slide>
</hooper>

Slide Multiple Items

  • slide 4
  • slide 5
  • slide 6
Item 1 of 6 
<hooper :itemsToSlide="3">
  <slide>
    slide 1
  </slide>
  <slide>
    slide 2
  </slide>
  <slide>
    slide 3
  </slide>
  <slide>
    slide 4
  </slide>
  <slide>
    slide 5
  </slide>
  <slide>
    slide 6
  </slide>
</hooper>

Infinite Scrolling

  • slide 1
  • slide 2
  • slide 3
  • slide 4
  • slide 5
  • slide 6
  • slide 4
  • slide 5
  • slide 6
  • slide 1
  • slide 2
  • slide 3
  • slide 4
  • slide 5
  • slide 6
Item 1 of 6 
<hooper :infiniteScroll="true">
  <slide>
    slide 1
  </slide>
  <slide>
    slide 2
  </slide>
  <slide>
    slide 3
  </slide>
  <slide>
    slide 4
  </slide>
  <slide>
    slide 5
  </slide>
  <slide>
    slide 6
  </slide>
</hooper>

Center Mode

  • slide 2
  • slide 3
  • slide 4
  • slide 5
  • slide 6
Item 1 of 6 
<hooper :itemsToShow="1.25" :centerMode="true">
  <slide>
    slide 1
  </slide>
  <slide>
    slide 2
  </slide>
  <slide>
    slide 3
  </slide>
  <slide>
    slide 4
  </slide>
  <slide>
    slide 5
  </slide>
  <slide>
    slide 6
  </slide>
</hooper>

.hooper-slide.is-current {
  transform: scale(1.2);
}

Auto Playing

  • slide 2
  • slide 3
  • slide 4
  • slide 5
  • slide 6
Item 1 of 6 
<hooper :progress="true" :autoPlay="true" :playSpeed="2000">
  <slide>
    slide 1
  </slide>
  <slide>
    slide 2
  </slide>
  <slide>
    slide 3
  </slide>
  <slide>
    slide 4
  </slide>
  <slide>
    slide 5
  </slide>
  <slide>
    slide 6
  </slide>
</hooper>

Vertical Sliding

  • slide 2
  • slide 3
  • slide 4
  • slide 5
  • slide 6
Item 1 of 6 
<hooper :vertical="true" style="height: 400px" :itemsToShow="1.5" :centerMode="true">
  <slide>
    slide 1
  </slide>
  <slide>
    slide 2
  </slide>
  <slide>
    slide 3
  </slide>
  <slide>
    slide 4
  </slide>
  <slide>
    slide 5
  </slide>
  <slide>
    slide 6
  </slide>
</hooper>

Group

  • slide 2
  • slide 3
  • slide 4
  • slide 5
  • slide 6
Item 1 of 6
  • slide 3
  • slide 4
  • slide 5
  • slide 6
Item 1 of 6 
<hooper group="group1">
  <slide>
    slide 1
  </slide>
  <slide>
    slide 2
  </slide>
  <slide>
    slide 3
  </slide>
  <slide>
    slide 4
  </slide>
  <slide>
    slide 5
  </slide>
  <slide>
    slide 6
  </slide>
</hooper>

<hooper group="group1" :itemsToShow="3" :centerMode="true">
  <slide>
    slide 1
  </slide>
  <slide>
    slide 2
  </slide>
  <slide>
    slide 3
  </slide>
  <slide>
    slide 4
  </slide>
  <slide>
    slide 5
  </slide>
  <slide>
    slide 6
  </slide>

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

Custom Controllers

prev next
  • slide 2
  • slide 3
  • slide 4
  • slide 5
  • slide 6
Item 1 of 6 
<template>
  <button @click.prevent="slidePrev">prev</button>
  <input v-model="carouselData" type="number" min="0" max="5">
  <button @click.prevent="slideNext">next</button>

  <hooper ref="carousel" @slide="updateCarousel">
    <slide>
      slide 1
    </slide>
    <slide>
      slide 2
    </slide>
    <slide>
      slide 3
    </slide>
    <slide>
      slide 4
    </slide>
    <slide>
      slide 5
    </slide>
    <slide>
      slide 6
    </slide>
  </hooper>
</template>

<script>
export default {
  data () {
    return {
      carouselData: 0
    }
  },
  watch: {
    carouselData () {
      this.$refs.carousel.slideTo(this.carouselData);
    }
  },
  methods: {
    slidePrev() {
      this.$refs.carousel.slidePrev();
    },
    slideNext() {
      this.$refs.carousel.slideNext();
    },
    updateCarousel(payload) {
      this.myCarouselData = payload.currentSlide;
    }
  }
}
</script>

← API →