1

次の CSS を使用して、素敵な小さなスライダーを設定しました。

/*SLIDER
===================================
*/

#full-slider-wrapper {
    overflow: hidden;
}

#full-slider {
    position: relative;
    width: auto;
    min-height: 1200px;
    margin: 0 auto;
}

#full-slider .slide-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    visibility: hidden;
}

#full-slider .slide-panel.active {
    visibility: visible;
} 


#full-slider-nav-left
{
  position: fixed; top: 550px; width: auto; margin: auto 0 auto auto;
  left: 0; width: 0; height: 0; cursor: pointer; border: 20px solid transparent; 

}

#full-slider-nav-right {
  position: fixed; top: 550px; width: auto; margin: auto auto auto 0;
  right:0; width: 0; height: 0; cursor: pointer; border: 20px solid transparent;
}


#full-slider-nav-left {
    border-right-color: #BBB;
}

#full-slider-nav-left:hover {
    border-right-color: #999;
}

#full-slider-nav-right {
    border-left-color: #BBB;
}

#full-slider-nav-right:hover {
    border-left-color: #999;
}

ご覧のとおり、コンテナの両側にナビゲーション矢印を設定しました。ページを上下にスクロールしても、固定されたままです。私はレスポンシブを使用しておりSkeleton framework、ブラウザーをモバイルサイズに折りたたむと、矢印が正常に機能します。矢印は Android プラットフォームでも正常に機能します。しかし、iPhone で Web サイトを閲覧しようとすると、スクロールすると矢印が飛んで消えてしまいます。

私が読んだところによると、iPhoneposition:fixedには過去に問題がありましたが、これは iOS 5 で解決されたと思われます。

残念ながら、この問題を実証するサイトのライブ バージョンはありません。

どんな助けでも大歓迎です。

4

0 に答える 0