SwiperやほかにもWebsiteに載っているJqueryのプラグインはありますが、スライドショーで不具合が生じたときに、出来れば自分で直したいと考えています。そこで私は、スライドショーについて、本を使い勉強しているところです。
今回は、jQuery最高の教科書という本から引っ張ってきたjQueryのプラグインを利用して、スライドショーを作りたいのですが、ナビの矢印を位置設定を行う際、左右の矢印が一緒に動いてしまい、困っています。
この教科書では、サンプルで大き目の画像を使用しておりましたので、幅高さを適宣変えました。
.slideshow-nav .prev img{
margin-left:-200px;
}
このコードのmarginの値を変えた結果です。
下記にある画像をみていただくとわかると思いますが、左右の矢印が離れることなく、お互い近くにある状態です。この左右の矢印はそれぞれ違う画像に保存されており、htmlでもクラス分けされています。
理想としては、スライドショーの左右に配置したいと考えています。
どうすれば、左右の矢印を同時に動かさず、スライドショーの左右に配置できるでしょうか?
大変恐縮ですが、この問題がわかる方、ご教授いただけると幸いです。
念のため、いかに私のwebsiteのURLを添付させていただきます。
URL
よろしくお願いします。
HTML
<div class="slideshow"> <div class="slideshow-slides"> <a href="#" class="slide"><img src="box img/box slide/slide-1.gif" alt="" width="161px" height="88px"></a> <a href="#" class="slide"><img src="box img/box slide/slide-2.gif" alt="" width="161px" height="88px"></a> <a href="#" class="slide"><img src="box img/box slide/slide-3.gif" alt="" width="161px" height="88px"></a> <a href="#" class="slide"><img src="box img/box slide/slide-4.gif" alt="" width="161px" height="88px"></a> </div> <div class="slideshow-nav"> <a href="#" class="prev"><img src="box img/box slide/arrow-L.gif" alt="" width="36px" height="37px"></a> <a href="#" class="next"><img src="box img/box slide/arrow-R.gif" alt="" width="36px" height="37px"></a> </div> </div>
CSS
.slideshow { height: 88px; min-width: 161px; overflow: hidden; position: relative; } .slideshow-slides { height: 100%; position: absolute; width: 100%; /* left は JavaScript で指定 */ } .slideshow-slides .slide { height: 100%; overflow: hidden; position: absolute; width: 100%; /* left は JavaScript で指定 */ } .slideshow-slides .slide img { left: 50%; margin-left: -80px; position: absolute; } .slideshow-nav .prev img{ margin-left:-200px; }
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/29 09:48
2017/03/30 04:00
2017/03/30 08:51 編集