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 :)
Related
I have standard swiper with slidesperview:3
var videoSwiper = new Swiper('.video-swiper', {
slidesPerView: 3,
spaceBetween: 30,
mousewheel: true,
});
When I scroll a mouse it goes one more slides forward, but I need the next three slides forward.
I don't know how your HTML looks like, but here's an working example
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
I have an issue with Wow.js and Fullpage.js. I've managed to get them working together, here is the script:
$(document).ready(function() {
$('#fullpage').fullpage({
'navigation': true,
'navigationPosition': 'right',
scrollBar: true,
onLeave: function() {
new WOW().init();
}
});
//methods
$.fn.fullpage.setAllowScrolling(true);
});
<img class="portfolio-image wow animated fadeInLeft" data-wow-iteration="1">
I have the data iteration set to 1, which prevents it from repeating.
Here is the site where you can see the effect in action
lancewalkerdesign.com
However, when i scroll into one of my viewports (each section on my front page is a full screen section with ul nav dots.) the animation fires. When I scroll down, the animation fires AGAIN as the scroller scrolls to the next section.
I would prefer to only see this animation once upon entering the viewport, whether scrolling down or up into it, not again as it's leaving.
Any ideas?
Why do you initialise wow in the onLeave callback?
You probably only have to do it once on page load.
Try initialising it only once in the afterRender callback:
$(document).ready(function() {
$('#fullpage').fullpage({
navigation: true,
navigationPosition: 'right',
scrollBar: true,
afterRender: function() {
new WOW().init();
}
});
//methods
$.fn.fullpage.setAllowScrolling(true);
});
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)
}
}
}
I would like to ash here a question, which I asking already in the developers forum of swiper, too. So don't be confused. If a solution is/was found, I will close/mark both.
At the moment I want for a project a horizontal scrolling sidebar and a vertical scrolling footer. (Swiper based)
But see self what happens if you switch from horizontal (1) footer to a vertical (2) one.
Video 1 (direction both horizontal - not wanted)
Video 2 (footer direction vertical, wanted! - not works)
As you can see, on the simplified example (Video 2):
If I use direction:vertical on the second swiper-container it breaks the result. Where the HEIGHT of "swiper-slide" should be 226px, appears now a HEIGHT of 2408px and a MARGIN-BOTTOM of 100px.
I really can't understand what's going wrong here.
ConfInit
var swiper = [];
$('.swiper-container').each(function(index){
var $el = $(this);
var sParams = [{
speed: 400,
spaceBetween: 100,
allowSwipeToNext: false, // for event controlled swipes
allowSwipeToPrev: false // for event controlled swipes
},
{
speed: 400,
spaceBetween: 100,
allowSwipeToNext: false, // for event controlled swipes
allowSwipeToPrev: false, // for event controlled swipes
direction: 'vertical'
}
];
I have faced the same issue, solved by adding height: 100vh declaration to swiper container.
Finding
height property is must
NOTE: % does not work