Carrousel on ajax tabs

[Christian Alias]

Hi everyone!

 

I'm trying to modify a module which has some tabs, in each tab the module loads the content with ajax and I want the content be shown as a carrousel.

 

For that I'd use bxslider as the carrousel.

 

The point is that when I change between tabs, I'm not able to set the bxslider (carrousel) again..

 

I've tried to load the carrousel in the success function of the ajax call but with no luck..

 

I paste my code in here so if somebody knows what I'm doing wrong could explain to me:

{assign var="moduleclass_sfx" value=( isset( $SNSPRT_CLASSSFX ) ) ?  $SNSPRT_CLASSSFX : ''}

<div id="sns_producttabs" class="tabajax sns-producttabs mrb25 {$moduleclass_sfx}">
	{*
	{if $SNSPRT_TITLE}
		<h3 class="block-title">{$SNSPRT_TITLE|escape:'htmlall':'UTF-8'}</h3>
	{/if}
	*}
	 {include file="./tabs.tpl"}
         <div class="navigation">
            <span class="next"><span></span></span>
            <span class="prev"><span></span></span>
        </div>
	{if $SNSPRT_PRETEXT}
		<div class="pretext">
			{$SNSPRT_PRETEXT}
		</div>
	{/if}
	 <div class="sns-pdt-container tab-content">
		{foreach $tabs as $item}
			 {assign var="tab_content_active" value=( isset( $item.first_select ) ) ?  $item.first_select : ''}
			 {assign var="products" value=(isset($item.child))?$item.child:''}
			<div class="tab-content-inner tab-content-{$item.tab_unique} {$tab_content_active}">
				{if !empty($products)}
					{if $products == 'emptyproduct'}
						<p class="alert alert-info">{l s="There are no products matching to show."}</p>
					{else}
						{include file="./items.tpl"}
                                                
					{/if}
				{else}
					<div class="process-loading"></div>
				{/if}
				{assign var="cls_loaded"  value=($item['count'] < $SNSPRT_NUMDISPLAY) ? " loaded " : ""}
				{assign var="label"  value=($item['count'] < $SNSPRT_NUMDISPLAY) ? "All ready" : "Load more"}
                                <div class="button-load">
					<div class="tab-loadmore pdt-loadmore"
						 data-id="{$item.tab_unique}" data-catid="{$item.tab_catid}" data-type="{$item.tab_type}"
						 data-rl_start="{$SNSPRT_NUMDISPLAY}"
						 data-rl_total="{$item['10']}"
						 data-rl_allready="All Ready"
						 data-rl_load="{$SNSPRT_NUMLOAD}">
						 <div class="btn-loadmore">
							<div class="ltabs-loadmore-btn {$cls_loaded}" data-label-load="{$label}"></div>
						 </div>
					</div>
				</div>
			</div>
		{/foreach}
	 </div>
	<script type="text/javascript">
            
            var slider = $('#sns_producttabs div.products-grid').bxSlider({
                            useCSS: false,
                            minSlides: 2,
                            maxSlides: 4,
                            slideWidth: 200,
                            infiniteLoop: true,
                            hideControlOnEnd: true,
                            pager: true,
                            autoHover: true,
                            controls: true
                        });
            
		jQuery(document).ready(function ($) {

                //slider.destroySlider();
                //slider.bxSlider();
                //slider.reloadSlider();
                
			function setAnimate(el){
				$_items = $('.item-animate',el);
				$('.button-load',el).fadeOut('fast');
				$_items.each(function(i){
					$(this).attr("style", "-webkit-animation-delay:" + i * 300 + "ms;"
			                + "-moz-animation-delay:" + i * 300 + "ms;"
			                + "-o-animation-delay:" + i * 300 + "ms;"
			                + "animation-delay:" + i * 300 + "ms;");
			        if (i == $_items.size() -1) {
			            $(".product_list", el).addClass("play");
			            $('.button-load', el).fadeIn(i*0.3);
			        }
				});
			}
			function setAnimated(el){
			    $(".product_list", el).removeClass("play");
			    $('.item',el).removeAttr('style');
				$('.item',el).addClass('animated').removeClass('item-animate');
			}
			function removeAnimate(el){
			    $(".product_list", el).removeClass("play");
			    $('.item',el).removeClass('animated').addClass('item-animate').removeAttr('style');
			}
			setAnimate($('.tab-content-inner.active'));
		    ;(function (el) {
				var $el = $(el), $tab = $('.tab', $el),
					$tab_content = $('.tab-content',$el),
					$tab_content_inner = $('.tab-content-inner', $tab_content);
                                                                                
					$tab.on('click.tab_cat', function () {
						var $this = $(this);
						if ($this.hasClass('active') ) {
                                                    return;
                                                }
						
						removeAnimate($tab_content);
						slider.destroySlider();
						$tab.removeClass('active');
						$this.addClass('active');
						var id_tab = $this.attr('data-id'), $tab_content_active = $('.tab-content-'+id_tab, $el);
						$tab_content_inner.removeClass('active');
						$tab_content_active.addClass('active');
						var $loading = $('.process-loading', $tab_content_active);
						var loaded = $tab_content_active.hasClass('ltabs-items-loaded');
                                                                                                
						if (!$this.hasClass('tab-loaded') && !$this.hasClass('tab-process')) {
                                                    
							$this.addClass('tab-process');
							$loading.show();
							ajax_url = baseDir + 'modules/snsproducttabs/snsproducttabs-ajax.php';
							$.ajax({
								type: 'POST',
								url: ajax_url,
								data: {
									module_name: 'snsproducttabs',
									is_ajax: 1,
									ajax_start: 0,
									categoryid: $this.attr('data-catid'),
									data_type: $this.attr('data-type')
								},
								success: function (data) {
									if (data.productList != '') {
										$(data.productList).insertBefore($('.button-load',$tab_content_active)); 
										$this.addClass('tab-loaded').removeClass('tab-process');
										$loading.remove();
										setAnimate($tab_content_active);
                                                                                
                                                                                
									} else {
										$('<p class="alert alert-info">{l s="There are no products matching to show."}</p>').insertBefore($('.button-load',$tab_content_active)); 
										$('.button-load', $tab_content_active).remove();
										$loading.remove();
									}
								},
								dataType: 'json'
							});
						}else{
							setAnimate($('.tab-content-inner.active', $el));
						}
					});
					var $btn_loadmore = $('.ltabs-loadmore-btn ', $el);
					$btn_loadmore.on('click.loadmore', function () {
						var $this = $(this);
						if ($this.hasClass('loaded') || $this.hasClass('loading')) {
							return false;
						} else {
                                                                                                        
							$this.addClass('loading');
							$this.parents('.button-load').addClass('loading');
							$this.attr('data-label-load', 'Loading....');
							var tab_content_active = $this.parents('.tab-content-inner').filter('.active');		
							$('.item', tab_content_active).addClass('animated').removeClass('item-animate');

							ajax_url = baseDir + 'modules/snsproducttabs/snsproducttabs-ajax.php';
							$.ajax({
								type: 'POST',
								url: ajax_url,
								data: {
									module_name: 'snsproducttabs',
									is_ajax: 1,
									ajax_start: $this.parents('.pdt-loadmore').attr('data-rl_start'),
									categoryid: $this.parents('.pdt-loadmore').attr('data-catid'),
									data_type: $this.parents('.pdt-loadmore').attr('data-type'),
									nbload: $this.parents('.pdt-loadmore').attr('data-rl_load')
								},
								success: function (data) {
									if (data.productList != '') {
										$(data.productList).children().insertAfter($('.product_list > .item', tab_content_active).nextAll().last());
										updateStatus(tab_content_active);
										setAnimate(tab_content_active);
									}
								}, dataType: 'json'
							});
						}
						return false;
					});
					
					function updateStatus($el) {
						var $btn_loadmore_r = $('.button-load', $el);
						var $btn_loadmore = $('.ltabs-loadmore-btn ', $el);
						$btn_loadmore.removeClass('loading');
						$btn_loadmore_r.removeClass('loading');
						var countitem = $('.product_list > .item', $el).length;
						$btn_loadmore.parents('.pdt-loadmore').attr('data-rl_start', countitem);
						var rl_total = $btn_loadmore.parents('.pdt-loadmore').attr('data-rl_total');
						var rl_load = $btn_loadmore.parents('.pdt-loadmore').attr('data-rl_load');
						var rl_allready = $btn_loadmore.parents('.pdt-loadmore').attr('data-rl_allready');
                                                
						if (countitem >= rl_total) {
							$btn_loadmore.addClass('loaded');
							$btn_loadmore_r.addClass('loaded');
							$btn_loadmore.attr('data-label-load', 'All ready');
						}else{
							$btn_loadmore.attr('data-label-load', 'Load more');
						}
					}
			})('#sns_producttabs');	
		});
	</script>
</div>
{if $SNSPRT_POSTEXT}
	<div class="posttext">
		{$SNSPRT_POSTEXT}
	</div>
{/if}

When a new tab is loaded I also have to destroy the previous bxslider

 

 

Thanks in advance!