What are the correct steps for setting up the Vue Hooper slider?

Question

What are the correct steps for setting up the Vue Hooper slider?

After dedicating a few weeks to learning Vue.js 2 for my app, I made the decision not to utilize Bootstrap carousel due to its lack of built-in swipe functionality.

Instead, I am exploring options such as Vue.js sliders like Flickity and Hooper. Unfortunately, I have encountered an issue where the CSS is not importing, resulting in a lack of style on the slider. Here are the steps I have taken to troubleshoot this problem:

vue create slider-test

Following that, I proceeded with:

npm install hooper

I then attempted to implement the solution provided at this link.

javascript vue.js vuejs2 vue-component vue-cli

Answer 1

Answer №1

Ensure that you include the CSS file:

import 'hooper/dist/hooper.css';

In addition, there are a couple of errors in the provided installation steps:

import { Hooper, Slide } from 'hooper';         // should be 'from' not 'form'

The closing </template> tag is missing a forward slash.

Below is an updated version of their sample component:

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

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

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

Answer 2

Ensure that you include the CSS file:

import 'hooper/dist/hooper.css';

In addition, there are a couple of errors in the provided installation steps:

import { Hooper, Slide } from 'hooper';         // should be 'from' not 'form'

The closing </template> tag is missing a forward slash.

Below is an updated version of their sample component:

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

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

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

What are the correct steps for setting up the Vue Hooper slider?

Answer №1

Similar questions

A method for displaying monthly data in a single row

What is the best way to switch focus to the next input using jQuery?

Creating several contiguous nodes per data element using d3.js selections

Animating jQuery to adjust height based on a percentage

Modifying linked dropdown selections with jQuery

Transfer information from an Express route to a function exported from a Node module

AWS Cognito - ECS Task Fails to Start

Connecting Vue.JS page to my existing HTML page: A step-by-step guide

What is the best way to reference a const from a different class in React?

What are the best practices for utilizing the createPages API to generate pages through programming?

Utilize a locally stored VueJs file rather than importing it from an external source

Using V-bind to assign multiple classes has never been easier

a guide to structuring REST API requests with axios in Vue.js

The vuex module could not be located

Retrieving HTML content using scriptJS

What is the reason for the checkboxes in vuejs not being rendered with the checked attribute set

Use Selenium to close the Flipkart tab, open a pop-up window, and navigate back to the

JQuery causing array to not update properly

How to troubleshoot Props not functioning in nextjs-typescript?

Fixing Laravel 5.2 and jQuery validation issue: Accessing a property from a Non-Object