When transitioning in Vue, pagination bullets shift to the left upon changing routes

While using Vue 3 and swiper.js, I encountered an issue where the pagination bullets move to the left when the route changes (component unmounted). It appears that the styling for the bullets and active button also disappear. I have created a reproduction to demonstrate the problem, although I didn't focus on styling. Simply switch between router-links on the nav panel to see the bug. This issue is only noticeable when using vue-transition due to the delay that allows you to observe it.

If you would like to view the reproduction, please click on the following link: https://stackblitz.com/edit/vitejs-vite-c5x8vm?file=src%2FApp.vue,src%2Fmain.js

I am seeking a potential solution to resolve this problem.

javascriptvue.jsvuejs3swiper.js

Answer №1

By including this snippet in the style.css file, it appears to solve the issue of bullets moving erratically during transition:

.swiper-pagination {
  width: 100%;
}

.swiper-pagination-bullet {
  margin: 0 0.25rem 0.5rem;
}

View the fix here.

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

Displaying svg files conditionally in a react native application

I have developed an app specifically for trading dogs. Each dog breed in my app is associated with its own unique svg file, which are all stored in the assets folder (approximately 150 svg files in total). When retrieving post data from the backend, I re ...

javascriptreactjstypescriptreact-nativesvg

What is the process for incorporating items from Slick Grid into a Multi Select TextBox?

Exploring the world of Slick Grid for the first time. Here is where I define my variables in JavaScript. var grid; var printPlugin; var dataView; var data = []; var selectdItems = []; var columns = [ { id: "Id", name: "Id", field: "Id", sortable: t ...

javascriptjqueryajaxslickgrid

The battle between Iteration and Recursion: Determining the position of a point in a sequence based

One of the challenges I'm facing involves a recursive function that takes a point labeled {x,y} and then calculates the next point in the sequence, recursively. The function in question has the following structure: var DECAY = 0.75; var LENGTH = 150 ...

javascriptmathrecursioniterationsequence

(Vue.js) The icon fails to be applied

<link rel="icon" href="/static/icons/apple-touch-icon.png" type="image/x-icon"> <link rel="icon" type="image/png" sizes="32x32" href="/static/icons/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="16x16" href="/static/ ...

htmlvue.jsicons

Utilize jQuery to wrap text within <b> tags and separate them with <br> tags

Upon receiving output in html string format from services, I am presented with the following: "<html>↵<h1>↵Example : ↵<br>Explanation↵</h1>↵<hr>↵<b>key1 : ABCD <br>key2 : 2016-10-18-18-38-29<br> ...

javascriptjqueryhtmltext

Steps for accessing the "this" keyword within the parent function

Struggling with referencing `this` within a parent function while building a basic tab system using AngularJS. It seems like I may not have a solid grasp on the fundamentals, so any guidance would be appreciated: JavaScript: $scope.tabs = { _this: th ...

javascriptangularjs

Am I utilizing Angular's signals correctly? And what is the purpose of still requiring ChangeDetectorRef.detectChanges()?

I have been experimenting with signals and I am questioning whether the current use case would be more beneficial without using Signals and instead just having a "normal" class member swiper?: Swiper: @Component({ selector: '[app-test]', stan ...

angulartypescriptsignalsswiper.jsangular-signals

Click the button in Javascript to add new content

I am currently experimenting with JavaScript to dynamically add new content upon clicking a button. Although I have successfully implemented the JavaScript code to work when the button is clicked once, I would like it to produce a new 'hello world&ap ...

javascripthtml

Incorporate personalized buttons into the header navigation for each view using VueJS

In my VueJS project, I attempted to include custom buttons in the sub navigation menu which could be customized for each view. Initially, I tried adding a simple property to the main data element, but that didn't yield the desired results. Then, I cam ...

javascriptvue.jsvuejs2core-ui

Angular JS is experiencing issues with two modules not functioning properly on a single page

Angular JS is a new technology for me. I have two modules, first2a and first22. Each module contains a controller named model1 and model2. Here is the HTML code: <!DOCTYPE html> <html > <head> <link rel="icon" ...

javascriptangularjs

Display a list of records retrieved from a Firebase query using ngFor to iterate through each instance

I'm currently using firebase and angular to work on a billing list project. The list contains data showing information for a specific month, you can refer to the imagehttps://i.stack.imgur.com/ZR4BE.png While querying the list was smooth, I encounte ...

javascriptangularfirebase

jquery add to table id, not to a table within

Having trouble adding a table row to a specific table ID without it appending to other tables with different IDs nested inside. I've searched for a solution but can't seem to find one. Can someone help me figure out what I'm doing wrong? Her ...

javascriptjqueryhtmlappend

Having trouble implementing new controllers in AngularJS UI-Router for nested states?

I'm currently facing an issue with nested states in the ui-router. My task involves rendering a page that includes regions, countries, and individuals per country. In the index.html file, there are three regions represented as links: EMEA, APAC, and ...

javascriptphpangularjsangular-ui-router

Retrieving data from JavaScript global variables within an HTML document using PhantomJS

Recently, I encountered an interesting piece of HTML code that sparked my curiosity: <html> <body> <script> var foo = { bar: [] }; </script> </body> </html> This led me to wonder how I c ...

javascriptjquerynode.jsweb-scrapingphantomjs

Creating a stunning image carousel in Vue by integrating a photo API: step-by-step guide

Trying to figure out how to create an image carousel in Vue using photos from an API. Currently able to display the photos using: <section class="images"> <img v-for="image in images" :key="image.id":src="image.assets.large.url"> &l ...

javascriptvue.jsbootstrap-4

How to effectively handle asynchronous calls in Node.js using readdir and stat functions

My current project involves implementing a post method on the server side to fetch all files within a specified directory (non-recursively). Below is my code snippet. I am encountering challenges in sending back the response (res.json(pathContent);) with ...

javascriptnode.jsexpressasynchronous

Is it possible for you to enter "1.00" instead of just 1 when using the input type as number?

I am using Polymer paper-input and I would like to ensure that my input with type "number" always displays 2 decimal points, even when it is a whole number. Instead of just displaying as "1", I want it to be shown as "1.00" at all times. I have tried sett ...

javascripthtmlpolymer-1.0

Using jQuery to manage multiple page requests on a single page

In my current project using Codeigniter, I encountered a challenge of loading multiple paginations on one page. After exploring various forums and websites, I decided to implement multiple methods and views to achieve this using jQuery. The code snippet I ...

phpjavascriptjquerycodeigniter

Possible solution for resolving the issue: How to address the error message stating that "'v-model' is not suitable for use on a prop as local prop bindings are not writable"?

I am attempting to implement a dropdown sorting feature and encountered the following error: VueCompilerError: v-model cannot be used on a prop, because local prop bindings are not writable. Use a v-bind binding combined with a v-on listener that emits u ...

vue.jsfrontendvue-componentvuejs3

Introducing an alternative solution for handling tasks linked to the completion of CSS3 animations

In order to incorporate smooth CSS3 animations into my website, I have implemented the animate.css library created by Dan Eden. One particular scenario involves a loading screen that features a fade-out animation. It is crucial for this animation to comple ...

javascriptjquerycsscss-animations