Top tips for resolving Swiper Js initial loading issues in a Carousel!

After implementing swiper js from , I encountered an issue. The initial loading displays only a single carousel item before the rest start appearing, creating a glitchy effect.

To clarify, when the website is loaded, only the first item is visible in the carousel (highlighted in the red box) before the layout transitions to show all four items as depicted in the image.

I discovered that setting max-width:25%; resolves this particular issue. However, if there are two items per view in the carousel, this CSS code sets the width to 25% for each item.

Is there a better solution to this problem? Any assistance would be greatly appreciated.

https://i.sstatic.net/sDGG9.jpg

javascriptcsswordpressswiper.js

Answer №1

Move the initialization function call to the moment when all images have finished downloading.

$( window ).on("load", function() {
    var mySwiper = new Swiper ('.swiper-container', {
      // ...
    })
});

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

When elements are arranged side by side without using floats, the alignment at the top is not correct

I am having trouble aligning multiple divs next to each other using inline-flex. They are not lining up properly on top (refer to the screenshot). Interestingly, if I remove the svg, the divs align correctly. ...

htmlcsscss-position

Issues with passing parameters in JavaScript

I am facing an issue while passing multiple variables from a PHP page to a JavaScript function. Only the first parameter seems to be passed successfully. In the PHP code, the script is being called like this: <? $sdate = 0; $edate = 2; ?> <scrip ...

javascriptphpeditablegrid

Interactive table with Draggable feature supported by Bootstrap Vue

After tirelessly searching for a solution to drag and drop rows on a Bootstrap Vue table, I finally stumbled upon a functional version here: Codepen I attempted to integrate this code into my own table: Template: <b-table v-sortable="sortableOptions ...

javascriptvue.jsdraggablebootstrap-vuebuefy

Is there a way to access data from a different cart template containing personalized values on Shopify?

After analyzing the values required from product.json, I realized that the current method is not efficient. The client-side ends up processing unnecessary information and every new product or option adds to the request load. Below is the script responsible ...

javascriptarraysjsonajaxshopify

Ways to protect against form hacking on the client-side

As I contemplate the benefits and drawbacks of utilizing frameworks like VueJS, a question arises that transcends my current coding concerns. Specifically, should form validation be executed on the client side or through server-side processing by a control ...

javascriptvue.jssecurityclient-side

Diverse positioning across various browsers

I have a navigation menu with alternating divs - one containing a menu link and the other a 'menu separator' div with a 2px wide 'separator bar' image. The width of the separator divs is set to 24px to create proper separations. For so ...

jquerycssbrowserdrop-down-menualignment

After reaching the conclusion, the code restarts

Any ideas on how to reset this code every 10-20 seconds? I'm struggling to find a solution! I'm new to coding, so any assistance would be greatly appreciated. Here's the code: var items = document.getElementsByClassName('btn-primary n ...

javascript

When a button is undersized, the click event may not register

In my angular application, I have developed a directive for a tinyMCE editor. Upon setup, I have implemented two handlers: one for the blur event to hide the toolbar and another for the click event to show it. Additionally, I have created another directive ...

csstinymce

Unique Soundcloud visualization using webglonDeletegist

After going through the SoundCloud documentation, I have been trying to figure out how to create a visualizer for SoundCloud tracks. The challenge is that in order to achieve this effectively, I need access to the source waveform. I suspect that direct acc ...

javascripthtmlwebglsoundcloud

Troubleshooting: Issues with Jquery's has, find, contains functions

As I check whether an element contains another element, I've previously utilized the jquery element.has(secondElement) function. In my angularjs project, I make use of jquery within a directive where I transclude elements through markup using ng-tran ...

javascriptjqueryangularjs

Using JavaScript to transform radio buttons into checkboxes

I have a grouping of radio buttons and a checkbox displayed on the page as shown below <html> <head> <title>Languages</title> <script type="text/javascript"> </script> </head> <body> <spa ...

javascriptcheckboxradio-button

The CSS properties intended for ion-button elements are not taking effect

I'm attempting to set a background color when a ion-button is clicked or maintain the ion-ripple effect after it has filled the button in Ionic 4. I experimented with applying custom CSS states in global.scss, but encountered issues where the active ...

cssangularionic-frameworkionic4

Tips for retrieving data from a database with just one key press

There is a text field that triggers a JavaScript function when a key is pressed. <input type="text" class="text" id="txt_sh_vid" onKeyPress="vhc_record()" maxlength="4"> The function takes the input from the text field and searches for a result in t ...

phpjavascripthtmlajax

Understanding Arrays in Angular JSIn this article, we

I am new to working with Angular JS. Currently, I am populating an array and attempting to showcase its contents on the HTML page using ng-repeat. $scope.groupedMedia = []; // Elements are being added through a for loop. $scope.groupedMedia[year].push(r ...

javascripthtmlarraysangularjs

Utilizing Angular 9's inherent Ng directives to validate input components within child elements

In my current setup, I have a text control input component that serves as the input field for my form. This component is reused for various types of input data such as Name, Email, Password, etc. The component has been configured to accept properties like ...

javascripthtmlangulartypescriptforms

Utilizing the box-shadow feature on Bootstrap 4's card element

I'm having an issue with applying a simple shadow to a cards component. The shadow appears mirrored and out of place. My suspicion is that it might be related to the margin-bottom property, but I'm unable to pinpoint the exact reason behind this ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-cards

Is It Possible to Align Text Horizontally within a Box?

Hey everyone! I'm trying to figure out how to display two elements, "1" and "new referral," side by side without the new referral having a green background. Any help would be greatly appreciated. I've shared my HTML and CSS code snippets below. I ...

htmlcss

What is the best way to search for a specific item in Express.js?

I recently got the Leaderboard API issue fixed, but now I'm encountering a new problem with express Querying. Specifically, I'm attempting to search for a specific Discord ID using quick.db as my database. I've included an excerpt of my expr ...

javascriptarraysjsonexpressdiscord.js

The function is not defined after the button is clicked when an if-else statement is added to the

Hello there, I am currently working on a form to submit data to the database using ajax and CodeIgniter. The form seems to work fine for inserting data, but it lacks validation to check whether the fields are empty or not. I am attempting to add an if-else ...

javascriptjqueryajaxcodeigniter

What is the best way to transfer a JSON object from Java to JavaScript?

I've been struggling to pass data from my Spring controller to JavaScript, but I haven't had any success so far. Would using ajax be the best approach for this task? Can you provide me with some hints on how to achieve this effectively? In my co ...

javajavascriptjsonspring