Question

我正在使用更改滑块库（cocoen） https://github.com/koenoe/cocoen

它工作得很完美，但我想在bootstrap carousal中使用它，如果我使用这种方法：

document.querySelectorAll('.cocoen').forEach(function(element){
  new Cocoen(element);
});

这只适用于第一个滑块，之后我尝试在这样的bootstrap carousal事件中：

$('#MySlider').on('slide.bs.carousel', function () {
                if($('#MySlider div.item').hasClass('active')) 
                {
                    new Cocoen(('#MySlider .cocoen'));

                }
            })

这也行不通，我的轮播代码：

 <div class="container">
            <div id="MySlider" class="carousel slide" data-ride="carousel">
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item">
                        <div class="cocoen">
                            <img src="images/before.jpg" alt="">
                            <img src="images/after.jpg" alt="">
                        </div>
                    </div>
                    <div class="item">
                        <div class="cocoen">
                            <img src="images/before.jpg" alt="">
                            <img src="images/after.jpg" alt="">
                        </div>
                    </div>
                    <div class="item">
                        <div class="cocoen">
                            <img src="images/before.jpg" alt="">
                            <img src="images/after.jpg" alt="">
                        </div>
                    </div>
                </div>
                <!-- Controls -->
                <a class="left carousel-control" href="#MySlider" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#MySlider" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
                </a>
            </div>

        </div>

请指导我

Answer 1

我遇到了同样的问题，但是我正在使用Owl Carousel。

我已将以下行添加到onDragStart()文件中的cocoen.js方法中：

this.dimensions();

，然后每个拖动元素都占据正确的位置。

希望有帮助！

引导转盘中的cocoen滑块

1 个答案: