0

Zurb Foundation の Orbit JavaScript スライダーに付属する一連の CSS 弾丸があります。箇条書きには、新しいスライドが導入されたときに水平方向に整列するために必要な float:left があります。フロートを外すと縦に積まれます....

悲しいことに、箇条書きを「ピクセルまで」垂直にページに配置する必要があり、さまざまなブラウザーで問題が発生し、ブラウザー固有の css を使用する必要がありました。jqueryUI を使用して、その上の Div に基づいて箇条書きを配置しましたが、いくつかの問題があります。

箇条書きはスライダーの下の中央に配置する必要があります...そしてスライダーはページに合わせて流動的にサイズ変更されます。JqueryUI はページの読み込み時に箇条書きを配置できますが、サイズを変更すると、箇条書きのフロートのために配置が台無しになります...

誰かが頭のてっぺんから解決策を考えられるかどうか疑問に思っています...私はしばらく困惑していました笑。事前に助けてくれてありがとう！

状況を示す必要がある 2 つの div を持つ基本的な jsfiddle を作成しました。 http://jsfiddle.net/KRTYd/2/ 

<div id="slider">
    <img src="http://www.hdwallpaperspot.com/wp-content/uploads/2013/02/nature-background-wallpaper.jpg" style="width:100%;"></img>
</div>
<div id="bullets"></div>

具体的には、html は次のとおりです。

<ul data-orbit>
  <li>
    <img src="../img/demos/demo1.jpg" />
    <div class="orbit-caption">...</div>
  </li>
  <li>
    <img src="../img/demos/demo2.jpg" />
    <div class="orbit-caption">...</div>
  </li>
  <li>
    <img src="../img/demos/demo3.jpg" />
    <div class="orbit-caption">...</div>
  </li>
</ul>

弾丸CSSは次のようになります。

.orbit-bullets {
  overflow: hidden;
  position: absolute;
 }
  .orbit-bullets li {
    display: block;
    width: 18px;
    height: 18px;
    background: #ffffff;
    float: left;
    margin-right: 6px;
    border: solid 3px #666666;
    -webkit-border-radius: 1000px;
    border-radius: 1000px; }

また、html に複数のスライドが示されているため、javascript によって複数の css 箇条書きが生成されます。

4

2 に答える 2

1

私にはなじみがあるように見えますが、私はすでにこの質問に答えていると思います。

とにかく、#bullet {margin:auto;}代わりに浮き彫りがそれを行います。

http://jsfiddle.net/yAgdT/

しかし、スライドする画像がたくさんあると、スライダーでそれができるとは思いません。 bullet http://jsfiddle.net/yAgdT/1/#bulletsの親になる必要があります

何がスライドするのか、弾丸で何をしたいのかわからないので、これらは仮定です:) .

たぶん、スライダーになる途中で、もっと便利なものかもしれません：http://jsfiddle.net/yAgdT/2/

それ以外の場合は、ボックスシャドウで弾丸を生成するスライダーを使用して遊んでいます。JavaScriptなしで実行されます。 http://dabblet.com/gist/4323453これは anser ではありませんが、html 構造に興味があるかもしれません。CSSセレクターを中継したい場合。

于 2013-06-18T15:26:48.793 に答える