slick 회전 목마가 bootstrap popover에서 작동하지 않습니다.

Question

slick 회전 목마가 bootstrap popover에서 작동하지 않습니다. 어떻게 수정해야합니까? 매끈 매끈한 컨베이어 벨트가 부트 스트랩 팝 오버를 벗어날 때 작동합니다. 여기에 바이올린에게 parent division is hidden 경우 https://jsfiddle.net/dskgsaat/

<style> 
    .slider-car{ display:none;} 
</style> 

<div class="container"><h3>Popover Example</h3> 
    <a href="#" id ="pop" data-toggle="popover" title="Popover Header" data-container="body" data-placement="bottom" type="button" data-html="true">Toggle popover</a> 
</div> 
<div class="col-sm-4 slider-car"> 
    <div class="cd-hero-slider " id="elem-flav"> 
     <div id="section-a"> <img src="Flavor.png" alt="..."> </div> 
     <div id="section-b"> <img src="Flavor-2.png" alt="..."> </div> 
     <div id="section-c"> <img src="Flavor-3.png" alt="..."> </div> 
    </div> 
</div> 
<script type="text/javascript"> 
     $(document).ready(function(){ 
      $('[data-toggle="popover"]').popover({ 
       html: true, 
       content: function() { 
        return $('.slider-car').html(); 
       }, 
       template: '<div class="popover my-popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>' 
      }); 
      $('.cd-hero-slider').slick({ 
       slidesToShow: 1, 
       slidesToScroll: 1, 
       autoplay: true, 
       autoplaySpeed: 2000, 
       dots: true, 
       arrows: false 
      }); 
      $('.cd-hero-slider').resize() 
     }); 
    $("#pop").click(function(){ 
     $("p").show('.slider-car'); 
    }); 
</script> 

Answer 1

슬릭 슬라이더 doesn't get initialized입니다. click function to popover을 붙여서 작업을 수행했습니다.

$('[data-toggle="popover"]').popover({ 
    html: true, 
    content: function() {  
    return $('.slider-car').html(); 
    }, 
    template: '<div class="popover my-popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>' 
    }).click(function() { 
     $('.cd-hero-slider').slick({ 
      slidesToShow: 1, 
      slidesToScroll: 1, 
      autoplay: true, 
      autoplaySpeed: 500, 
      dots: false, 
      arrows: true, 
      centerMode:true, 
      infinite:true 
     }); 
    }); 

작업 바이올린 https://jsfiddle.net/dskgsaat/13/