Как запустить правильный слайд flexslider-a?

Question

[emiliya sokolova]

У меня FlexSlider. По умолчанию слайд скрыт. После клика на любом из thumbs я показываю слайд, но показывает он неправильный слайд (каждый раз показывает 1 слайд ). Идеи как исправить это ? Вот пример: codepen.io/emilium/pen/KpwvBe
https://jsfiddle.net/0a9x8dmt/

Answer 1

[Михаил Горячкин]

Вся ваша беда в вот в этой строке:
$flexslider.hide();
Замените их ну например на:

$flexslider.css({'visibility': 'hidden'});
//и
$flexslider.css({'visibility': 'visibility'});

И все у вас заработает. Итоговый вид ф-и:

flexsliderInit: function () {

        $('.slider').flexslider({
            controlsContainer: ".flex-control-thumbs",
            animation: 'slide',
            direction: "horizontal",
            animationLoop: false,
            slideshow: false,
            controlNav: true,
            directionNav:true,
            manualControls: ".flex-control-thumbs .list-cell",
            start: function(slider){
    			 var $flexslider = $('.flexslider');
           		$flexslider.css({'visibility': 'hidden'});
              
              var $thumbs = $('.list-cell'), timer;
              $('.list-cell').each(function(){ 
                $(this).on('click', function(e){
                   clearTimeout(timer);
                   timer = setTimeout(function () {
                      $flexslider.css({'visibility': 'visible'});
                   }, 500);
                   e.preventDefault();
    		   $(window).trigger('resize');
                   $slideItems = $('.list-cell--overlay');
                   $slideItems.each(function () {
                        var $item = $(this), $close = $item.find('.close');
                        $close.on('click', function () {
                            $flexslider.hide();
                        });
                    });
                });
              });
            }
        });
}

Comments

[emiliya sokolova]

Да, но вот только visibility сохраняет пространство, занимаемое элементом.

[Михаил Горячкин]

тогда поставьте высоту в ноль и overflow: hidden;