Адаптивный слайдер не работает - конфликтует с плагином jquery - PullRequest
Новая
       6

Адаптивный слайдер не работает - конфликтует с плагином jquery

0 голосов
/ 12 января 2020

Я пытаюсь добавить Slick Slider на сайт, и он работает, но он не отвечает. При просмотре на мобильном телефоне он остается в виде четырех столбцов. 

<script src="//cdn.shopify.com/s/files/1/0070/9971/1557/t/9/assets/slick.min.js?v=7177913489436168581" type="text/javascript"></script>
<script type="text/javascript">


$(document).ready(function(){
$('.featured-slider').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
prevArrow: '<button type="button" class="slick-prev"><img src="//cdn.shopify.com/s/files/1/0070/9971/1557/t/9/assets/icon-left.svg?v=1916513632564042252"></button>',
    nextArrow: '<button type="button" class="slick-next"><img src="//cdn.shopify.com/s/files/1/0070/9971/1557/t/9/assets/icon-right.svg?v=6098146811289990150"></button>',
  responsive: [
{
  breakpoint: 1024,
  settings: {
    slidesToShow: 4,
    slidesToScroll: 1,
    infinite: true,
    dots: false
  }
},
{
  breakpoint: 600,
  settings: {
    slidesToShow: 2,
    slidesToScroll: 1
  }
},
{
  breakpoint: 480,
  settings: {
    slidesToShow: 1,
    slidesToScroll: 1
  }
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
 ]
 });
 });
 </script>

Как вы можете видеть, это сайт shopify, и он не выдает никаких ошибок в консоли, но после большого тестирования я выявил некоторые javascript, который, кажется, ломает отзывчивость слайдера. Плагин Jquery, называемый throttle / debounce ... Похоже на это ... 

 /*
 * jQuery throttle / debounce - v1.1 - 3/7/2010
 * http://benalman.com/projects/jquery-throttle-debounce-plugin/
 *
 * Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */

 function(e,t){var n,i=e.jQuery||e.Cowboy||(e.Cowboy={});i.throttle=n=function(e,n,o,r){function s(){function i(){l=+new Date,o.apply(u,d)}function s(){a=t}var u=this,c=+new Date-l,d=arguments;r&&!a&&i(),a&&clearTimeout(a),r===t&&c>e?i():n!==!0&&(a=setTimeout(r?s:i,r===t?e-c:e))}var a,l=0;return"boolean"!=typeof n&&(r=o,o=n,n=t),i.guid&&(s.guid=o.guid=o.guid||i.guid++),s},i.debounce=function(e,i,o){return o===t?n(e,i,!1):n(e,o,i!==!1)}}(this);

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

...