Q&A
あ、すみません最初の回答は無視してください。
2つとも動作しませんか？afterがひっかかるのですが・・・
afterの横と縦が小さすぎてその範囲を押せていないだけかもしれません。
jqueryプラグイン、「bxSlider v4.2.5」の運用で困っております。
スライド自体は問題なく動作しているのですが、オプションでnextSelector,prevSelectorに設定している要素をクリックしても、一切動作しない状態です。
設定している要素は、それぞれp#next,p#prevとなっていて、下記cssの通り疑似要素を使って、丸に囲まれた矢印を作ってあります。
//html//
<p id="prev"></p> <p id="next"></p>//css//
p{
cursor:pointer;
width:40px;
height:40px;
border:1px solid;
border-radius:50%;
position:absolute;
z-index:999;
top:220px;
left:50%;
margin-left:550px
}
p#prev{
left:inherit;
right:50%;
margin-right:550px
}
p#prev:after{
border:none;
border-bottom:2px solid;
border-left:2px solid;
right:12px
}
p:after{
border-top:2px solid;
border-right:2px solid;
border-radius:2px;
content:"";
width:10px;
height:10px;
position:absolute;
top:15px;
right:18px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg)
}
//js//
$(document).ready(function(){
$('.slideInner').bxSlider({
mode:'fade',
auto:true,
nextSelector: '#next',
prevSelector: '#prev'
});
});
決して複雑なプラグインではないため、何か単純なことが原因かとも思うのですが、未だたどり着けずにいます。
原因として思い当たることがあれば、ご教授いただきたいです。
回答4件
0
ベストアンサー
スライドで切り替える要素がなかったので公式ページの画像使って、 CSS と JS はそのままでやってみましたが、問題なく Prev のリンクと Next のリンクで切り替えできています
html
1<script src="https://code.jquery.com/jquery-1.12.2.js"></script> 2<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script> 3 4<p id="prev"></p> 5<p id="next"></p> 6<ul class="slideInner"> 7 <li><img src="http://bxslider.com/images/home_slides/hillside.jpg" /></li> 8 <li><img src="http://bxslider.com/images/home_slides/houses.jpg" /></li> 9 <li><img src="http://bxslider.com/images/home_slides/picto.png" /></li> 10</ul>
設定すると下のような構造になりますが a タグのところを押さないといけないので ＜ や ＞ を押しても反応はしないです
html
1<p id="prev"> 2 <a class="bx-prev" href="">Prev</a> 3 ::after 4</p>
投稿2016/03/20 15:42
総合スコア633
0
http://bxslider.com/examples/custom-next-prev-selectors
上記のexampleによると
p要素の中にspan要素がありますね
現在はp要素にそのままid名を書いていますが、p要素の中のspan要素にid名がサンプルでは記述されています。
ですので、cssの指定は
p span#prev
か
p #prev
となるのではないでしょうか？
投稿2016/03/20 09:42
総合スコア59
0
質問者さんの質問にそぐわない回答かもしれませんが、単純にバージョンを落としてみるのは、どうでしょうか？
投稿2016/03/17 02:05
総合スコア69
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/24 03:27