swiper | modern mobile touch slider with hardware | Carousel library

As the title says, I'm trying to use swiperjs with Vue 2. I've used the API from swiper and another library "vue-awesome-swiper" to try and get it working. I get to the point with both approaches where everything appears functional but it's just the navigation buttons that aren't working and touch swiping is also disfuncitonal.

In each of the following approaches, I'm getting a seemingly perfect swiper but navigation is not working in either. I'm using vue 2.6 and swiper 6.7.

Here's what I have using vue-awesome-swiper:

I'm trying to create a dynamic swiper that is able to automatically update itself whenever I make changes in the database. The problem that I've encountered right now is that I've got 6 pictures and description in the swiper but all of them only retrieve from the first field from my database. Old screenshot of the page. As you can see from the first screenshot I am able to retrieve the data which is the picture and the description from the database, but only repeatingly retrieve from the first field of the database for all the 6 results. Able to show it in the php area. Only the first slider is working when i called the function in html. Any help would be appreciated, thank you.

I am using the splitting.js javascript library in my Rails 6 project. When I try to load the page I get "Uncaught TypeError: Splitting is not a function" in the console.

I have installed the javascript library using Yarn:

yarn add splitting

Splitting() is called with other Javascript in scripts.js which is required in my applicaiton.js file. I have configured my application.js file in a number of ways to try to fix the issue but to no avail. Here is my current iteration of this file (entire file included in case there are other interactions to consider):

I have a slider with various elements in it and when clicking on a button on a particular element will open a pop-up contain specific details to that selected element. Now my slider is becoming really long and I have been wondering if I can use either JavaScript or anything to make my code look nice and remove the repeating pattern of my code Below is my code:

Hello I have been working on a project lately where I have a slider with various elements in it and when clicking on the button 'Learn more' on a particular slider element will open a pop-up modal contain specific details to that selected slider element. Now my slider is becoming really long and I am having numerous slides and modal. The only element that is shared between my slide and modal are the title and the image location and I have been wondering if I can use either JavaScript or anything to make my code look nice and remove the repeating pattern of my code Below is my code:

I've made this horizontal swiper, and it scrolls left and right just fine, but when I try to drag left and right it does nothing. I want to be able to scroll left and right and drag left and right.

If I scroll left or right, then move my cursor, it scrolls all the way to the left.

How can I listen for click and mouseover events when one of events are detected run a function?

Hello I am creating a Login / Registration system on the same page using PHP and MySQl I am having trouble with the post method and action as it is on the same page. Someone knows how I can resolve this problem. Below is my code for the login and registration/ signup system the page is separated with a slider using JavaScript, my problem is that I cannot use the Post method and action to save the form in my DB

I try to convert a HTML template (Bootstrap 5) to Gatsby template. CSS and pages working expected but in HTML template there is a main.js file and it need to load after page rendered.

I modify the main.js file like that;