jQuery bxSlider 自定义前下一个按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15844270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-26 15:53:25 来源:igfitidea点击:
bxSlider Custom pre next Button
提问by Berke Atmaca
I want to use my own pre and next buttons and it is out of the slider div too. I am using BxSlider. I will share my code a bit. I will be glad if you can help this out.
我想使用我自己的 pre 和 next 按钮，它也在滑块 div 之外。我正在使用 BxSlider。我将分享我的代码。如果你能帮忙解决这个问题，我会很高兴的。
This is the buttons and slides.
这是按钮和幻灯片。
<div class= "productsbuttons"><img id ="proprev" src="images/productleftarrow.png" /><img style="margin-left:10px;" id="pronext" src="images/productrightarrow.png" /> </div>
</div>
<div class = "products">
<ul class = "mainslider">
<li><img class = "productslider" src="images/menu-image/img1.png" /> Lores ASda</li>
<li><img class = "productslider" src="images/img1.png" /> ASDasdasd</li>
<li><img class = "productslider" src="images/menu-image/img1.png" /> ASd</li>
<li><img class = "productslider" src="images/img1.png" /> ASas</li>
</ul>
This is the jquery
这是jquery
$(document).ready(function() {
var mySlider = $('.mainslider').bxSlider({
nextSelector: '#pronext',
prevSelector: '#proprev',
prevText: '',
nextText: '',
minSlides: 2,
maxSlides: 2,
slideWidth: 360,
slideMargin: 5,
pager:false,
});
});
回答by dhruv1000
回答by qsmiley86
you can try this code below. This should work.
您可以在下面尝试此代码。这应该有效。
$(document).ready(function(){
var slider = $('.mainslider').bxSlider({
minSlides: 2,
maxSlides: 2,
slideWidth: 360,
slideMargin: 5,
pager:false,
});
$('#pronext').click(function(){
slider.goToNextSlide();
return false;
});
$('#proprev').click(function(){
slider.goToPrevSlide();
return false;
});
});
