Develop Reference

Hide elements while changing slide in swiper js

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.

As in swiper slide, make an active link only for the active slide?

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>

Swiper Slider Mouse Scroll And Looping Content

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

Always scroll swiper slides to top

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);
);
});

Prevent Auto Slide using Jquery

I am trying to create product slider for devices - but the current jquery i am using is using auto slide - does anyone know how i can achieve this?
I have tried deleting auto: 3000, but i get a white box/image instead of the first image.
I need the first image to slide on then stop to allow people to choose to slide though.
var bullets = $('#thumbnails li.sliderindicator');
var elem = document.getElementById('slider');
window.mySwipe = Swipe(elem, {
startSlide: -1,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function (pos) {
var i = bullets.length;
while (i--) {
bullets[i].className = 'circle';
}
bullets[pos].className = 'on';
}
});
Thanks

try remove
startSlide: -1,
auto: 3000,
i think if startSlide: -1 it will not display first image look this link .It work ok!