English 中文(简体)
Slick slider Responses not working safari
原标题:Slick slider responsive not working safari
  • 时间:2023-12-08 23:35:40
  •  标签:
  • slick.js

我的网站上有许多精子,他们都完全按照这一守则开展工作,今天(在发射之前2天)所有浮雕的反应环境都停止了在智能移动(花在神、edge和火ox上的工作)。 当你改变方向时,除非你以同样的方向更新浏览器,否则环境不会改变。

我只改动了一些微不足道的安保部,甚至回到原来的版本,但仍然坚持下去。

我也试图逐个逐个消除每一梯子,放弃任何优化的gin子。

我对所有法典都表示歉意,但我知道它有很多事情,但没有做任何工作,因此我不知道问题究竟是在哪里。

我试图将所有职能合并为一个职能,但我不肯定如何。

我曾尝试增加冲破台式的机动车,我还试图增加。

$(window).on( orientationchange , function() {
  $( .slider-name ).slick( resize );
});

每次工作都失败了,但我不敢肯定我的安置情况,我也尝试了竞选,但又一次,不能确定我的安置是否正确。

我也曾尝试过审判。

( function( $ ) {
  class SlickCarousel {
    constructor() {
      this.initiateCarousel();
      this.setupResizeHandler();
    }

  //sliders

    setupResizeHandler() {
      // Handle window resize event
      $(window).on( resize , () => {
        // Destroy the current slick instance
        this.carousel.slick( unslick );
        // Reinitialize the carousel with updated settings
        this.initiateCarousel();
      });
    }
  }

  new SlickCarousel();

} )( jQuery );

而且,这种工作,但有时使弱者完全消失。

正式法典

 (function($) {
  class SlickCarousel {
    constructor() {
      this.initiateCarousel();
    }

    initiateCarousel() {
      $( .motpm-carousel ).slick({
        autoplay: false,
        slidesToShow: 3,
        slidesToScroll: 1,
        arrows: true,
        infinite: true,
        dots: false,
        responsive: [
          {
            breakpoint: 768,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 1
            }
          },
          {
            breakpoint: 551,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1
            }
          }
        ]
      });
    }
  }

  new SlickCarousel();
})(jQuery);

(function($) {
  class SlickCarousel {
    constructor() {
      this.initiateCarousel();
    }

    initiateCarousel() {
      $( .hero-slider ).slick({
        autoplay: true,
        slidesToShow: 1,
        infinite: true,
        speed: 800,
        fade: true,
        cssEase:  linear ,
        slidesToScroll: 1,
        dots: false,
        autoplaySpeed: 3800,
        pauseOnHover: false,
        arrows: false,
        responsive: [
          {
            breakpoint: 768,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 1
            }
          },
          {
            breakpoint: 551,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1
            }
          }
        ]
      });
    }
  }

  new SlickCarousel();
})(jQuery);

(function($) {
  class SlickCarousel {
    constructor() {
      this.initiateCarousel();
    }

    initiateCarousel() {
      $( .motpm-discover-carousel ).slick({
        autoplay: false,
        slidesToShow: 4,
        slidesToScroll: 1,
        arrows: true,
        infinite: true,
        dots: true,
        responsive: [
          {
            breakpoint: 1401,
            settings: {
              slidesToShow: 3,
              slidesToScroll: 1
            }
          },
          {
            breakpoint: 1001,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 2
            }
          },
          {
            breakpoint: 451,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1,
              dots: false
            }
          }
        ]
      });

      $( .slide-prev-discover ).click(function(e) {
        $( .motpm-discover-carousel ).slick( slickPrev );
      });

      $( .slide-next-discover ).click(function(e) {
        $( .motpm-discover-carousel ).slick( slickNext );
      });
    }
  }

  new SlickCarousel();
})(jQuery);

(function($) {
  class SlickCarousel {
    constructor() {
      this.initiateCarousel();
    }

    initiateCarousel() {
      $( .key-events:not(.events-2, .events-1) .motpm-key-events-carousel ).slick({
        autoplay: false,
        slidesToShow: 3,
        slidesToScroll: 3,
        arrows: true,
        infinite: true,
        dots: true,
        responsive: [
          {
            breakpoint: 1001,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 2
            }
          },
          {
            breakpoint: 901,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 2,
              arrows: false
            }
          },
          {
            breakpoint: 551,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1,
              arrows: false,
              dots: false
            }
          }
        ]
      });

      $( .slide-prev-events ).click(function(e) {
        $( .key-events:not(.events-2, .events-1) .motpm-key-events-carousel ).slick( slickPrev );
      });

      $( .slide-next-events ).click(function(e) {
        $( .key-events:not(.events-2, .events-1) .motpm-key-events-carousel ).slick( slickNext );
      });
    }
  }

  new SlickCarousel();
})(jQuery);

(function($) {
  class SlickCarousel {
    constructor() {
      this.initiateCarousel();
    }

    initiateCarousel() {
      $( .key-insights:not(.insights-2, .insights-1) .motpm-key-insights-carousel ).slick({
        autoplay: false,
        slidesToShow: 3,
        slidesToScroll: 3,
        arrows: false,
        infinite: true,
        dots: true,
        responsive: [
          {
            breakpoint: 1051,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 2
            }
          },
          {
            breakpoint: 901,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 2,
              arrows: false
            }
          },
          {
            breakpoint: 551,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1,
              arrows: false
            }
          },
          {
            breakpoint: 551,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1,
              arrows: false,
              dots: false
            }
          }
        ]
      });

      $( .slide-prev-insights ).click(function(e) {
        $( .key-insights:not(.insights-2, .insights-1) .motpm-key-insights-carousel ).slick( slickPrev );
      });

      $( .slide-next-insights ).click(function(e) {
        $( .key-insights:not(.insights-2, .insights-1) .motpm-key-insights-carousel ).slick( slickNext );
      });
    }
  }

  new SlickCarousel();
})(jQuery);

(function($) {
  class SlickCarousel {
    constructor() {
      this.initiateCarousel();
    }

    initiateCarousel() {
      $( .pm-slider ).slick({
        autoplay: false,
        slidesToShow: 3,
        slidesToScroll: 1,
        arrows: false,
        infinite: false,
        variableWidth: true,
        dots: false,
        responsive: [
          {
            breakpoint: 1001,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 1,
              rows: 0
            }
          },
          {
            breakpoint: 768,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1,
              rows: 0
            }
          }
        ]
      });

      var filtered = false;

      $(document).ready(function() {
        let filtered = false;

        function applyFilters() {
          const screenWidth = window.innerWidth;

          if (screenWidth >= 768) {
            if (filtered) {
              $( .pm-slider ).slick( slickUnfilter );
              filtered = false;
            }
          } else {
            if (!filtered) {
              $( .pm-slider ).slick( slickFilter , $( .desktop-content-pm ).parent().parent());
              filtered = true;
            }
          }
        }

        applyFilters();

        $(window).resize(function() {
          applyFilters();
        });
      });

      $( .slide-prev ).click(function(e) {
        $( .pm-slider ).slick( slickPrev );
      });

      $( .slide-next ).click(function(e) {
        $( .pm-slider ).slick( slickNext );
      });
    }
  }

  new SlickCarousel();
})(jQuery);

(function($) {
  class SlickCarousel {
    constructor() {
      this.initiateCarousel();
    }

    initiateCarousel() {
      $( .pm-slider-content ).slick({
        autoplay: false,
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        infinite: false,
        fade: true,
        cssEase:  linear ,
        dots: false
      });

      var filter = false;

      $(document).ready(function() {
        let filter = false;

        function applyFiltering() {
          const screenWidth = window.innerWidth;

          if (screenWidth > 1000) {
            if (!filter) {
              $( .pm-slider-content ).slick( slickFilter , $( .desktop-content ).parent().parent());
              filter = true;
            }
          } else {
            if (filter) {
              $( .pm-slider-content ).slick( slickUnfilter );
              filter = false;
            }
          }
        }

        applyFiltering();

        $(window).resize(function() {
          applyFiltering();
        });
      });

      $( .slide-prev ).click(function(e) {
        $( .pm-slider-content ).slick( slickPrev );
      });

      $( .slide-next ).click(function(e) {
        $( .pm-slider-content ).slick( slickNext );
      });
    }
  }

  new SlickCarousel();
})(jQuery);

(function($) {
  class SlickCarousel {
    constructor() {
      this.initiateTestimonialCarousel();
      this.initiateNavCarousel();
    }

    initiateTestimonialCarousel() {
      $( .testimonial-slider-wrap ).slick({
        autoplay: false,
        slidesToShow: 1,
        slidesToScroll: 1,
        centerMode: true,
        infinite: true,
        dots: false,
        asNavFor:  .slider-nav ,
        responsive: [
          {
            breakpoint: 1221,
            settings: {
              arrows: false,
            }
          }
        ]
      });
    }

    initiateNavCarousel() {
      $( .slider-nav ).slick({
        slidesToShow: 6,
        slidesToScroll: 1,
        asNavFor:  .testimonial-slider-wrap ,
        dots: true,
        centerMode: true
      });

      $( .test-prev ).click(function(e) {
        $( .testimonial-slider-wrap ).slick( slickPrev );
      });

      $( .test-next ).click(function(e) {
        $( .testimonial-slider-wrap ).slick( slickNext );
      });
    }
  }

  new SlickCarousel();
})(jQuery);

$( .slider-nav )
  .on( init , function(event, slick) {
    $( .slider-nav .slick-slide.slick-current ).addClass( is-active );
  })

$( .testimonial-slider-wrap ).on( afterChange , function(event, slick, currentSlide) {
  $( .slider-nav ).slick( slickGoTo , currentSlide);
  var currrentNavSlideElem =  .slider-nav .slick-slide[data-slick-index="  + currentSlide +  "] ;
  $( .slider-nav .slick-slide.is-active ).removeClass( is-active );
  $(currrentNavSlideElem).addClass( is-active );
});

$( .slider-nav ).on( click ,  .slick-slide , function(event) {
  event.preventDefault();
  var goToSingleSlide = $(this).data( slick-index );

  $( .testimonial-slider-wrap ).slick( slickGoTo , goToSingleSlide);
});

$( .motpm-discover-carousel ).slick( setPosition );
问题回答

我爱Slick,因为它通常贴上箱子。 你的情况是令人厌恶的,我不得不亲眼检查。

您在问世时表示,当你改变流动航道方向时,便不会发生断点事件。

Mobile Safari can be fickle at the best of times. What version of Mobile Safari were you testing in?

I ve为带有多条<代码>的浮车壳形形形形形形形形形形形色色码(ToShow)的标准破碎点创造了一个绝对最低的例子。 从最小装置开始,然后使用<代码>mobileFirst:真实。

这里和黑手工业的移动取向点受到考验。 但是,在编码中,你可以使用以下链接测试移动式航道的方向变化...... (电话:Result,在移动式Sarim开放这一链接之后立即列表)

https://codepen.io/joshmoto/embed/abXMJgB?default-tab=html%2Cresult

如你在博佛的“流动航道”中看到的那样。

enter image description here


但是,当你轮用你的装置定位时,车轮应当自动把断点环境移至<条码>,并照此办理。

“entergraph


阁下所描述的问题是:

在我的基本网站举例说,定向活动正在做罚款,并转向预期的中断点。

See my example code below...

// breakpoints
const breakpoint = {
  // extra small screen / phone
  xs: 0,
  // small screen / phone
  sm: 576,
  // medium screen / tablet
  md: 768,
  // large screen / desktop
  lg: 992,
  // extra large screen / wide desktop
  xl: 1200,
  // extra extra large screen / full hd
  xxl: 1400
};

// init slick slider
$("#slick").slick({
  dots: true,
  infinite: true,
  autoplay: true,
  autoplaySpeed: 500,
  speed: 500,
  adaptiveHeight: true,
  mobileFirst: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  responsive: [{
      breakpoint: breakpoint.sm,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: breakpoint.md,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: breakpoint.lg,
      settings: {
        slidesToShow: 4,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: breakpoint.xl,
      settings: {
        slidesToShow: 5,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: breakpoint.xxl,
      settings: {
        slidesToShow: 6,
        slidesToScroll: 1
      }
    }
  ]
});
FIGURE {
  margin: 0;
  display: block;
}

IMG {
  width: 100%;
}

MARK {
  display: block;
  margin: 0 auto;
  text-align: center;
  width: 220px;
  padding: 5px 0;
  margin-top: 3rem;
}

MARK::after {
  font-weight: bold;
  content:  XS / 0px ;
}

@media (min-width: 576px) {
  MARK::after {
    content:  SM / 576px  !important;
  }
}

@media (min-width: 768px) {
  MARK::after {
    content:  MD / 768px  !important;
  }
}

@media (min-width: 992px) {
  MARK::after {
    content:  LG / 992px  !important;
  }
}

@media (min-width: 1200px) {
  MARK::after {
    content:  XL / 1200px  !important;
  }
}

@media (min-width: 1400px) {
  MARK::after {
    content:  XXL / 1400px  !important;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div id="slick">
  <figure>
    <img src="https://i.imgur.com/q5Y5RCH.png" alt="" />
  </figure>
  <figure>
    <img src="https://i.imgur.com/8HjXPXD.png" alt="" />
  </figure>
  <figure>
    <img src="https://i.imgur.com/vUDcfcy.png" alt="" />
  </figure>
  <figure>
    <img src="https://i.imgur.com/okTDHas.png" alt="" />
  </figure>
  <figure>
    <img src="https://i.imgur.com/q5Y5RCH.png" alt="" />
  </figure>
  <figure>
    <img src="https://i.imgur.com/8HjXPXD.png" alt="" />
  </figure>
  <figure>
    <img src="https://i.imgur.com/vUDcfcy.png" alt="" />
  </figure>
  <figure>
    <img src="https://i.imgur.com/okTDHas.png" alt="" />
  </figure>
</div>

<mark>Breakpoint: </mark>

这里是《刑法》中与全面职业守则的联系......

https://codepen.io/joshmoto/pen/abXMJgB”rel=“nofollow noreferer”>https://codepen.io/joshmoto/pen/abXMJgB

As far as I can see, there should be no problemo in Mobile Safari.

Try use my example in your project and work backwards to debug the issue perhaps..

希望这一帮助?





相关问题
Slick slider Responses not working safari

我的网站上有许多精子,他们都完全遵循这一守则,今天(在发射之前2天)所有的浮雕反应环境都停止了在聋 the里正常工作......

react-slick slider Custom arrows

I am using react-slick library for slider component, my Slider component contains 8 slides , initially , my previous and next buttons are working fine , i want the next button should be disabled when ...

Slick vertical content has been cut off below

I have 14 items/steps in the slick, however if I click the last dots item it shows the step 13 and the step 14 has been cut off. Any ideas or suggestions how to fix it? Setting the height of slick-...

热门标签