Cocoen Slider в начальной загрузке карусели

Question

я работаю с библиотекой слайдеров изменений (cocoen) https://github.com/koenoe/cocoen

он работает отлично, но я хочу использовать его в начальной загрузке, если я использую этот подход:

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

это будет работать только с первым ползунком, после чего я пробую внутри события начальной загрузки так:

$('#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

У меня была такая же проблема, но я использую Карусель для сов.

Я добавил эту строку в метод onDragStart() в файле cocoen.js:

this.dimensions();

и затем каждый элемент перетаскивания занимает правильную позицию.

Надеюсь, это поможет!