[英]jCarousel ajax load on next button
我正在使用jcarousel从单独的滑块中的多个单词加载搜索结果。
当我单击下一个按钮时,将6个元素添加到我的滑块中,但是滑块不会滚动直到再次单击。
问题出在哪儿 ?
var runSearchCarousel = function(){
var carousel = jQuery('.row-wrap').jcarousel({vertical: false, animation: 'fast', visible: 4, wrap: 'last'});
return carousel;
};
var searchCarouselMore = function(){
jQuery('.search-row').on('click', '.next-b', function(){
var $this = jQuery(this),
id = $this.attr('id').substring('rightArrow-'.length),
container = jQuery('#slider_' + id),
containerPosition = container.parent().parent().find('#rowPosition-' + id).val(),
lastLi = container.find('li.gridWrap').filter(':last'),
carousel = container.parent(),
lastSku = lastLi.attr('id').substring('product-'.length);
$this.jcarouselControl({
carousel : carousel,
target : '+=4'
});
jQuery.ajax({
type: 'get',
url : '/ajax/_fetchMultiSearch.php',
data: {
toFetch: 6,
containerPosition: containerPosition,
lastSku: lastSku
},
cache: false,
success: function(response){
container.append(response);
uiResize();
carousel.jcarousel('reload');
}
});
});
解决了
var runSearchCarousel = function(){
var carousel = jQuery('.row-wrap').jcarousel({vertical: false, animation: 'slow', visible: 4});
return carousel;
};
var searchCarouselMore = function(){
jQuery(".prev-b").on("jcarouselcontrol:active", function() {
jQuery(this).removeClass("inactive")
}).on("jcarouselcontrol:inactive", function() {
jQuery(this).addClass("inactive")
}).jcarouselControl({
target: "-=1"
});
jQuery(".next-b").on("jcarouselcontrol:active", function() {
jQuery(this).removeClass("inactive")
}).on("jcarouselcontrol:inactive", function() {
jQuery(this).addClass("inactive")
}).jcarouselControl({
target: "+=1"
});
jQuery('.search-row').on('click', '.next-b', function(){
var $this = jQuery(this),
id = $this.attr('id').substring('rightArrow-'.length),
container = jQuery('#slider_' + id),
containerPosition = container.parent().parent().find('#rowPosition-' + id).val(),
lastLi = container.find('li.gridWrap').filter(':last'),
carousel = container.parent(),
lastSku = lastLi.attr('id').substring('product-'.length);
$this.jcarouselControl({
carousel : carousel,
target : '+=4'
});
jQuery.ajax({
type: 'get',
url : '/ajax/_fetchMultiSearch.php',
data: {
toFetch: 6,
containerPosition: containerPosition,
lastSku: lastSku
},
cache: false,
success: function(response){
container.append(response);
uiResize();
carousel.jcarousel('reload');
}
});
});
jQuery('.search-row').on('click', '.prev-b', function(){
var $this = jQuery(this),
id = $this.attr('id').substring('leftArrow-'.length),
container = jQuery('#slider_' + id),
carousel = container.parent();
jQuery(this).jcarouselControl({
carousel : carousel,
target : '-=4'
});
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.