Почему не инициализируется sly js?

Question

[GaserV]

Подскажите. Почему не работает sly? Ошибок нет. Подключил jq.sly, easing. Элементы все отображаются по одному и вертикально. Item: with: 200px;

<div id="carousel">
			<div class="item">
				<iframe width="100%" height="100%" src="https://www.youtube.com/embed/NbqUU9Q6ZPM" frameborder="0" allowfullscreen></iframe>
			</div>
			<div class="item sm">
				<iframe width="100%" height="100%" src="https://www.youtube.com/embed/NbqUU9Q6ZPM" frameborder="0" allowfullscreen></iframe>
			</div>
			<div class="item">
				<iframe width="100%" height="100%" src="https://www.youtube.com/embed/NbqUU9Q6ZPM" frameborder="0" allowfullscreen></iframe>
			</div>
			<div class="item">
				<iframe width="100%" height="100%" src="https://www.youtube.com/embed/NbqUU9Q6ZPM" frameborder="0" allowfullscreen></iframe>
			</div>
			<div class="item">
				<iframe width="100%" height="100%" src="https://www.youtube.com/embed/NbqUU9Q6ZPM" frameborder="0" allowfullscreen></iframe>
			</div>
			<div class="item">
				<iframe width="100%" height="100%" src="https://www.youtube.com/embed/NbqUU9Q6ZPM" frameborder="0" allowfullscreen></iframe>
			</div>
			<div class="item">
				<iframe width="100%" height="100%" src="https://www.youtube.com/embed/NbqUU9Q6ZPM" frameborder="0" allowfullscreen></iframe>
			</div>
			<div class="item">
				<iframe width="100%" height="100%" src="https://www.youtube.com/embed/NbqUU9Q6ZPM" frameborder="0" allowfullscreen></iframe>
			</div>
			<div class="item">
				<iframe width="100%" height="100%" src="https://www.youtube.com/embed/NbqUU9Q6ZPM" frameborder="0" allowfullscreen></iframe>
			</div>
			<div class="item">
				<iframe width="100%" height="100%" src="https://www.youtube.com/embed/NbqUU9Q6ZPM" frameborder="0" allowfullscreen></iframe>
			</div>
			<div class="item">
				<iframe width="100%" height="100%" src="https://www.youtube.com/embed/NbqUU9Q6ZPM" frameborder="0" allowfullscreen></iframe>
			</div>
		</div>

$(document).ready(function(){
'use strict';
    
    var $frame = $('#carousel');
        var $wrap  = $frame.parent();

        // Call Sly on frame
        $frame.sly({
            horizontal: 1,
            itemNav: 'forceCentered',
            smart: 1,
            activateMiddle: 1,
            activateOn: 'click',
            mouseDragging: 1,
            touchDragging: 1,
            releaseSwing: 1,
            startAt: 0,
            scrollBy: 1,
            speed: 300,
            elasticBounds: 1,2
            dragHandle: 1,
            dynamicHandle: 1,
            clickBar: 1
        });
})

Comments

[Aslan]

Что в консоли?

[GaserV]

Aslan: чисто.

[GaserV]

Aslan: только замечания css, но со стороны sly

Answer 1

[Serg Bakay]

Думаю из-за того что у вас iframe в item-ах, слайдер не может инициализироваться пока грузятся эти ролики, попробуйте задать чёткую и высоту .item, или рисунок внутрь, а айфреймы позиционировать абсолютно поверху