bxSlider Custom pre next Button

Question

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.

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

$(document).ready(function() {
  var mySlider =   $('.mainslider').bxSlider({
  nextSelector: '#pronext',
  prevSelector: '#proprev',

  prevText: '',   
  nextText: '',
  minSlides: 2,
  maxSlides: 2,
  slideWidth: 360,
  slideMargin: 5,
  pager:false,
    });
  });

score 26 · Accepted Answer · edited Feb 26 '16 at 05:03

26

Add your image src to nextText like this:

nextText: '<img src="images/next.jpg" height="25" width="25"/>',
prevText: '<img src="images/previous.jpg" height="25" width="25"/>'

Working JSFiddle of an working example:

edited Feb 26 '16 at 05:03

Amit Kumar

5,888
11
47
85

answered Jul 10 '13 at 10:00

dhruv1000

454
5
6

Doing this doesn't make any sense. Of course it will work, it's a simple solution but most of the time working on a slider with customized controls could require more styling and complex elements. Therefore I'd suggest making customized click event listeners and handle the controls yourself. This is way better imho and gives you more control on how it works and looks. Nevertheless, yes it will work but it's not the best solution. – Peter Oct 06 '17 at 09:50

score 16 · Answer 2 · edited Apr 17 '13 at 17:06

16

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;
    });

});

edited Apr 17 '13 at 17:06

Sami N

1,170
2
9
21

answered Apr 17 '13 at 16:45

qsmiley86

161
2

Having separated DOM elements requires writing style for them. – Levent Yumerov Dec 20 '16 at 15:11

bxSlider Custom pre next Button

2 Answers2