Bonjour,
J'utilise OWL Carousel 2.3.4 et la méthode de syncronisation entre deux carousel l'un pour naviguer avec des boutons l'autre pour le slider.
Je rencontre un problème assez particulier car le code fonctionne mais uniquement pour deux slides sur trois.
Après plusieurs tests j'ai bien l'impression qu'il y a un conflit entre le carousel et un appel ajax.
Présentation :
Mon slider est donc composé d'une ligne avec trois boutons pour chaque slide, quand je clique sur l'un d'eux le slide correspondant s'affiche
Ce qui ce passe :
- Chaque slide contient une boucle WP post (titre,image et catégory) . Quand je clique sur un article sont contenu est appelé en AJAX et s'affiche dans une fenêtre.
Tout ce passe très bien pour les deux premiers slides * ,pour le troisième le problème apparait lorsque je clique directement sur le troisème bouton (correspondant au troisième slide) , à ce moment quand je clique sur l'article son contenu va s'ouvrir dans une nouvelle fenêtre de navigateur au lieu d'être appelé en AJAX.
Ce problème n'a pas lieu si j'utilise le mousedrag au lieu de cliquer sur le 3e bouton pour acceder au 3eme slide. A ce moment le contenu est bien appelé en AJAX.
Ce que je fais :
Ma requète ajax
(function($) {
$(document).ready(function() {
$('.post-link').click(function(event) {
var post_id = $(this).attr("id");
event.preventDefault();
$.post(
ajaxurl,
{'action': 'more_content','the_ID': post_id},
function( data ) { $('#window-post').html(data); }
);
});$('.win-post').on('click','.im-x-mark',function(){
$("#window-post").html("");
});
});
})(jQuery);
Le script de syncronisation owl carousel :
var sl = jQuery.noConflict();
sl(document).ready(function() {
var sync1 = sl("#slide-appareil");
var sync2 = sl("#nav-appareil");
var slidesPerPage = 3; //globaly define number of elements per page
var syncedSecondary = true;
sync1.owlCarousel({
items: 1,
slideSpeed: 2000,
dots:false,
nav:false,
loop : true
}).on('changed.owl.carousel', syncPosition);
sync2
.on('initialized.owl.carousel', function() {
sync2.find(".owl-item").eq(0).addClass("current");
})
.owlCarousel({
items: slidesPerPage,
dots:false,
smartSpeed: 200,
slideSpeed: 500,
slideBy: slidesPerPage,
responsiveRefreshRate: 100,
touchDrag : false
}).on('changed.owl.carousel', syncPosition2);
function syncPosition(el) {
//if you set loop to false, you have to restore this next line
//var current = el.item.index;
//if you disable loop you have to comment this block
var count = el.item.count - 1;
var current = Math.round(el.item.index - (el.item.count / 2) - .5);
if (current < 0) {
current = count;
}
if (current > count) {
current = 0;
}
//end block
sync2
.find(".owl-item")
.removeClass("current")
.eq(current)
.addClass("current");
var onscreen = sync2.find('.owl-item.active').length - 1;
var start = sync2.find('.owl-item.active').first().index();
var end = sync2.find('.owl-item.active').last().index();
if (current > end) {
sync2.data('owl.carousel').to(current, 100, true);
}
if (current < start) {
sync2.data('owl.carousel').to(current - onscreen, 100, true);
}
}
function syncPosition2(el) {
if (syncedSecondary) {
var number = el.item.index;
sync1.data('owl.carousel').to(number, 100, true);
}
}
sync2.on("click", ".owl-item", function(e) {
e.preventDefault();
var number = sl(this).index();
sync1.data('owl.carousel').to(number, 300, true);
});
});
Ce que je veux :
Mon but est de résoudre ce problème d'appel en ajax qui ne ce fait pas uniquement pour les articles du troisième onglet.
je ne veux utiliser que le "click" et pas le "mousedrag" de owl.
Je peux montrer la page en question uniquement en mp