Question

光滑的轮播没有在bootstrap popover上工作，修复它的方法是什么。虽然光滑的旋转木马工作时它位于引导弹片的外侧。这是小提琴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，滑动滑块parent division is hidden。附加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/

光滑的旋转木马不适用于bootstrap popover

1 个答案: