The Nuxt3 carousel plugin

After installing the Nuxt3 swiper module, I successfully created a carousel. Now, I am facing an issue with adding navigation using buttons or arrows. I tried using the useSwiper() composable but it seems to be undefined.

Can anyone help me identify the problem or suggest a different approach to creating a carousel?

Here is my controller code: View image here

Answer №1

Did you remember to add swiper to the modules array in your nuxt.config file after installing it?

Ensure it looks like this:

export default defineNuxtConfig({
  modules: ['nuxt-swiper']
})

It's a good idea to check out the Nuxt-Swiper module page for more information. There's a detailed section on getting started that may be helpful. They even have a functional live demo showcasing the composable you're trying to implement.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

passing data between functions using a shared global variable within an angular controller

Having some difficulty passing a value from one function to another within an Angular controller. I have an event: onTimeRangeSelected: function (args) { $scope.dayPilotCal.clearSelection(); $scope.createNewEventModalWindow(args); ...

Learning to use jQuery to search and populate the contents of div elements with object data

I'm facing a challenge with inserting the data received from an ajax call. In my HTML code, I have multiple divs with unique IDs: <div id ="first_name"> content </div> <div id ="last_name"> content </div> <div id ="email"& ...

The onClick event cannot be triggered within a div that is generated dynamically

I am having an issue with a jquery code that dynamically generates a div. The problem I'm facing is that the onclick function for the anchor tag is not calling the required function. Below is the code snippet: $("#new").append(' <ul cla ...

The data does not seem to be getting sent by the res.send() method in

I'm having trouble with the GET request not returning the data I expect. Here is my GET request code: router.get('/', (req, res) => { res.set('Content-Type', 'text/html') res.status(200).send(Buffer.from('<p& ...

The requirement for my object is to have an array of nested objects. However, instead of adding the inner objects to the array, it mistakenly creates new outer objects

I am struggling to form an array of objects with the given structure obj { name : name, items : [] } In this setup, items should be an array consisting of item objects like so item { itemName : itemName, price : price } However, when I attempt to insert ...

I must modify the initial statement to appear in bold from the paragraph with the use of JavaScript and CSS

Mr. XYZ and Mrs. ABC are known for their integrity. They own a stylish car. In the next paragraph, I would like to emphasize the first sentence by making it bold, We admire our exceptional leader J.K.L. He shows great potential. In this section, I wan ...

What is preventing d3.json from including cookies in the request?

I'm delving into the world of ajax requests with d3.js (v5) and I'm facing a little hiccup. Here's my code snippet: d3.json(uri).then(data =>console.log(data)); When I tried this in an app utilizing cookie authentication, I consistently ...

The 'import type' declaration cannot be parsed by the Babel parser

Whenever I attempt to utilize parser.parse("import type {Element} from 'react-devtools-shared/src/frontend/types';", {sourceType: "unambiguous"}); for parsing the statement, I come across an error stating Unexpected token, exp ...

There was an issue locating the moment/ts3.1-typings/moment module

Encountering an ERROR after updating Angular version: Could not resolve moment/ts3.1-typings/moment in node_modules/ngx-daterangepicker-material/ngx-daterangepicker-material.d.ts ...

The Impact of Ajax on Online Search Algorithms

There's a website that dynamically loads content at . An example page from the site can be found at: . The entire content on this page is generated using a cURL parser script. <?php $___notjson=1; ini_set('display_errors', 1); header (&a ...

Maintaining Changes in Javascript and CSS

I have created a header that can slide in and out of view with a toggle function. However, I want the header to be in the down position by default, without requiring users to click the toggle every time a new page loads. I have limited knowledge of JavaScr ...

Communicate with the server by uploading a text file containing HTML5 code and utilizing Jquery/Javascript

Is it feasible to utilize Javascript/JQuery and HTML5 to write data to a server and save it as a text file? I am currently working on a game using JavaScript and JQuery, and I need to store the scores without relying on any server-side language like PHP ...

Transfer photos and videos to an external server using Javascript with Meteor framework

I currently have a meteor application hosted on Digital Ocean. I am considering setting up a dedicated server to store all images and videos separately from the site itself. Whenever a user uploads new media, it will be saved to this separate server. Does ...

Vue.js caution about "Unnecessary non-emits event listeners" alert for events within RouterView

Is there a way for me to trigger events from my child components and have them reach the top-level App.vue component even though I am using a RouterView to render the child components in the App.vue template? <template> <Navbar /> <c ...

Vuetify Upload Files

Recently, I implemented a form containing the Vuetify component v-file-input: <v-file-input chips multiple label="File(s)" v-model="file.files"></v-file-input> The structure of my data object is as follows: data: () => ({ file: { ...

The icon's transition to text appears to be encountering challenges

I'm having an issue with adding a fade effect to the text on my icons in the navigation bar. I've almost got it working, but it keeps displaying "home" for each icon instead of the correct text. Can anyone help me fix this? Live Example https:// ...

The express response fails to include the HTML attribute value when adding to the href attribute of an

When using my Nodejs script to send an express response, I encounter a problem. Even though I set the href values of anchor tags in the HTML response, they are not visible on the client side. However, I can see them in the innerHTML of the tag. The issue ...

Learn how to execute shell commands on a Linux server from a Node.js application by utilizing Socket.io for establishing a connection. This includes tasks such as running "ls -ltr", changing

After successfully establishing a connection with my Linux server, I aim to execute shell commands for automation purposes such as changing directories and creating new folders. The main objective is to connect to the Linux server through a webpage, wher ...

There seems to be an issue with Affix functionality in Bootstrap 4 (alpha version)

As detailed in the Bootstrap 3 documentation, I have included the following attributes in a navbar: <nav class="navbar no-margin-bottom" data-spy="affix" data-offset-top="90" > ... </nav> Unfortunately, when scrolling down the page with Boots ...

Dynamic Node.js server constantly updating

My goal is to create a dynamic Node.js Express server that updates live, possibly by creating a specific route like /update to load a new configuration file. My concern is that the server could be in any state when the update occurs. It's possible tha ...