I have this function with swiper. I would like know how to use this function to scroll back to the top of the page of the next slide. so far it only scrolls to the top of the next slide when I use onAutoplay callback which I do not want. My slides has different text and images which scrolls that is why I want to return to the top of the next or previous slide when I swipe left or right. Please provide me with an example if possible how to improve my snippet. Thank you.
$$(document).on('pageInit', function (e) {
var mySwiper = myApp.swiper('.swiper-container',{
pagination: '.swiper-pagination',
paginationHide: false,
onSlideChangeEnd: function(swiper) {
$(".page-content").animate({
scrollTop: 0
}, 'slow');
}
});
})
Change your code to this:
var mySwiper = new Swiper('.swiper-container');
mySwiper.on('slideChangeEnd',function(){ alert('sample alert');});
More information about the swiper API:
Swiper API documentation
Related
Is there a way to preload the next or two next images with a swiper.js while lazyloading is active?
The slider contains 100 images which we don’t want to load while the page opens for obvious reasons but we want the first and the two next images to be loaded to have them present within the next slide while the animation runs.
any ideas?
I am looking for the same thing, and looking at the swiperJS documentation, I stumbled upon the API settings for lazyloading.
Looks like maybe loadPrevNext and loadPrevNextAmount might help us out.
loadPrevNext (boolean, default:false)
Set to true to enable lazy loading for the closest slides images (for previous and next slide images)
(I think they actually mean preload next and previous image, if I check other examples and demo's)
loadPrevNextAmount (number, default: 1)
Amount of next/prev slides to preload lazy images in. Can't be less than slidesPerView
So:
const swiper = new Swiper('.swiper-container', {
lazy: {
loadPrevNext: true, // pre-loads the next image to avoid showing a loading placeholder if possible
loadPrevNextAmount: 2 //or, if you wish, preload the next 2 images
},
});
Since version 9, Swiper does not have a lazy loading API and instead leverages browsers' native lazy loading functionality:
Since version 9 Swiper doesn't have specifid lazy loading API, as it relies on native browser lazy loading feature. To use lazy loading, we just need to set loading="lazy" on images and add preloader element
loadPrevNextAmount is gone from the API. One way to achieve similar behavior is to use the slideChange event to force the next N images to load by setting their loading attribute to eager (assuming they were originally set as lazy and each slide element has a single image you want to preload):
const swiper = new Swiper('.swiper', { ... });
const preloadNext = (n) => {
swiper
.slides
.slice(swiper.activeIndex, swiper.activeIndex + n + 1)
.map(slide => slide.querySelector('img'))
.forEach(s => s.setAttribute('loading', 'eager'));
};
// preload the next 2 images immediately
preloadNext(2);
// preload the next 2 images after changing slides
swiper.on('slideChange', () => preloadNext(2));
Another possible optimization is to wait for the page to fully load, which includes the first image in the swiper, and only then preload the following images. This avoids loading the first 3 images at the same time in order to display the first image faster:
let swiper;
const preloadNext = (n) => {
swiper
.slides
.slice(swiper.activeIndex, swiper.activeIndex + n + 1)
.map(slide => slide.querySelector('img'))
.forEach(s => s.setAttribute('loading', 'eager'));
};
document.addEventListener('DOMContentLoaded', () => {
swiper = new Swiper('.swiper', { ... });
swiper.on('slideChange', () => preloadNext(2));
});
window.addEventListener('load', () => {
preloadNext(2);
});
I have Vue component that greater than browser size. So browser add to bottom of it scrollbar. I need second one at top. I do not have any code to show, because I do not know how to do it. I have googled and found only pure\jquery solutions, but I do not know how to integrate them in Vue project.
The pure JS topic https://stackoverflow.com/a/50776007/1432751
https://jsfiddle.net/bqsw8pt9/2/
new Vue({
el: '#app',
data: {
message: 'Very loooooooooooooooooooooooooooooooooooooooong teeeeeeeeeeeeeeeeeeeeeeeeeexttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt'
}
})
I tried to add pure js in mount section, but got next error:
To achieve this:
Create two elements with the overflow property, both elements should be of the same width so the scroll behaviour will be uniform.
Add a scroll handler to the first element that scrolls the second element to its current position i.e. when element 1 scrolls to 20, scroll element 2 to 20 also.
Add a scroll handler to the second element, which will scroll the first element to its current position.
To ensure that both elements aren't trying to update each other at the same instance, maintain a scroll state that is updated when either of them fires the scroll handler.
Please find an updated version of your fiddle: link to fiddle
new Vue({
el: '#app',
data: {
message: 'Very loooooooooooooooooooooooooooooooooooooooong teeeeeeeeeeeeeeeeeeeeeeeeeexttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt',
scrolling: false
},
methods: {
handleScroll1: function () {
if(this.scrolling) {
this.scrolling = false;
return;
}
this.scrolling = true;
console.log(this.scrolling, this.$refs["wrapper1"].scrollLeft);
this.$refs["wrapper2"].scrollLeft = this.$refs["wrapper1"].scrollLeft;
},
handleScroll2: function () {
if(this.scrolling) {
this.scrolling = false;
return;
}
this.scrolling = true;
console.log(this.scrolling, this.$refs["wrapper2"].scrollLeft);
this.$refs["wrapper1"].scrollLeft = this.$refs["wrapper2"].scrollLeft;
}
}
})
As a side note i want to suggest that you learn Vanilla JS, it'll give you a better grasp of javascript, and also make it easy for you to understand any piece of code in whatever framework so you can always adapt it to your needs.
This answer is based on a similar one by StanleyH and HoldOffHunger
I noticed when using Owl Carousel 2, while slide the item in mobile viewing, the browser also can be move up and down. Try to disabling the scroll function when trigger the Owl Carousel 2 prev and next function in mobile but it still doesn't work.
$('.owl-carousel').owlCarousel({
loop:true,
margin:5,
nav:true,
items:2,
});
// $('.owl-carousel').bind("mousewheel", function() {return false;});
$('.owl-carousel').bind('touchmove', function(e){e.stopPropagation(); alert('allow scroll');});
Appreciated the answer from expert out here.
Thank you.
I made this work with the help of OwlCarousel2 events.
There are 2 events we can use together for this purpose:
drag.owl.carousel fires when user start to drag
dragged.owl.carousel fires when dragging finished
And this make it work like how we want it:
var owl = $('.owl-carousel');
owl.owlCarousel({
// your options
});
owl.on('drag.owl.carousel', function(event) {
$('body').css('overflow', 'hidden');
});
owl.on('dragged.owl.carousel', function(event) {
$('body').css('overflow', 'auto');
});
So; it use css overflow to disable scrolling when dragging started and enables it back when it finished.
This works on iOS & VueJS.
var owl = $('.owl-carousel');
owl.owlCarousel({
// your options
})
// disable scroll
owl.on('drag.owl.carousel', function(event) {
document.ontouchmove = function (e) {
e.preventDefault()
}
})
// enable scroll
owl.on('dragged.owl.carousel', function(event) {
document.ontouchmove = function (e) {
return true
}
})
look for the below piece of code in custom.js file of your project
Owl.Defaults = {
items: 3,
loop: false,
center: false,
rewind: false,
mouseDrag: true,
touchDrag: true,}
change the things to below:-
touchDrag:false,
and owl-carousel will simply stop scrolling horizontally both on mobile and desktop drag!
For owlcarousel2, you can use mouseDrag option.
$('.owl-carousel').owlCarousel({
mouseDrag:false
});
Reference https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
in owl.js
mouseDrag: false,
touchDrag: false,
pullDrag: false,
freeDrag: false,
Basically this is used to creat a horizontal parallax effect. I use anchor links to move the page back and forth ebtween pages horizontally, which all works nicely.
Now i want to include the parallax background, which also works on the first try. below is my javascript:
<script>
$(document).ready(function () {
$("#nav a").bind("click", function (event) {
$("section").removeClass('current');
$("#nav a").removeClass('current');
event.preventDefault();
var target = $(this).attr("href");
$("#wrapper").stop().animate({
scrollLeft: $(target).position().left - $("#container").position().left,
scrollTop: $(target).position().top - $("#container").position().top,
},
1000);
var x = $("#wrapper").scrollLeft();
$("#parallax").animate({
'background-position-x': '+20%',
'background-position-y': '0%'
}, 1200);
$(target).addClass('current');
$(this).addClass('current');
});
});
</script>
what this colde does is add a class to my nav links and the section which is on screen, then animates to that section on screen, after which the parallax div should move too. This works on the first click to a new section, but after that it just stays.
I think the fault lies in the
-position-x': '+20%',
line of code, but I do not know why this wouldn't work. Has anyone got any thoughts?
I am not sure that you can use += in the way you are trying to.
If I understand what you are trying to do I think your logic is slightly wrong. When you click you want to move the background by 20% right? In order to do that make moving the background a function which you can call when you want to move it by 20px. Something like:
var moveBackground = function(){
// First get the current background position - assuming its 0 on first time around
var currentX = parseInt($("#parallax).css('background-position-x'));
var newX = currentX + 20;
$("#parallax").animate({
'background-position': newX + '%' + ' 0%'
}, 1200);
$(target).addClass('current');
$(this).addClass('current');
});
}
This is completely untested code, I wrote whilst at work so don't hate me if that doesnt work.
i am working in extjs4. i have form panel with autoscroll true. I have 20-25 fields with fileUpload field at bottom. When i am uploading file, form's scroll is going to top by default. i want to keep scroll of form as it is on where it was while uploading file. So how to set this scrollBar at bottom of or at upload field section in extjs4
You can try by adding the following method to your form declaration:
scrollToField: function(fieldId) {
var field = Ext.get(fieldId);
field.el.scrollIntoView(this.body.el);
}
Here you have a working sample
IMHO,it will be better, however, to group fields using tabs or something similar to avoid having a long a and hard to read / fill form
I have solve this problem into Ext js 4.2 for Ext.form.panel
See the following code. It will helpful to you.
onRender function call on render event
onRender: function () {
this.callParent(arguments);
if (!this.restoreScrollAfterLayout) {
this.mon(Ext.get(this.getEl().dom.lastElementChild), 'scroll', this.onScroll, this);
this.restoreScrollAfterLayout = true;
}
},
onScroll: function (e ,t, eOpts) {
this.scroll = Ext.get(this.getEl().dom.lastElementChild).getScroll();
},
afterLayout: function () {
this.callParent(arguments);
if (this.restoreScrollAfterLayout && this.scroll) {
var el = Ext.get(this.getEl().dom.lastElementChild),
scroll = this.scroll;
el.scrollTo('left', scroll.left);
el.scrollTo('top', scroll.top);
}
}