前提・実現したいこと
dreamweaverでwebサイトを作っています
jQueryのbxsliderで写真のスライドを作りました
最初は写真を送らせる矢印が出なかったのですが、指定したパスに矢印の画像がなかったので、画像ファイルを指定されたパスに動かせば、表示されました
しかし、表示された矢印が画像の左右になく、なぜかヘッダーあたりの画面両端に表示されてしましました
該当のソースコード
jQueryの公式ホームページからインストールしたコードです jquery.bxslider.css jquery.bxsilder.min.js /* DIRECTION CONTROLS (NEXT / PREV) */ .bx-wrapper .bx-prev { left: 10px; background: url('images/controls.png') no-repeat 0 -32px; } .bx-wrapper .bx-prev:hover, .bx-wrapper .bx-prev:focus { background-position: 0 0; } .bx-wrapper .bx-next { right: 10px; background: url('images/controls.png') no-repeat -43px -32px; } .bx-wrapper .bx-next:hover, .bx-wrapper .bx-next:focus { background-position: -43px 0; } .bx-wrapper .bx-controls-direction a { position: absolute; top: 50%; margin-top: -16px; outline: 0; width: 32px; height: 32px; text-indent: -9999px; z-index: 9999; } .bx-wrapper .bx-controls-direction a.disabled { display: none; } /* AUTO CONTROLS (START / STOP) */ .bx-wrapper .bx-controls-auto { text-align: center; } .bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0; background: url('images/controls.png') -86px -11px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active, .bx-wrapper .bx-controls-auto .bx-start:focus { background-position: -86px 0; } .bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; background: url('images/controls.png') -86px -44px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active, .bx-wrapper .bx-controls-auto .bx-stop:focus { background-position: -86px -33px; }
試したこと
position: absolute;
変更後 position: relative;→画像の下にきてしまったのでabsoluteに戻す
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。