Develop Reference

ReInit Swiper after an AJAX Call Wordpress

I'm posting here because after many hours of research and some headache I didn't find a solution to a problem with swiper JS in my website.
In my case, I have a WordPress website and I have an archive page with many listings each one with a slider (Swiper JS) that shows relevant images of the listing.
It works fine until I apply a filter to the page (Eg. select to show property with 4 beds) (so I think before I make an AJAX request).
The page reloads with AJAX and shows only relevant listings, the only problem is that the Swiper Slider doesn't work anymore, in fact, I cannot slide it.
By logic, I think I need to reinitialize Swiper after every AJAX call but as I'm not so good at AJAX I'm kind of wondering if anyone can point me into the right direction. Thank you very much.
My Swiper Code:
jQuery(document).ready(function() {
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'horizontal',
effect: 'slide',
speed: 150,
loop: true,
observer: true,
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
});
});

Why don't you use swiper lazy and param-lazy-loadPrevNext ?

You're probably right. When the results container with the Swiper instances updates, Swiper needs to re-initialize the new result elements when they are attached to the DOM.
You should be able to re-use the same Swiper initializer. Just place it in a separate function. Then call that function on document load (as you are now) and when the AJAX results load, after the DOM is updated.
Example:
let swiper;
function initSwiper() {
swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'horizontal',
effect: 'slide',
speed: 150,
loop: true,
observer: true,
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
});
}
jQuery(document).ready(function() {
initSwiper(); // <---------------
// ...
$.ajax({
url: '/ajax-url/',
dataType: "json",
type: "Post",
async: true,
data: { },
success: function (data) {
$('#results').html(data.results_html);
initSwiper(); // <---------------
},
error: function (xhr, exception) {
// Error handling
}
});
});

Reset slide to the initial slide after images changes on swiper for angular

Scenario :
When the page is rendering the products are shown and every product has a discover button. On clicking the button I want to display the gallery / slider images below that product.
Currently, when I click the first product, Swiper is showing the images. And, if I slide the images to 3rd or 4th (or any), the new product slider image is starting from that particular index i.e., from 3rd or 4th.
The configuration I used for Swiper is :
public config: SwiperConfigInterface = {
centeredSlides: true,
initialSlide: 0,
slidesPerView: 1,
loop: false,
spaceBetween: 0,
autoplay: false,
direction: 'horizontal',
keyboard: false,
navigation: true,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
hashNavigation: false,
effect: 'slide'
};
And, the discover button is calling the below method :
discover(locationId) {
this.locationImages = [];
this.destinations.forEach(selectedData => {
if(selectedData._id == locationId){
selectedData.optional_images.forEach(image => {
this.locationImages.push(image)
});
}
});
console.log(this.locationImages);
}
I searched the docs and google, didn't find any reliable solution. Please suggest some answers. Thank you in advance.

Check the documentation at https://swiperjs.com/swiper-api - seems that you can use swiper.slideTo(index, speed, runCallbacks) method to revert to first (or any) slide element whenever you need, like upon changing the active product.

Scrollify (jquery) - disable plugin on some pages at the site (newbie)

I am trying to use scrollify for my website (Wordpress, woocomerce) www.chame-lemon.com and I'm totally green in programming, so I really need your help guys.
I need to disable the plugin on shop page and product pages, I'm using a class named "hwdp" to all sections on the pages when I want to use plugin. but he is activated on other pages because of the footer (it has a class to turn on scrollify also) but I can't use two separate footers in Wordpress, so I need to use code with using a function
$.scrollify.disable();
The disable method turns off the scroll snap behavior so that the page scroll like normal.
there is documentation for that plugin
https://projects.lukehaas.me/scrollify/#methods-continued
that should look like that:
if there is no class named hwdp on the page
the plugin should be disable
else
he should be enabled
and I tried to fix that by myself, I spend hours and i got no results... and i know that's a very simple thing for someone who knows jquery.
<script>
jQuery(document).ready(function($) {
$.scrollify({
section : ".hwdp",
interstitialSection: ".footer",
easing: "easeOutExpo",
scrollSpeed: 1200,
offset: 1,
scrollbars: true,
standardScrollElements: "",
setHeights: true,
overflowScroll: true,
updateHash: true,
touchScroll: false,
before:function() {},
after:function() {},
afterResize:function() {},
afterRender:function() {},
});
if (!$('section').hasClass('.hwdp')) {
$.scrollify.enable();
}else{
$.scrollify.disable();
}
});
</script>

In your code, the plugin is being initialized on every page regardless of whether it finds the .hwdp class. It's better to only be initialized when it needs to be.
Here's how you can enable the plugin only when there exists a section on the page with the class .hwdp.
<script>
jQuery(document).ready(function($) {
if($('section.hwdp').length) {
$.scrollify({
section : ".hwdp",
interstitialSection: ".footer",
easing: "easeOutExpo",
scrollSpeed: 1200,
offset: 1,
scrollbars: true,
standardScrollElements: "",
setHeights: true,
overflowScroll: true,
updateHash: true,
touchScroll: false,
before:function() {},
after:function() {},
afterResize:function() {},
afterRender:function() {},
});
}
});
</script>

Swiper jQuery slider

I am using the jQuery slider called Swiper in my project.
http://www.idangero.us/sliders/swiper/
I am new to programming (js / jquery). I want to execute a function, some jquery code to be more specific, whenever the first slide of the slider is active. I think their API makes this possible, but I have no idea how to use. If somebody could help, I'd appreciate. Here's their API:
http://www.idangero.us/sliders/swiper/api.php
Thanks.

I build a little demo in jsfiddle to demonstrate how to react on slide events with "swiper":
http://jsfiddle.net/KhgFX/2/
Use the Event-Callback functions by swiper, as mentioned in the API-docu.
$(document).ready(function () {
$(function () {
var mySwiper = $('.swiper-container').swiper({
mode: 'horizontal',
watchActiveIndex: true,
loop: true,
onSlideChangeStart: function (swiper) {
console.log('slide change start - before');
console.log(swiper);
console.log(swiper.activeIndex);
//before Event use it for your purpose
},
onSlideChangeEnd: function (swiper) {
console.log('slide change end - after');
console.log(swiper);
console.log(swiper.activeIndex);
//after Event use it for your purpose
if (swiper.activeIndex == 1) {
//First Slide is active
console.log('First slide active')
}
}
});
})
});

Doesn't seem that the other jsfiddle example works anymore.
For others who want to get the right libraries set up to see this working, see:
http://jsfiddle.net/kp8a8ugd/1/
var swiper = new Swiper('.swiper-container'); //just a simple setup

const swiper = new Swiper('.swiper', {
// 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',
},
});

carouFredSel breaking on fade in

I built an image slider using the carouFredSel plugin and everything works fine with one single carousel of images but as I continued building out my site I've reached some problems.
The first visible carousel works fine, but if you click the IMG link on the top right to see the second carousel, it neglects the bit of code telling it to only display one item at a time or something like that.
I've made sure everything is set up the same in both and I've tried experimenting with display and float changes with no luck
I'm also now realizing that it seems to be caused by the fading transition because the same thing happens on the first slider when I set a fade in to that as well.
Guessing it has something to do with the display change that the jQuery script does
http://coreytegeler.com/new/#work
Any ideas??
$("#web-carousel").carouFredSel({
width: "100%",
height: 450,
direction: "right",
circular: true,
infinite: true,
items: {
visible: 1,
width: "variable",
height: 400,
width: 720
},
scroll: {
duration: 1000,
pauseOnHover: true
},
auto: {
timeoutDuration: 9999,
delay: 5000
},
prev: {
button: "#web-left",
key: "left"
},
next: {
button: "#web-right",
key: "right"
},
pagination: {
container: "#web-pagination",
keys: true
},
swipe: true,
mousewheel: false
});

I'm not sure if this is what's causing you trouble, but it sounds like it might be the same issue I ran into. I have my carousel in a hidden div revealed by an animate() triggered by a click. It wasn't rendering correctly until I put the carousel initialization into a post-animate function -- ensuring that the carousel wasn't initialized until the div was ready seemed to be the key, probably because the carousel code looks at the sizing of things when it's preparing the images. So what I did was to wrap the carousel initialization in a function:
var do_carousel = function() {
$('#carousel').carouFredSel({
responsive: true,
circular: false,
etc...
Then in the code that reveals the div, it calls that function:
$("#carousel-div").animate({
opacity: 'toggle',
width: 'toggle',
}, 1200, function() {
do_carousel();
});
Once I moved the carousel initialization there, it started working. I hope perhaps that will help you find the root of your issue.