滑塊邊緣使用Drupal顯示下一張幻燈片Slick.js滑塊

我們在網站上使用Slick Slider，並且在Safari中顯示下一張幻燈片的1像素片。滑塊邊緣使用Drupal顯示下一張幻燈片Slick.js滑塊

任何人都可以提供一些建議，這是一個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; 
    } 
}

來源

2015-12-10 tdaff

請張貼您的代碼。我們不會瀏覽您的網站進行調試。 – Raptor

如果你認爲它的Javascript我建議你關閉它或顯示這個沒有調用JavaScript函數。

如果你仍然看到1px行，那麼它必須是CSS，我建議你檢查你使用的是哪個版本的Safari，以及什麼是滑動滑塊支持。

來源

2015-12-11 20:36:26 Gibbet

滑塊邊緣使用Drupal顯示下一張幻燈片Slick.js滑塊

回答

相關問題