The looping functionality in Swiperjs is not working properly for sliders

Encountering some issues with the loop setting for swiper. The problem is that it stops sliding before entering a second loop, always halting at a certain point. I have never worked with swiper before, so I am unsure if this is the intended behavior or not. Is there a potential solution to this issue?

If you check out the codepen, you will see the problem - it stops at the blue box when swiping down, or at the green box when swiping up. Is there a way to make it continue sliding, or at least fill in the empty space at that position?

Visit the codepen here

var swiper = new Swiper('.swiper-container', {
    scrollbar: '.swiper-scrollbar',
    scrollbarHide: true,
    slidesPerView: 3,
    centeredSlides: true,
    freeMode: true,
    spaceBetween: 30,
    direction: 'vertical',
    slideToClickedSlide: true,
    loop: true
});

For this project, I am using the framework available at

Answer №1

Resolved the issue by assigning a 33% height to the slides while using slidesPerView: 'auto'

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

Why is it necessary to include 'export' when declaring a React component?

When working with React (ES6), there seems to be two variations that I encounter: class Hello extends React.Component { ... } and sometimes it looks like this: export class Hello extends React.Component { ... } I'm curious about the significance o ...

Looping through an array asynchronously and returning the result

I'm having some trouble with an asynchronous loop. Here's the code I've been working with: let items = []; data.forEach(async item => { var newItem = new Item(data); newItem.options = await this.fetchOptions(data[" ...

What is the best way to toggle the active class on a ul list?

After clicking, the active class remains on the original "li" instead of changing as it should. I've tried modifying the code but haven't been able to find a solution. Can someone please review what I might have missed? It seems like there's ...

Restrict the sorting functionality in a jQuery list

I have a project that involves scheduling individuals into different rooms, and I'm using jQuery sortables to accomplish this. The challenge I am facing is that each room has a maximum capacity limit. For example, some rooms can only hold 3 people, wh ...

Issue with box shadow appearing incorrectly as element content increases in size while the body has an image background

After applying a box shadow to the header div, I noticed that the box shadow doesn't display properly when the hidden elements within the header are revealed. <div id="header"> <div id="logo"> <a href="#"><img src="logo.png" ...

Centering the overlay gallery box in MonoBook Skin of MediaWiki using CSS

While working on transforming the MonoBook Skin into a DarkMode version, I encountered an issue with the gallery overlay css. The Overlay displays a semi-translucent white box with text at the bottom by default, overlaying the image. I made adjustments to ...

`How can I customize the appearance of individual selected <v-list-item> across various sub-groups?`

As a newcomer to Vuetify and Vue in general, I am struggling to solve a specific issue. I need to create multiple sub-groups where only one option can be selected within each "parent" list. Consider an array of cats: options:["Crookshanks", "Garfield", " ...

Matching an element that contains a specific string in JS/CSS

I'm currently faced with an HTML file that's being generated by an outdated system, making it tricky for me to control the code generation process. The structure of the HTML code is as follows: <table cellpadding=10> <tr> ...

"Exploring the power of Angular's translation capabilities paired with

I'm currently working on translating a multistep form using Angular Translate and routing with ui-router. Everything seems to be functioning properly except for one issue. Below is the snippet of my code: Translation Setup: .config(function ($t ...

Guide on efficiently navigating a website: utilize selenium python to effortlessly hover the mouse over a sub menu and click on desired options

Seeking to automate a web application called "Maximo" using Selenium in Python, I've successfully managed to log in with credentials and click on buttons. However, I'm stumped on how to hover the mouse over a submenu and perform a click action. ...

Notification prompt when removing items

I currently have a table set up with a delete <a> tag that allows users to delete data. I would like to add a confirmation message asking the user if they are sure they want to delete before proceeding. I attempted to achieve this using JavaScript bu ...

leaving code block using Express and Node

My code is displayed below: // Implement the following operations on routes ending with "users" router.route('/users') .post(function(req, res, next) { var user = new User(); user.username = req.body.username; user.p ...

Clicking on Only One Card in Material UI React

I've encountered an issue with my code: const useStyles = makeStyles({ card: { maxWidth: 345, }, media: { height: 140, }, }); export default function AlbumCard(props) { const classes = useStyles(); let ...

How can I attach a jQuery plugin to a textbox with a changing class name?

I have a function that converts a regular text field into a datepicker: <input type="text" class="datepicker form-control" name="text-150" > var DatePicker = function () { if ($(".datepicker").length === 0) { return; } $(".datepic ...

Performing a JSON POST Request: Steps for sending a POST request with JSON data format

I need to send the following data: { "contactsync": { "rev":4, "contacts":[ { "fields": [ { "value": { ...

JS faces a challenge when it comes to functional programming

Experimenting with bind, call, and apply, I am exploring updating object properties by passing function return values to object methods. This updating is triggered by the window resize event. var el = document.getElementById('someElement'); ...

What is the Typescript definition of a module that acts as a function and includes namespaces?

I'm currently working on creating a *.d.ts file for the react-grid-layout library. The library's index.js file reveals that it exports a function - ReactGridLayout, which is a subclass of React.Component: // react-grid-layout/index.js module.exp ...

Troubleshooting Challenges with JavaScript DOM Manipulation

I am facing an issue with a table where I need the first column to remain fixed when scrolling horizontally. The code snippet below works perfectly for the first column of td's, but fails to work for the tr's. Despite checking the code thoroughly ...

Passing an extra variable to the callback function in AJAX and saving the XMLHttpRequest.response as a variable

Attempting to read a local file on the server using the standard loadDoc(url, cfunc) function, my goal is to: 1) Search for a specific string in the file (getLine()); 2) If possible, save that line to a variable. For point 1, I provide a string to the c ...

What are the implications of storing data on the browser in the form of a JavaScript array?

Below is the code I have written: var back_arr = [], forward_arr = [], i = 1; $('button').on('click', function(){ var new_value = $('input').val(), old_value = $('.content').html(); i = i + 1; ...