Question

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

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

这是使用Drupal slick module。

呈现HTML

select 
  Server,
  MAX(CASE WHEN Site ='AA' and [Time]=MaxRoundTrip Then RoundTrip else NULL end)  as [AA-Roundtrip],
  MAX(CASE WHEN Site='AA'  then MaxRoundTrip  else NULL end) as [Time-AA],
  MAX(CASE WHEN Site ='BB' and [Time]=MaxRoundTrip Then RoundTrip else NULL end)  as [BB-Roundtrip],
  MAX(CASE WHEN Site='BB'  then MaxRoundTrip  else NULL end) as [Time-BB]
from
(
  select *, MAX([Time]) Over(Partition by Server, Site) as maxroundtrip from t
) t
group by Server

screen.css

<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>

光滑-fullwidth.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";
}

Answer 1

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

如果您仍然看到1px行，那么它必须是css，我建议您检查您使用的Safari版本以及光滑滑块支持的内容。

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

1 个答案: