2

おはよう！

私はプロトタイプに取り組んでおり、Foundation の Orbit Slider の幅を変更しながら応答性を維持する「適切な」方法を知りたいです。

現在、スライダー コンテナーの幅を小さいパーセンテージ (73%) に変更しましたが、モバイル サイズで表示すると、まったく正しくないように見えます。言うまでもなく、矢印は上向きに浮いており、CSS をハックして正しく配置したくありません。

Orbit CSS: http://naivestudio.net/win-prototype/prototype/orbit.php (この質問のためだけに別のページを作成 - app.css ファイルで変更が行われます)

インデックス ページ内の HTML - ビデオはスライダーの外側にあることに注意してください。ただし、ヘッダー コンテナー内でスライダーの横にフローティングさせます。

<div id="headcontain" class="row">
    <div id="featured">
    <img src="http://placehold.it/700x300&text=Slide1">
    <img src="http://placehold.it/700x300&text=Slide2">
    <img src="http://placehold.it/700x300&text=Slide3">
    <img src="http://placehold.it/700x300&text=Slide4">
    <img src="http://placehold.it/700x300&text=Slide5">
    </div>
<img src="http://placehold.it/235x300&text=Video">
</div>

Javascript

<!-- Include Orbit -->
<script src="foundation/javascripts/jquery.foundation.orbit.js"></script>
<script type="text/javascript">
   window).load(function() {
   $("#featured").orbit( { 
   timer: false
   });
});
</script>
4

2 に答える 2