Сова Карусель внутри Div Дисплей: никто не работает - PullRequest
Новая
       14

Сова Карусель внутри Div Дисплей: никто не работает

0 голосов
/ 10 мая 2019

У меня есть карусель совы внутри div, div скрыт с отображением: нет;и я переключаю его с помощью jquery.

Структура HTML / PHP: 

<em class="otherdemoicon"></em>

<div class="otherdemos">
    <div class="container">
        <div class="has-carousel" data-items="4" data-loop="true" data-dots="true" data-auto="false" data-navs="false">
            <?php foreach ($list as $item) : $images = json_decode($item->images); ?>
                <div class="item text-center">
                    <a href="<?php echo $item->link; ?>" itemprop="url">
                        <img src="<?php echo $images->image_intro ?>" alt="client" />
                        <?php echo $item->title; ?>
                    </a>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>

CSS: 

.otherdemos {
    position: fixed;
    width: 100%;
    background: #111;
    left: 0;
    right: 0;
    top: 50px;
    border-top: 1px solid #222;
    display: none;
    padding: 15px 0;
}

Сценарий div триггера: 

(function ($) {
    $(document).ready(function () {
        $('.otherdemoicon').click(function () {
            $('.otherdemos').toggle();
        });
})(jQuery);

Jquery-скрипт для совы-карусели: 

(function ($) {
    //Carousel
    var $has_carousel = $('.has-carousel');
    if ($has_carousel.length > 0) {
        $has_carousel.each(function () {
            var $self = $(this);
            var c_item = ($self.data('items')) ? $self.data('items') : 4;
            var c_item_t = (c_item >= 3) ? 3 : c_item;
            var c_item_m = (c_item_t >= 2) ? 2 : c_item_t;
            var c_delay = ($self.data('delay')) ? $self.data('delay') : 6000;
            var c_auto = ($self.data('auto')) ? true : false;
            var c_loop = ($self.data('loop')) ? true : false;
            var c_dots = ($self.data('dots')) ? true : false;
            var c_navs = ($self.data('navs')) ? true : false;
            var c_ctr = ($self.data('center')) ? true : false;
            var c_mgn = ($self.data('margin')) ? $self.data('margin') : 30;
            var c_animateOut = ($self.data('animateOut')) ? $self.data('animateOut') : 'fadeOut';
            $self.owlCarousel({
                navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
                items: c_item, loop: c_loop, nav: c_navs, dots: c_dots, margin: c_mgn, center: c_ctr, animateOut: c_animateOut,
                autoplay: c_auto, autoplayTimeout: c_delay, autoplaySpeed: 300,
                responsive: {0: {items: 1}, 480: {items: c_item_m}, 768: {items: c_item_t}, 1170: {items: c_item}}
            });
        });
    }
})(jQuery);

Проблема в том, что отображение: ни один не вызывает сову при неправильном изменении размера элементов внутри div при запуске.

Я неЯ не хочу использовать непрозрачность: 0/1 и высоту: 0 / авто по некоторым причинам, поэтому я попытался обновить карусель при запуске, но никоим образом: 

$('.otherdemoicon').click(function () {
    $('.otherdemos').toggle();
    $(".has-carousel").trigger("refresh.owl.carousel");
});

Любое предложение?

...