I am using swiper.js.
I would like to always have new/active slides scroll to the top, so when a new slide enters the viewport, the content must be scrolled to the top.
I have a fiddle here: https://jsfiddle.net/p406sfe4/8/
I though that this script might accomplish what I need, but it doesn't seem to work:
swiper.on('slideChangeEnd', function(s) {
s.slides.each(function() {
if ($(this).index() !== s.activeIndex) $(this)[0].scrollTop = 0
});
});
Thanks!
Unless you're restricting the height of the container/slides - causing an overflow - the scrollable content won't actually be inside each slide.
In that case you should focus on the scrollTop property of the swiper container or other parent element.
Regardless of what you're scrolling to, the event will work better if added to the initialization config. To use the code from your jsfiddle:
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30,
hashnav: true,
autoHeight: true,
// attach callback here
onSlideChangeEnd: function (swiperObj) {
$('.swiper-container').css('scrollTop', '0');
}
});
Well, above answer did not work for me. Adding this answer to different scenario.
In my case I had multiple swiper on the same page with different wrapper ID and I was initializing Swiper with reference to its ID,
With multiple instances of swiper, I couldn't get to proper position of slider, so I had to it this way.
var SwiperItems= [];
$('.swiper-items-wrapper').each(function(i) {
var this_ID = $(this).attr('id');
SwiperItems[i] = new Swiper( '#' + this_ID + ' .swiper-contrainer', {
loop: true,
navigation: {
nextEl: '#' + this_ID + ' .swiper-button-next-outsite',
prevEl: '#' + this_ID + ' .swiper-button-prev-outsite',
},
autoHeight: true,
});
SwiperItems[i].on('slideChange', function (swiperObj) {
$('html, body').animate({
scrollTop: jQuery(SwiperItems[i].$el).offset().top
}, 1000);
);
});
Related
I am using Swiper js for slides on the page. each slide has another image element positioned part inside the slide image and a part outside of it. so Whenever slide changes the part outside the slide can be seen.
I tries to use overflow: hidden for different classes of swiper js but did not work.
Here is the link you can check the slider: https://project-instock.netlify.app/index1.html#0
I did it by adding fadeEffect: { crossFade: true, }.
Initially, the script was
var swiper = new Swiper('.mySwiper5', {
effect: 'fade',
centeredSlides: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
autoplay: {
delay: 7000,
disableOnInteraction: false,
},
});
Which has fade effect enabled but did not mention the kind of fade.
Friends, please tell me how to make the link active, only in the active slide? And in about everyone else, hide her.
https://codepen.io/Cheizer/pen/OJLWREZ
var s6 = new Swiper('.swiper-container', {
spaceBetween: 10,
slidesPerView: 'auto',
slideToClickedSlide: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
});
var el = $('.swiper-container .swiper-slide');
$(el).each(function(i,el) {
if($(this).activeIndex){
$('a').show();
}else{
$('a').hide();
}
});
Doing so doesn't work :(
You can do two things here:
CSS way
<style>
.swiper-slide a {
display:none
}
.swiper-slide.swiper-slide-active a {
display:block
}
</style>
JS way
To find which slide has changed you can use following
mySwiper.on('slideChange', function () {
console.log(mySwiper.realIndex, 'slide changed');
});
All you have to do at this point is update a element inside that slide & update other slides to hide link.
e.g. https://codepen.io/tsvecak/pen/abowYJW
I had adapted the answer so instead of hiding and showing the anchor tag it changes the tabIndex value of the current slide to 1.
My problem was that as soon as I made the carousel loop it stopped working.
The solution was to change realIndex to activeIndex.
const swiperSlides = document.getElementsByClassName('swiper-slide')
s6.on('slideChange', function() {
const otherSlides = swiperSlides
for (let index = 0; index < swiperSlides.length; index++) {
const element = swiperSlides[index];
element.getElementsByTagName('a')[0].setAttribute("tabIndex", -1);
}
const linkElemCurrentSlide = swiperSlides[s6.activeIndex].getElementsByTagName('a')
linkElemCurrentSlide[0].setAttribute("tabIndex", 1);
});
$('.swiper-slide a').on('click touchstart', function(e) {
e.preventDefault();
});
</script>
I am trying to add a scroll delay to my fullpage.js sections and slides.
I got this working for sections only using the following code.
var delay = 1000;
var scrollDelay = false;
$("#sections-container").fullpage({
navigation: true,
controlArrows: false,
slidesNavigation: true,
scrollHorizontally: true,
sectionSelector: ".main-section",
slideSelector: ".sub-section",
onLeave: function(origin, destination, direction) {
timeoutId = setTimeout(function() {
scrollDelay = true;
fullpage_api.moveTo(destination.index + 1);
scrollDelay = false;
}, delay);
return scrollDelay;
});
How would I go about adding a scrolling delay for both sections and slides?
fitToSectionDelay: 1000, try this in function, It is for fullpage.js
In the object of fullpage method you should add these options:
fitToSection: true,
fitToSectionDelay: 1000
Change 1000 with the number that you want. Is configured by milliseconds.
I am using the swiper slider to horizontally scroll trough my slideshow. I want that my content is looping, but for any reasons its only repeating once and than it stops.
My swiper slider setup looks like this:
var swiper = new Swiper(".swiper-container", {
direction: "horizontal",
mousewheelControl: true,
slidesPerView: "auto",
freeMode: true,
followFinger: true,
loop: true
});
Codepen:
https://codepen.io/Dennisade/pen/ZPygbr
I appreciate any help
As of Swiper version 4.5.0, there are three things that cause errors in your code :
First thing, you added a swiper-wrapper div around every slide. You only need one swiper-wrapper div that wraps all your slides.
Second thing, when you set slidesPerView: 'auto' along with loop: true, you need to provide the total number of looped slides and add it in the loopedSlides parameter.
Checkout the doc in Parameters > slidesPerView : https://swiperjs.com/swiper-api#parameters.
Last thing, mousewheelControl parameter is not used anymore, you need the mousewheel parameter (https://swiperjs.com/swiper-api#mousewheel-control) like so :
mousewheel: {
releaseOnEdges: true,
},
You can also drop direction: "horizontal" and followFinger: true in this case.
So the solution is :
var swiper = new Swiper(".swiper-container", {
slidesPerView: "auto",
freeMode: true,
loop: true,
loopedSlides: 8 // according to the codepen
mousewheel: {
releaseOnEdges: true,
},
});
Checkout your codepen I forked that works : https://codepen.io/olig/pen/rgmPyb
I am using swiper image slider and according to their API, i should be able to have a call back function but it is not working ..
what i am trying to do is that i have a container with text over my images with opacity: 0 and I have a css animation class that I want to be added to my container, so as soon as the page is loaded, I want the animation to kick in on the first slide, next slide same rule , starts without the css class , add the css class to it
here is my javascript code
var mySwiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30,
speed: 600,
effect: 'fade',
fade: {
crossFade: true
},
onSlideChangeStart: function (Swiper){
$('.slide-info').addClass('slider-text-animation ');
},
onSlideChangeEnd: function (Swiper){
$('.slide-info').removeClass('slider-text-animation ');
},
loop: true,
autoplay: 6500
});
Try this:
mySwiper.on('slideChangeStart', function () {
$('.slide-info').addClass('slider-text-animation ');
});
mySwiper.on('slideChangeEnd', function () {
$('.slide-info').removeClass('slider-text-animation ');
});
And also, take a look at their API.
http://www.idangero.us/swiper/api/
It's just simple with Swiper API, this would help you http://idangero.us/swiper/api/#parallax