22
Июл
2021

Как добавить функцию hover на медленный карусель?

Ребята помогите, пожалуйста, буду очень благодарен. Есть карусель с логотипами они двигаются в одну сторону очень медленно и при наведении нужно чтоб они остнавливались, а когда убираем мышку оно должно продолжить свой путь с той же скоростью, я еле как сделал так чтоб он останавливался, но не могу сделать так чтоб он корректно продолжал свою работу.

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

var swiper = new Swiper(".mySwiper", {
  slidesPerView: 'auto',
  spaceBetween: 100,
  centeredSlides: false,
  draggable: false,
  simulateTouch: false,
  loop: true,
  autoplay: {
    delay: 0,
    disableOnInteraction: true,
  },
  speed: 5000,
  freeMode: true,
});





$('.swiper-container').on('mouseenter', function(e) {
  swiper.setTranslate(swiper.getTranslate());
  swiper.autoplay.stop();
  console.log('stsart');
})
$('.swiper-container').on('mouseleave', function(e) {
  swiper.update(true);
  swiper.autoplay.start();
})
<section class="swiper-container media-mentions__main mySwiper">
  <div class=" swiper-wrapper">
    <a href="https://www.newsweek.com/bitcoins-price-lowest-since-january-us-top-destination-global-money-1603176" class="media__item swiper-slide" 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="swiper-slide 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 swiper-slide">
                    <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 swiper-slide">
                    <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 swiper-slide">
                    <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 swiper-slide">
                    <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 swiper-slide">
                    <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 swiper-slide">
                    <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 swiper-slide">
                    <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 swiper-slide">
                    <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 swiper-slide">
                    <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>

само поведение карусель с этим кодом

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

Источник: https://ru.stackoverflow.com/questions/1307777/%D0%9A%D0%B0%D0%BA-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C-%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D1%8E-hover-%D0%BD%D0%B0-%D0%BC%D0%B5%D0%B4%D0%BB%D0%B5%D0%BD%D0%BD%D1%8B%D0%B9-%D0%BA%D0%B0%D1%80%D1%83%D1%81%D0%B5%D0%BB%D1%8C

Тебе может это понравится...

Добавить комментарий