Tengo algunos problemas con un control deslizante personalizado en un sitio web de WordPress.
El control deslizante funciona correctamente para algunos de los productos, sin embargo, el mismo control deslizante no funciona en los productos que se cargan después del botón «Cargar más».
Así se genera el contenido.
<div class="new_full_image-slider">
<div class="full_image-slider">
<div class="slider">
<a href="https://stackoverflow.com/questions/72976732/<?php the_permalink(); ?>" class="slider_new_link"></a>
<div class="item_new_slide">
<?php the_post_thumbnail('medium_large') ?>
</div>
<?php foreach ( $attachment_ids as $attachment_id ) { ?>
<div class="item_new_slide" style="display:none;">
<img src="<?php echo wp_get_attachment_url( $attachment_id ); ?>" class="attachment-medium_large size-medium_large wp-post-image" alt="">
</div>
<?php } ?>
</div>
<div class="slider-dots">
<a class="prev">❮</a>
<span class="slider-dots_item"></span>
<?php foreach ( $attachment_ids as $attachment_id ) { ?>
<span class="slider-dots_item"></span>
<?php } ?>
<a class="next">❯</a>
</div>
</div>
</div>El JavaScript que actualiza las clases y estilos:
function custom_js_slider(slider) {
var slideIndex = 1;
var slides = slider.querySelectorAll('.item_new_slide');
var dots = slider.querySelectorAll('.slider-dots_item');
dots = Array.prototype.slice.call(dots);
var prev = slider.querySelector('.prev');
var next = slider.querySelector('.next');
var track = slider.querySelector('.slider');
function showSlides(n) {
slideIndex = n;
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
showSlides(slideIndex);
prev.addEventListener('click', function(event) {
showSlides(slideIndex - 1);
});
next.addEventListener('click', function(event) {
showSlides(slideIndex + 1);
});
for(var i = 0; i<dots.length; i++) {
var this_i = dots.indexOf(dots[i]);
dots[i].addEventListener('click', function(event) {
var newIndex = dots.indexOf(event.target);
newIndex++;
showSlides(newIndex);
});
}
var threshold = 50;
var startX;
var swipedir;
track.addEventListener('touchstart', function(e){
var touchobj = e.changedTouches[0];
swipedir="none";
startX = touchobj.pageX;
//e.preventDefault();
}, false);
track.addEventListener('touchmove', function(e){
//e.preventDefault();
}, false);
track.addEventListener('touchend', function(e){
var touchobj = e.changedTouches[0];
distX = touchobj.pageX - startX;
if (Math.abs(distX) >= threshold){
swipedir = (distX < 0)? 'left' : 'right';
}
if (swipedir=='right') {
showSlides(slideIndex-1);
} else if (swipedir=='left') {
showSlides(slideIndex+1);
}
//e.preventDefault();
}, false);
}
var sliders = document.getElementsByClassName("full_image-slider");
Array.prototype.forEach.call(sliders, function(slider) {
custom_js_slider(slider);
});Y la función «Cargar más»:
jQuery(function ($) {
if ($('.post-listing').length > 0) {
//$('.post-listing').append('<span class="load-more"></span>');
var button = $('.post-listing .load-more');
var loading = false;
var count = $('.post-listing').data('count');
var full_count = $('.post-listing').data('full_count');
var cat_id = $('.post-listing').data('cat_id');
var cat_name = $('.post-listing').data('cat_name');
var term_link = $('.post-listing').data('term_link');
var type = $('.post-listing').data('type');
var ajax_append = $('.post-listing .ajax_append');
var scrollHandling = {
allow: true,
reallow: function () {
scrollHandling.allow = true;
},
delay: 400 //(milliseconds) adjust to the highest acceptable value
};
$('.load-more').click(function () {
loading = true;
var data = {
action: 'be_ajax_load_more',
count: count,
cat_id: cat_id,
cat_name: cat_name,
term_link: term_link,
type: type,
};
$.post(beloadmore.url, data, function (res) {
if (res.success) {
$('.ajax_append').append(res.data.objects);
loading = false;
button.removeClass('load_style');
count = count + res.data.count;
$('.post-listing').data('count', count);
if (count >= full_count) {
button.remove();
loading = true;
}
} else {
// console.log(res);
}
}).fail(function (xhr, textStatus, e) {
// console.log(xhr.responseText);
});
});
}¿Podría echar un vistazo y señalarme la dirección correcta, por favor?
Gracias por adelantado.