Остановка замедленного owl-carousel?

Question

[William Miller]

Нужно было сделать карусель с логотипами который движется медленно без остановки , это я смог сделать но после этого появилась проблема при наведении карусель останавливается только через 8 секунд я понимаю почему это происходит так как один слайд передвигается 8 сек и на отклик уходит 8 секунд помогите как можно реализовать такую вещь медленный слайд но при hovere чтоб остнавливался , никак не получается даже пробовал остановить отработку js кода не помогло,

<section class="media-mentions__main">
        <div class="media-mentions__cont owl-carousel">
            <a href="https://www.newsweek.com/bitcoins-price-lowest-since-january-us-top-destination-global-money-1603176" class="media__item" id="media__item">
                <img src="<?php echo get_template_directory_uri(); ?>/img/mentions/newsweek-white.png" alt="Media Logo" class="media__item_img media__item_img_hover">
                <img src="<?php echo get_template_directory_uri(); ?>/img/mentions/newsweek-hover.png" alt="Media Logo" class="media__item_img media__item_img_hovered">
            </a>
            <a href="https://www.theguardian.com/business/live/2021/may/19/uk-inflation-rises-april-energy-fuel-clothing-bitcoin-ftse-stock-markets-business-live?page=with:block-60a50bb48f081260045210aa" class="media__item">
                <img src="<?php echo get_template_directory_uri(); ?>/img/mentions/theguardian-white.png" alt="Media Logo" class="media__item_img media__item_img_hover">
                <img src="<?php echo get_template_directory_uri(); ?>/img/mentions/theguardian-hover.png" alt="Media Logo" class="media__item_img media__item_img_hovered">
            </a>
            <a href="https://www.cnbc.com/2021/05/19/bitcoin-btc-price-plunges-but-bottom-could-be-near-.html" class="media__item">
                <img src="<?php echo get_template_directory_uri(); ?>/img/mentions/cnbc-white.png" alt="Media Logo" class="media__item_img media__item_img_hover">
                <img src="<?php echo get_template_directory_uri(); ?>/img/mentions/cnbc-hover.png" alt="Media Logo" class="media__item_img media__item_img_hovered">
            </a>
            <a href="https://uk.finance.yahoo.com/news/market-wrap-bitcoin-under-pressure-202724263.html" class="media__item">
                <img src="<?php echo get_template_directory_uri(); ?>/img/mentions/yahoo-white.png" alt="Media Logo" class="media__item_img media__item_img_hover">
                <img src="<?php echo get_template_directory_uri(); ?>/img/mentions/yahoo-hover.png" alt="Media Logo" class="media__item_img media__item_img_hovered">
            </a>
            <a href="https://www.reuters.com/technology/bitcoin-struggles-footing-worries-over-china-leverage-2021-05-20/" class="media__item">
                <img src="<?php echo get_template_directory_uri(); ?>/img/mentions/reuters-white.png" alt="Media Logo" class="media__item_img media__item_img_hover">
                <img src="<?php echo get_template_directory_uri(); ?>/img/mentions/reuters-hover.png" alt="Media Logo" class="media__item_img media__item_img_hovered">
            </a>
            <a href="https://www.bloombergquint.com/crypto/bitcoin-erases-all-gains-since-elon-musk-s-initial-big-embrace" class="media__item">
                <img src="<?php echo get_template_directory_uri(); ?>/img/mentions/bloomberg-white.png" alt="Media Logo" class="media__item_img media__item_img_hover">
                <img src="<?php echo get_template_directory_uri(); ?>/img/mentions/bloomberg-hover.png" alt="Media Logo" class="media__item_img media__item_img_hovered">
            </a>
            <a href="https://www.financemagnates.com/cryptocurrency/trading/crypto-derivatives-demand-in-2021-industry-insiders-predict/" class="media__item">
                <img src="<?php echo get_template_directory_uri(); ?>/img/mentions/magnates-white.png" alt="Media Logo" class="media__item_img media__item_img_hover">
                <img src="<?php echo get_template_directory_uri(); ?>/img/mentions/magnates-hover.png" alt="Media Logo" class="media__item_img media__item_img_hovered">
            </a>
            <a href="https://borsen.dk/nyheder/investor/tunge-investorer-stovsuger-markedet-for-bitcoin" class="media__item">
                <img src="<?php echo get_template_directory_uri(); ?>/img/mentions/borsen-white.png" alt="Media Logo" class="media__item_img media__item_img_hover">
                <img src="<?php echo get_template_directory_uri(); ?>/img/mentions/borsen-hover.png" alt="Media Logo" class="media__item_img media__item_img_hovered">
            </a>
            <a href="https://www.coindesk.com/market-wrap-bitcoin-pressure-improving-sentiment" class="media__item">
                <img src="<?php echo get_template_directory_uri(); ?>/img/mentions/coindesk-white.png" alt="Media Logo" class="media__item_img media__item_img_hover">
                <img src="<?php echo get_template_directory_uri(); ?>/img/mentions/coindesk-hover.png" alt="Media Logo" class="media__item_img media__item_img_hovered">
            </a>
            <a href="https://forbes.com.br/forbes-money/2021/05/bitcoin-recua-519-e-caminha-para-forte-queda-mensal/" class="media__item">
                <img src="<?php echo get_template_directory_uri(); ?>/img/mentions/forbes-white.png" alt="Media Logo" class="media__item_img media__item_img_hover">
                <img src="<?php echo get_template_directory_uri(); ?>/img/mentions/forbes-hover.png" alt="Media Logo" class="media__item_img media__item_img_hovered">
            </a>
            <a href="https://www.moneymarketing.co.uk/news/crypto-trading-platform-launches-for-institutional-investors/" class="media__item">
                <img src="<?php echo get_template_directory_uri(); ?>/img/mentions/money-white.png" alt="Media Logo" class="media__item_img media__item_img_hover">
                <img src="<?php echo get_template_directory_uri(); ?>/img/mentions/money-hover.png" alt="Media Logo" class="media__item_img media__item_img_hovered">
            </a>
        </div>
  </section>

( function( $ ) {


    $(".media-mentions__cont").owlCarousel({
        items: 4,
        loop: true,
        center: false,
        margin: 10,
        autoWidth: false,
        autoplay: true,
        autoplayHoverPause: true,
        rewind: true,
        slideTransition: 'linear',
        autoplaySpeed: 8000,
        smartSpeed: 8000,
        responsive: {
            1200:{
                items: 5
            }
        }
    });
} )( jQuery );

Ссылка на видео как реагирует карусель на hover
https://youtu.be/6Txm5iz2iEE

Comments

[Elena_11]

присоединяюсь к вашему вопросу. Только мне нужно без ховера) но проблема та же. Уже несколько дней голову ломаю

[William Miller]

Elena_11, Нашли решение?

[Elena_11]

Сделала пока так. Проверку через счётчик, чтобы для первого запуска задать setTimeout отличный от других. Но у этого решения есть нюанс, по-моему перемена скорости происходит не так плавно, если всматриваться, то можно заметить некую перемену в скольжении. Но это если знать) у меня без ховера, вы можете с ховером под себя доработать и свои значения задать.
Также после изменения размера экрана и переключения активной вкладки - карусель стартует медленно опять.
Пробовала что-то вроде window.onresize = function( event ) {count = 0}; но анимация неровная какая-то получается. Видимо owl carousel не особо заточена под такие задачи

var owl=$("#reviews")

var count = 0;

 owl.owlCarousel({
        items: 5,
        nav: false,
        dots: false,
        loop: true,
        center: false,
        margin: 30,
        autoWidth: false,
        autoplay: false,
        rewind: false,
        slideTransition: 'linear',
        autoplaySpeed: 6000,
        smartSpeed: 6000,
        onChanged: callBack,
        responsive: {
            1200:{
                items: 5
            }
        }
})

function callBack(event) {

    if(count ===0) {
      owl.trigger('stop.owl.autoplay')
      setTimeout(function() { owl.trigger('play.owl.autoplay',[3500])});
      count++ 
     }

     if (count >0) {
           owl.trigger('play.owl.autoplay',[6000])
    }
   
    
}

[Elena_11]

William Miller, хотя озвученные проблемы наверное вас не касаются, потому что у вас стартует при наведении, а у меня вообще постоянно должна скользить. Если найдёте решение лучше, то поделитесь, пожалуйста

[William Miller]

Elena_11, Да , у меня тоже постоянно должна скользить + к этому при hovere должна замереть и потом продложить наверное у другой карусель буду использовать думаю с owl-ом не получиться

[Elena_11]

William Miller, а вы уже знаете с какой каруселью можно реализовать это? Или тоже пока в поиске?

[William Miller]

Elena_11, нет , я пока ищу если найду обязательно сообщу вам , вы тоже не забудьте меня ))

[Elena_11]

William Miller, вроде где-то мельком видела, что в slick слайдер можно реализовать. Но в демо у них на сайте такого не вижу, также на сайте на котором видела такую карусель используется вот этот скрипт https://swiperjs.com/swiper-api
Но там в демо тоже нет такого. Надо пробовать.
У меня проблема в том, что на owl вся страница свёрстана и менять из-за одной карусели скрипт совсем уж не хочется. Тем более пока уверенности полной нет на что именно.

[William Miller]

Elena_11, Вам же только чтоб бесконечно двигался ? можно реализовать в вашем случае через swiperjs

[Elena_11]

William Miller, да всё верно, а вы её пытались под себя приспособить? подошло?

[William Miller]

У меня проблема с hover останавливается это хорошо, но когда убираешь через 5 сек откликается var2.ark36.beget.tech

[Elena_11]

William Miller, подскажите, при помощи какого плагина в итоге решили проблему?

[William Miller]

Я честно забыл уже, у данных у меня можете на этом сайте проверить https://ark36.com/ По-моему было jssor slider и там нужно писать костыли можете в source посмотреть js код