How to make responsive infinity slider with Vue.js

25/09/2019

JavaScript, Vue.js

I am going to write how to set up a responsive infinity slider for web project with Vue.js. It’s pretty simple and straight forward — even for a Vue.js beginner like me. 

The solution will be like this:

See the Pen Responsive slider with Hooper (Vue.js) by miyazakimaiko (@miyazakimaiko) on CodePen.

Let’s get started!

Installation

Firstly, we are going to install a Vue.js carousel component, Hooper.

Include links and scripts to install:

[ CSS ]

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hooper@0.2.1/dist/hooper.css">

[ JavaScript ]

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hooper@0.2.1/dist/hooper.min.js"></script>

OR

Install it using yarn or npm:

npm install hooper
# or use yarn
yarn add hooper

HTML setting example

  <template id="app">
    <hooper :settings="hooperSettings">
      <slide>
        <div class="images img1">
          <h2>Slide 1</h2>
        </div>
      </slide>
      <slide>          
        <div class="images img2">
          <h2>Slide 2</h2>
        </div> 
      </slide>
	:
	:
     </hooper>
  </template>

CSS setting example

.images, .hooper {
  height: 70vh;
}

You only needy to set up additional CSS for contents of <slide> tags, and height of .hooper which is set to 200px in <hooper> tag by hooper.css.

Vue.js script setting

without JavaScript module bundler

<script>
    new Vue({
        el: "#app",
        components: {
            Hooper: window.Hooper.Hooper,
            Slide: window.Hooper.Slide
        }
    })
</script>

With JavaScript module bundler

<script>
import { Hooper, Slide } from 'hooper';
import 'hooper/dist/hooper.css';

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

Configuring carousel

<script>
    new Vue({
        el: "#app",
        components: {
            Hooper: window.Hooper.Hooper,
            Slide: window.Hooper.Slide
        },
        data() {
            return {
                hooperSettings: {
                    infiniteScroll: true,
                    centerMode: true,
                    autoPlay: true,
                    playSpeed: 3500,
                    breakpoints: {
                        2400: { // 2400px ~
                            itemsToShow: 5
                        },
                        1800: { // 1800px ~ 2400px
                            itemsToShow: 4
                        },
                        1500: { // 1500px ~ 1800px
                            itemsToShow: 3
                        },
                        1100: { // 1100px ~ 1500px
                            itemsToShow: 2.5
                        },
                        600: { // 600px ~ 1100px
                            itemsToShow: 1.5
                        },
                        0: { // 0px ~ 600px
                            itemsToShow: 1
                        }
                    }
                }   
            }
        }
    })
    </script>

Now you can see your slider working on your page.

Happy coding!