次の 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 で解決されたと思われます。
残念ながら、この問題を実証するサイトのライブ バージョンはありません。
どんな助けでも大歓迎です。