Examples

Default Example

  • slide 1
  • slide 2
  • slide 3
  • slide 4
  • slide 5
  • slide 6
Item 1 of 0
<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 1
  • slide 2
  • slide 3
  • slide 4
  • slide 5
  • slide 6
Item 1 of 0
<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 1
  • slide 2
  • slide 3
  • slide 4
  • slide 5
  • slide 6
Item 1 of 0
<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 1
  • slide 2
  • slide 3
  • slide 4
  • slide 5
  • slide 6
    Item 1 of 0
    <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 1
    • slide 2
    • slide 3
    • slide 4
    • slide 5
    • slide 6
    1 / 0
    Item 1 of 0
    <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 1
    • slide 2
    • slide 3
    • slide 4
    • slide 5
    • slide 6
    Item 1 of 0
    <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 1
    • slide 2
    • slide 3
    • slide 4
    • slide 5
    • slide 6
    Item 1 of 0
    <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
    Item 1 of 0
    <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 1
    • slide 2
    • slide 3
    • slide 4
    • slide 5
    • slide 6
    Item 1 of 0
    <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>
    

    Auto Playing

    • slide 1
    • slide 2
    • slide 3
    • slide 4
    • slide 5
    • slide 6
    Item 1 of 0
    <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 1
    • slide 2
    • slide 3
    • slide 4
    • slide 5
    • slide 6
    Item 1 of 0
    <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>
    

    Sync

    • slide 1
    • slide 2
    • slide 3
    • slide 4
    • slide 5
    • slide 6
    Item 1 of 0
    • slide 1
    • slide 2
    • slide 3
    • slide 4
    • slide 5
    • slide 6
      Item 1 of 0
      <hooper sync="myCarousel2">
        <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 ref="myCarousel2" :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 1
      • slide 2
      • slide 3
      • slide 4
      • slide 5
      • slide 6
      Item 1 of 0
      <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>