bxSlider Custom pre next Button

Я хочу использовать свои собственные кнопки pre и next, и они также находятся вне слайдера div. Я использую BxSlider. Я немного поделюсь своим кодом. Буду рад, если вы поможете в этом.

Это кнопки и слайдеры.

  <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>

это jquery

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

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

navigation slider jquery next bxslider
person Berke Atmaca    schedule 05.04.2013    source источник

Ответы (2)


arrow_upward
25
arrow_downward

Добавьте свое изображение src в nextText следующим образом:

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

Работа с JSFiddle рабочего примера:

person dhruv1000    schedule 10.07.2013
comment
Делать это не имеет никакого смысла. Конечно, это сработает, это простое решение, но в большинстве случаев работа над слайдером с настраиваемыми элементами управления может потребовать дополнительных стилей и сложных элементов. Поэтому я бы предложил создать настраиваемые прослушиватели событий щелчка и самостоятельно управлять элементами управления. Имхо, это намного лучше и дает вам больше контроля над тем, как это работает и выглядит. Тем не менее, да, это будет работать, но это не лучшее решение. - person Peter; 06.10.2017

arrow_upward
16
arrow_downward

вы можете попробовать этот код ниже. Это должно работать.

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

});
person qsmiley86    schedule 17.04.2013
comment
Разделение элементов DOM требует стиля их написания. - person zennin; 20.12.2016