滑块边缘使用 Drupal Slick.js 滑块显示下一张幻灯片

Question

我们正在网站上使用 Slick Slider，Safari 中显示下一张幻灯片的 1px 切片。

任何人都可以就此提供一些建议，这是 CSS 问题还是 Safari 的 javascript 问题？

这是使用 Drupal slick module。

渲染HTML

<div class=
"slick-wrapper slick-wrapper--asnavfor slick-wrapper--fullwidth">
  <div class=
  "slick slick--slider slick--optionset--content-page-slider-main slick--skin--fullwidth slick--float slick--has-arrow-down content_page_slider--for slick--display--main slick-processed"
  id="slick-views-content-page-slider-1">
    <div id="slick-views-content-page-slider-1-slider" class=
    "slick__slider slick-initialized slick-slider" data-config=
    "{&quot;asNavFor&quot;:&quot;#slick-views-content-page-slider-1-thumbnail-slider&quot;,&quot;arrows&quot;:false,&quot;lazyLoad&quot;:&quot;progressive&quot;,&quot;edgeFriction&quot;:0.15}">
    <div aria-live="polite" class="slick-list draggable"
      tabindex="0">
        <div class="slick-track" style=
        "opacity: 1; width: 8190px; transform: translate3d(-1170px, 0px, 0px);">
        <div class=
        "slick__slide slide slide--4 slick-slide slick-cloned"
        data-slick-index="-1" aria-hidden="true" style=
        "width: 1170px;">
            <div class="slide__content">
              <div class="field-slideshow-images">
                <img class="main-banner-image" src=
                "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/main_banner_image/public/woolamai_beach_house_garden_view_0.jpg?itok=kDZplCkS" />
              </div>
            </div>
          </div>
          <div class=
          "slick__slide slide slide--0 slick-slide slide--current slick-active"
          data-slick-index="0" aria-hidden="false" style=
          "width: 1170px;">
            <div class="slide__content">
              <div class="field-slideshow-images">
                <img class="main-banner-image" src=
                "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/main_banner_image/public/woolamai_beach_house_upstairs_master_view_0.jpg?itok=jcRT7hnl&amp;c=c76f5764a09bd40100acd53593ac8dfa" />
              </div>
            </div>
          </div>
          <div class="slick__slide slide slide--1 slick-slide"
          data-slick-index="1" aria-hidden="true" style=
          "width: 1170px;">
            <div class="slide__content">
              <div class="field-slideshow-images">
                <img class="main-banner-image" src=
                "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/main_banner_image/public/woolamai_beach_house_beach_1.jpg?itok=KbTEgpZe&amp;c=77bef140990b6d505ccd43f0c11bc58f" />
              </div>
            </div>
          </div>
          <div class="slick__slide slide slide--2 slick-slide"
          data-slick-index="2" aria-hidden="true" style=
          "width: 1170px;">
            <div class="slide__content">
              <div class="field-slideshow-images">
                <img class="main-banner-image" src=
                "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/main_banner_image/public/20151106_woolamai_87_0.jpg?itok=ew5c4nrt&amp;c=1c371698bba9a4a1779caa9b36e56c60" />
              </div>
            </div>
          </div>
          <div class="slick__slide slide slide--3 slick-slide"
          data-slick-index="3" aria-hidden="true" style=
          "width: 1170px;">
            <div class="slide__content">
              <div class="field-slideshow-images">
                <img class="main-banner-image" src=
                "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/main_banner_image/public/woolamai_beach_house_upstairs_master_view_0_1.jpg?itok=2MjHOtZd&amp;c=3e2358112a9d75fd194fa80439939410" />
              </div>
            </div>
          </div>
          <div class="slick__slide slide slide--4 slick-slide"
          data-slick-index="4" aria-hidden="true" style=
          "width: 1170px;">
            <div class="slide__content">
              <div class="field-slideshow-images">
                <img class="main-banner-image" src=
                "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/main_banner_image/public/woolamai_beach_house_garden_view_0.jpg?itok=kDZplCkS" />
              </div>
            </div>
          </div>
          <div class=
          "slick__slide slide slide--0 slick-slide slick-cloned"
          data-slick-index="5" aria-hidden="true" style=
          "width: 1170px;">
            <div class="slide__content">
              <div class="field-slideshow-images">
                <img class="main-banner-image" src=
                "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/main_banner_image/public/woolamai_beach_house_upstairs_master_view_0.jpg?itok=jcRT7hnl&amp;c=c76f5764a09bd40100acd53593ac8dfa" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div><button type="button" data-role="none" class=
    "slick-prev slick-nav">Previous</button> <button type="button"
    data-role="none" class="slick-next slick-nav">Next</button>
  </div>
  <div class=
  "slick slick--carousel slick--optionset--content-page-slider-nav slick--skin--classic slick--center content_page_slider--nav slick--display--thumbnail slick-processed"
  id="slick-views-content-page-slider-1-thumbnail">
    <div id="slick-views-content-page-slider-1-thumbnail-slider"
    class="slick__slider slick-initialized slick-slider"
    data-config=
    "{&quot;asNavFor&quot;:&quot;#slick-views-content-page-slider-1-slider&quot;,&quot;centerMode&quot;:true,&quot;centerPadding&quot;:&quot;0&quot;,&quot;draggable&quot;:false,&quot;focusOnSelect&quot;:true,&quot;lazyLoad&quot;:&quot;progressive&quot;,&quot;slidesPerRow&quot;:3,&quot;slide&quot;:&quot;.slick__slide&quot;,&quot;slidesToShow&quot;:3,&quot;slidesToScroll&quot;:3,&quot;touchMove&quot;:false}">
    <div aria-live="polite" class="slick-list" tabindex="0"
      style="padding: 0px;">
        <div class="slick-track" style=
        "opacity: 1; width: 4420px; transform: translate3d(-1020px, 0px, 0px);">
        <div class=
        "slick__slide slide slide--1 slick-slide slick-cloned"
        data-slick-index="-4" aria-hidden="true" style=
        "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/woolamai_beach_house_beach_1.jpg?itok=jDtEu-oN&amp;c=46ecfc35be474cdaf88fc08ebd4c09dc" />
          </div>
          <div class=
          "slick__slide slide slide--2 slick-slide slick-cloned"
          data-slick-index="-3" aria-hidden="true" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/20151106_woolamai_87_0.jpg?itok=DST50iVI&amp;c=f385a5f53651b861eba3f64b9f59ebca" />
          </div>
          <div class=
          "slick__slide slide slide--3 slick-slide slick-cloned"
          data-slick-index="-2" aria-hidden="true" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/woolamai_beach_house_upstairs_master_view_0_1.jpg?itok=BpCmxDE1&amp;c=d508a1b24119b7633a7fbd9cdf62a28e" />
          </div>
          <div class=
          "slick__slide slide slide--4 slick-slide slick-cloned slick-active"
          data-slick-index="-1" aria-hidden="false" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/woolamai_beach_house_garden_view_0.jpg?itok=xsaPHwsd" />
          </div>
          <div class=
          "slick__slide slide slide--0 slick-slide slick-active slick-center slide--current"
          data-slick-index="0" aria-hidden="false" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/woolamai_beach_house_upstairs_master_view_0.jpg?itok=lWw43Bg9&amp;c=aaa1133179ec5604fae6f639c2e4c43b" />
          </div>
          <div class=
          "slick__slide slide slide--1 slick-slide slick-active"
          data-slick-index="1" aria-hidden="false" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/woolamai_beach_house_beach_1.jpg?itok=jDtEu-oN&amp;c=46ecfc35be474cdaf88fc08ebd4c09dc" />
          </div>
          <div class="slick__slide slide slide--2 slick-slide"
          data-slick-index="2" aria-hidden="true" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/20151106_woolamai_87_0.jpg?itok=DST50iVI&amp;c=f385a5f53651b861eba3f64b9f59ebca" />
          </div>
          <div class="slick__slide slide slide--3 slick-slide"
          data-slick-index="3" aria-hidden="true" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/woolamai_beach_house_upstairs_master_view_0_1.jpg?itok=BpCmxDE1&amp;c=d508a1b24119b7633a7fbd9cdf62a28e" />
          </div>
          <div class="slick__slide slide slide--4 slick-slide"
          data-slick-index="4" aria-hidden="true" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/woolamai_beach_house_garden_view_0.jpg?itok=xsaPHwsd" />
          </div>
          <div class=
          "slick__slide slide slide--0 slick-slide slick-cloned slick-center"
          data-slick-index="5" aria-hidden="true" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/woolamai_beach_house_upstairs_master_view_0.jpg?itok=lWw43Bg9&amp;c=aaa1133179ec5604fae6f639c2e4c43b" />
          </div>
          <div class=
          "slick__slide slide slide--1 slick-slide slick-cloned"
          data-slick-index="6" aria-hidden="true" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/woolamai_beach_house_beach_1.jpg?itok=jDtEu-oN&amp;c=46ecfc35be474cdaf88fc08ebd4c09dc" />
          </div>
          <div class=
          "slick__slide slide slide--2 slick-slide slick-cloned"
          data-slick-index="7" aria-hidden="true" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/20151106_woolamai_87_0.jpg?itok=DST50iVI&amp;c=f385a5f53651b861eba3f64b9f59ebca" />
          </div>
          <div class=
          "slick__slide slide slide--3 slick-slide slick-cloned"
          data-slick-index="8" aria-hidden="true" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/woolamai_beach_house_upstairs_master_view_0_1.jpg?itok=BpCmxDE1&amp;c=d508a1b24119b7633a7fbd9cdf62a28e" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

screen.css

/**================================================================================================================/
*
* @SLICK THEME
*
*=================================================================================================================*/
/* line 270, ../sass/partials/parcel_panes/_content-slider.scss */
.slick-prev {
    left: 55px !important;
}

/* line 274, ../sass/partials/parcel_panes/_content-slider.scss */
.slick-next {
    right: 55px !important;
}

/* line 278, ../sass/partials/parcel_panes/_content-slider.scss */
.slick-prev, .slick-next {
    background: #fafafa;
    -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}

/* line 280, ../sass/partials/parcel_panes/_content-slider.scss */
.slick-prev.slick-disabled, .slick-next.slick-disabled {
    opacity: 0;
}

/* line 287, ../sass/partials/parcel_panes/_content-slider.scss */
.slick-prev:hover, .slick-next:hover {
    background: white;
    -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}

/* line 290, ../sass/partials/parcel_panes/_content-slider.scss */
.slick-prev:hover:before, .slick-next:hover:before {
    color: #cccccc !important;
    background: white;
}

/* line 296, ../sass/partials/parcel_panes/_content-slider.scss */
.slick-prev:focus, .slick-prev:active, .slick-next:focus, .slick-next:active {
    background: white;
    -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

/* line 299, ../sass/partials/parcel_panes/_content-slider.scss */
.slick-prev:focus:before, .slick-prev:active:before, .slick-next:focus:before,
.slick-next:active:before {
    color: #e6e6e6 !important;
    background: white;
}

/* line 308, ../sass/partials/parcel_panes/_content-slider.scss */
.slick-prev:before, .slick-next:before {
    font-family: FontAwesome;
    font-size: 40px;
    line-height: 1;
    color: #cccccc !important;
    opacity: 0.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* line 317, ../sass/partials/parcel_panes/_content-slider.scss */
.slick-prev:before {
    content: "\f177";
}

/* line 318, ../sass/partials/parcel_panes/_content-slider.scss */
[dir="rtl"] .slick-prev:before {
    content: "\f177";
}

/* line 320, ../sass/partials/parcel_panes/_content-slider.scss */
[dir="rtl"] .slick-next {
    left: -10px;
    top: 70px;
    right: auto;
}

/* line 321, ../sass/partials/parcel_panes/_content-slider.scss */
.slick-next:before {
    content: "\f178";
}

/* line 322, ../sass/partials/parcel_panes/_content-slider.scss */
[dir="rtl"] .slick-next:before {
    content: "\f178";
}

圆滑-fullwidth.css

/**
 * @file
 * Detailed stylings are all yours, get yourself dirty.
 */
.slick--skin--fullwidth {
  text-shadow: none;
}

.slick--skin--fullwidth .slide__caption {
  font-size: 22px;
  font-size: 1.375rem;
  color: #fff;
}

.slick--skin--fullwidth .slide__media img {
  width: 100%;
}

.slick--skin--fullwidth .slide__title {
  color: #fff;
  font-size: 48px;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.slick--skin--fullwidth .slide__link a {
  border-bottom: 2px solid rgba(255, 255, 255, 0.8);
  border-top: 2px solid rgba(255, 255, 255, 0.8);
  color: #fff;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.slick--skin--fullwidth .slide__link a:hover {
  border-color: #fff;
  color: #fff;
  text-decoration: none;
}

.slick--skin--fullwidth .slide__constrained {
  zoom: 1;
  min-height: 210px;
}

.slick--skin--fullwidth .slide__constrained::after {
  content: "";
  display: table;
  clear: both;
}

.slick--skin--fullwidth .slide__constrained .slide__caption {
  position: relative;
}

@media (min-width: 65em) {
  .slick--skin--fullwidth .slide__constrained {
    left: 50%;
    margin-left: -49%;
    position: absolute;
    top: 15%;
    width: 98%;
    z-index: 2;
  }
}

@media (min-width: 90em) {
  .slick--skin--fullwidth .slide__constrained {
    left: 50%;
    margin-left: -585px;
    position: absolute;
    top: 0;
    width: 1170px;
    z-index: 2;
  }
}

Answer 1

如果您认为它 Javascript 我建议您将其关闭或显示它而不调用 javascript 函数。

如果您仍然看到 1px 线，则它一定是 css，我建议您检查您使用的 Safari 版本以及 slick slider 支持的内容。

滑块边缘使用 Drupal Slick.js 滑块显示下一张幻灯片

Edge of slider shows next slide using Drupal Slick.js Slider

drupal-7

drupal-modules

slick.js