We Keep Coding

Looping menu items by dragging and scrolling

I'm trying to make a navigation menu. I want to change active menu item by dragging, scrolling and clicking. I'm using swiper library and it's very useful but I have a problem. There is no trouble with clicking or scrolling but when I drag and release the menu, looping stops at last item. I want it to keep looping until it slows down and stops. Here is my JS-fiddle example.
$(document).ready(function() {
var menu = new Swiper("#menu", {
direction: "vertical",
centeredSlides: true,
loop: true,
slideToClickedSlide: true,
slidesPerView: 7,
mousewheel: {
enabled: true,
},
freeMode: true,
freeModeSticky: true,
freeModeMomentumRatio: 0.8,
freeModeVelocityRatio: 0.8,
freeModeMinimumVelocity: 0.2,
grabCursor: true
});
});
I found this similar issue on swiper's github page but the owner says:
This is by Swiper architecture design as it doesn't do any loop or
anything else during transition.
So I need to find an external solution. And also I don't have to use swiper despite I like it. I tried to use a couple of carousel libraries but I couldn't manage to fix my problem. Any suggestion is welcome.

Swiper slideTo last slide, whilst snapping to left hand side

In Swiper demos, slides snap to the left of the screen until you get to the final slides, which are prevented from snapping to left because (I presume) Swiper doesn't want to show whitespace down the righthand side:
Slide 10 will never snap to the left side
https://swiperjs.com/demos/120-slides-per-view-auto.html
In my opinion it feels like a bug to the user, especially when you trigger slide to slide 10 and it only pops into the right side.
The workarounds I've found are to either add a blank slide, or to add margin-right to the final slide, so then slide will snap to the left side:
.swiper-slide:last-child {
margin-right: calc(100vw - 300px);
}
Add margin-right to last slide
https://codepen.io/kmturley/pen/ExxrGgw
Add blank slide at end
https://codepen.io/kmturley/pen/JjjzKrK
Use loop functionality and then hide duplicates
https://codepen.io/kmturley/pen/oNNVLxL
Is there a better or built-in way to do? this without having to use a workaround?
I want to change this spacing dynamically later and if you change it manually, then you have to call swiper.update() causing layout updates. Also my current workaround requires you to know the width of the slides, or use custom javascript to calculate the widths. So a built-in or responsive solution would be preferable!

try to add loopedSlides: 8, and remove margin-right: calc(100vw - 300px);
var container = document.getElementById('container');
var content = document.getElementById('content');
var swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView: 'auto',
autoplayDisableOnInteraction: false,
loopedSlides: 8,
});

Your current workaround probably is quite optimal and I don't htink there is any built in way to acheave what you are trying to do. However you could consider to use loop: true option and this could give a better user experience.
https://codepen.io/rentodesign/pen/gOOqNwo

Is there any way to make Swiper slide move with delay time vertically?

I'm trying to make a slide with Swiper.js and I'm trying to put some animation when I click the navigation button. So when I click the navigation button, some animation applies to the current slide and after the animation finish, I want it to move to the next or prev slide.
I've looked up Swiper API but I couldn't find the answer there and Since the slide should move vertically, it seems ever more difficult to implement this. Are there any ways to make Swiper Slide work like this?
Many thanks in advance.

To move the slider vertically you can specify direction: "vertical" in swiper init options.
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
})
To create custom transitions the below link might help.
https://medium.com/#arnost/creating-custom-slide-transitions-in-swiper-js-also-with-gsap-ac71f9badf53

Swiper and FullpageJS scrolling

I've got a little problem with those two. I'm using FullpageJS for my whole page scrolling and Swiper in one section.
My page contains 3 sections:
Intro section with some text and main menu
Products section where I've put Swiper
3.End section with contact form and footer.
FullpageJS is ofc scrolling only between these.
There's my swiper code:
let mySwiper = new Swiper('.swiper-container', {
// Optional parameters
releaseOnEdges: true,
direction: 'vertical',
loop:false,
centeredSlides: true,
breakpoints:{
768:{
direction:'horizontal',
slidesPerView: '1.1'
}
},
slidesPerView: '1.65',
mousewheel: {
invert: false,
releaseOnEdges:true,
}
});
As you can see swiper is controlled by mouse scroll.
There's my fullpageJS code:
$('#fullpage').fullpage({
controlArrows: false,
normalScrollElements: '#products',
});
"normalScrollElements" prevents fullpageJS from scrolling when #products section is on screen.
The problem that I'm facing is Swiper method 'isEnd' executes too fast. Products section contains full width and full height Swiper container with 10 slides.
What I want to do is to tell Swiper to slide to next section when I use mouse wheel after last slide. 'isEnd' method is working but not as I would like to.
It's scrolling page down in the same time when slide 9 is changing to slide 10 so I actually cant see what's there. I need to scroll back from section 3 to section 2 to see it. I want to call $.fn.fullpage.moveSectionDown();
ONLY when I try to scroll after slide 10.

All I had to do was to use "reachEnd".
on:{
reachEnd: function () {
setTimeout(function () {
$.fn.fullpage.setAllowScrolling(true);
},100)
}
}
After adding 'setTimeout', page doesn't scroll between slides 9 and 10 anymore :)

iDangero.us Swiper loop bug with previous navigation

When moving back through the loop using the "previous" navigation button the slides seem to jump from last to first. Issue seems to happen on all platforms.
Moving forward using navigation works as expected, and dragging works as expected.
I have done a fiddle based off the "Centered Slides + Auto Slides Per View" demo on the Swiper website, adding only the navigation html
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
and the options
loop: true,
loopedSlides: 10,
roundLengths: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
JSFiddle here: https://jsfiddle.net/MatraSimca/L063jo3x/17/
In the production site I'm working on I'm using fixed width slides and the issue only seems to occur when adding
roundLengths: true,
With the percentage based widths in the demo fiddle the issue occurs with or without the roundLengths option. Any pointers appreciated...

loop functionality is duplicating only DOM nodes, meaning that your duplicated slides for the loop don't have their JS code appended as well, only the rendered result.
I spent 2 days trying to figure this out, so by using the original Swiper's methods and events, I came to a semi-infinite-loop feature:
add the following to your swiper's config
loop: true,
loopedSlides: 1,
on: {
slideChange: function () {
let lastVisibleItem = this.realIndex + this.params.slidesPerView
let slidesLength = this.slides.length - 2
let lastVisibleIndex = this.realIndex + this.params.slidesPerView
// if swiper reaches the end of displayed items, goToNext redirects swiper to the start
if (lastVisibleItem > slidesLength) {
this.slideTo(1)
}
// if swiper wants to go before the first item, then forward swiper to the last item
if (lastVisibleIndex >= this.slides.length) {
this.slideTo((slidesLength - this.params.slidesPerView) + 1)
}
}
}