Как найти конфликт между bxslider и fancybox?

Использую совместно bxslider и fancybox. Появляется такая проблема: иногда окно fancybox открывается 2 раза подряд, то есть fancybox генерирует свой div, а под ним еще один точно такой же. Проявляется не всегда, иногда создает один div как и надо. Не могу понять в чем проблема и как поправить.


Использую HTML такого вида:

<div class="bxslider">
 <div class="photo_wrapper"><a data-fancybox="1" href="#"><img src="#" alt=""></a></div>
 <div class="photo_wrapper"><a data-fancybox="1" href="#"><img src="#" alt=""></a></div>
 <div class="photo_wrapper"><a data-fancybox="1" href="#"><img src="#" alt=""></a></div>
</div>
<div class="bx-pager">
 <a data-slide-index="0" href=""><img src="#" /></a>
 <a data-slide-index="1" href=""><img src="#" /></a>
 <a data-slide-index="2" href=""><img src="#" /></a>
</div>

JS:

/* ============== BXSLIDER ============== */
$('.bxslider').each(function(i,j) {
   $(this).addClass('bx_custom'+(i+1));
});
$('.bx-pager').each(function(i,j) {
   $(this).addClass('bx_custom'+(i+1));
});

var sliderCount = 1;
$('.bxslider').each(function() {
	$('.bxslider.bx_custom' + sliderCount).bxSlider({
	//параметры слайдера
   mode: "fade",
   controls: false,
   slideWidth: 670,
   infiniteLoop: false,
   pagerCustom: $('.bx-pager.bx_custom' + sliderCount),
  });
	sliderCount++;
});
/* ============== END ============== */	

/* ============== FANCYBOX ============== */
$("[data-fancybox]").fancybox({
	infobar: false,
	arrows: false,
	idleTime: false,
	thumbs : {
		autoStart : true
	},
	buttons: [
        "close"
    ],
});
/* ============== END ============== */