1

Есть плагин слайдера BxSlider, вот пример использования плагина, там же и основной вопрос (в комментарии):

var slider1 = $('.bxslider1').bxSlider({
  mode: 'horizontal',
  pager: false,
  auto: true,
  captions: false,
  controls: false
});
var slider2 = $('.bxslider2').bxSlider({
  mode: 'horizontal',
  pager: false,
  auto: true,
  captions: false,
  controls: false
});

$('.reload').click(function(e){
  e.preventDefault();
  slider1.reloadSlider();
  slider2.reloadSlider();
});

/*Как можно передать вызов плагина в переменную, а потом эту переменную применять много раз, примерно так(но это не правильно)
var plaginInit = .bxSlider({
  mode: 'horizontal',
  pager: false,
  auto: true,
  captions: false,
  controls: false
});
var slider1 = $('.bxslider1').plaginInit;
var slider2 = $('.bxslider1').plaginInit;
я хотел бы узнать как это сделать правильно.
именно нужно через переменную, так как нужно потом делат перезагрузку слайдера, метод указания классов через запятую тут не подойдет

Если что-то не так объяснил, пишите в коментарий
*/
/*bxSlider v4.2.5*/
.bx-wrapper{position:relative;margin:0 auto 60px;padding:0;*zoom:1;-ms-touch-action:pan-y;touch-action:pan-y}.bx-wrapper img{max-width:100%;display:block}.bxslider{margin:0;padding:0}ul.bxslider{list-style:none}.bx-viewport{-webkit-transform:translatez(0)}.bx-wrapper{-moz-box-shadow:0 0 5px #ccc;-webkit-box-shadow:0 0 5px #ccc;box-shadow:0 0 5px #ccc;border:5px solid #fff;background:#fff}.bx-wrapper .bx-controls-auto,.bx-wrapper .bx-pager{position:absolute;bottom:-30px;width:100%}.bx-wrapper .bx-loading{min-height:50px;height:100%;width:100%;position:absolute;top:0;left:0;z-index:2000}.bx-wrapper .bx-pager{text-align:center;font-size:.85em;font-family:Arial;font-weight:700;color:#666;padding-top:20px}.bx-wrapper .bx-pager.bx-default-pager a{background:#666;text-indent:-9999px;display:block;width:10px;height:10px;margin:0 5px;outline:0;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}.bx-wrapper .bx-pager.bx-default-pager a.active,.bx-wrapper .bx-pager.bx-default-pager a:focus,.bx-wrapper .bx-pager.bx-default-pager a:hover{background:#000}.bx-wrapper .bx-controls-auto .bx-controls-auto-item,.bx-wrapper .bx-pager-item{display:inline-block;*zoom:1;*display:inline}.bx-wrapper .bx-pager-item{font-size:0;line-height:0}.bx-wrapper .bx-prev{left:10px;background:url(images/controls.png) no-repeat 0 -32px}.bx-wrapper .bx-prev:focus,.bx-wrapper .bx-prev:hover{background-position:0 0}.bx-wrapper .bx-next{right:10px;background:url(images/controls.png) no-repeat -43px -32px}.bx-wrapper .bx-next:focus,.bx-wrapper .bx-next:hover{background-position:-43px 0}.bx-wrapper .bx-controls-direction a{position:absolute;top:50%;margin-top:-16px;outline:0;width:32px;height:32px;text-indent:-9999px;z-index:9999}.bx-wrapper .bx-controls-direction a.disabled{display:none}.bx-wrapper .bx-controls-auto{text-align:center}.bx-wrapper .bx-controls-auto .bx-start{display:block;text-indent:-9999px;width:10px;height:11px;outline:0;background:url(images/controls.png) -86px -11px no-repeat;margin:0 3px}.bx-wrapper .bx-controls-auto .bx-start.active,.bx-wrapper .bx-controls-auto .bx-start:focus,.bx-wrapper .bx-controls-auto .bx-start:hover{background-position:-86px 0}.bx-wrapper .bx-controls-auto .bx-stop{display:block;text-indent:-9999px;width:9px;height:11px;outline:0;background:url(images/controls.png) -86px -44px no-repeat;margin:0 3px}.bx-wrapper .bx-controls-auto .bx-stop.active,.bx-wrapper .bx-controls-auto .bx-stop:focus,.bx-wrapper .bx-controls-auto .bx-stop:hover{background-position:-86px -33px}.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager{text-align:left;width:80%}.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto{right:0;width:35px}.bx-wrapper .bx-caption{position:absolute;bottom:0;left:0;background:#666;background:rgba(80,80,80,.75);width:100%}.bx-wrapper .bx-caption span{color:#fff;font-family:Arial;display:block;font-size:.85em;padding:10px}

.slider_wr{
width: 350px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<div class="slider_wr">
<ul class="bxslider1">
  <li><img src="http://placehold.it/350x150&text=FooBar1" title="Funky roots" /></li>
  <li><img src="http://placehold.it/350x150&text=FooBar2" title="The long and winding road" /></li>
  <li><img src="http://placehold.it/350x150&text=FooBar3" title="Happy trees" /></li>
</ul>
</div>
<div class="slider_wr">
<ul class="bxslider2">
  <li><img src="http://placehold.it/350x150&text=FooBar1" title="Funky roots" /></li>
  <li><img src="http://placehold.it/350x150&text=FooBar2" title="The long and winding road" /></li>
  <li><img src="http://placehold.it/350x150&text=FooBar3" title="Happy trees" /></li>
</ul>
</div>
<a class="reload" href="#">Перезапуск плагина</a>

3
  • 1
    объясните попроще, я вот ничего не понял что нужно
    – Alexandr
    14 сен 2015 в 7:55
  • Не очень понятно зачем тебе это нужно? На мой взгляд в такой ситуации проще сохранить набор параметров которые ты хочешь передать плагину для инициализации и передавать их в функцию плагина по сути будет то же самое, что ты хочешь сделать. github.com/stevenwanderski/bxslider-4/blob/master/src/js/… на 87 строке начинается функция bxSlider так на первый взгляде использует this (т.е. текущий элемент) можешь сохранить функцию в переменную и вызывать в контексте нужных тебе элементов, но это какой-то неудачный подход. 14 сен 2015 в 8:01
  • В общем у меня слайдеры запиханы вообще в табы, каждому табу свой слайдер со своими картинками, количество табов может меняться, при запуска страницы, слайдеры запускаються через переменные, при переключении табов мне нужно перезапускать слайдеры, так вот для того чтобы перезапуск работал мне и нужно пихать в разные переменные все слайдеры, после чего эти переменные по клику на таб перезапускать slider1.reloadSlider(); slider2.reloadSlider(); и так далее, так вот не охото писать кучу одинакового кода, хочеться все унифицировать, надеюсь объяснил)))
    – Karalahti
    14 сен 2015 в 8:42

1 ответ 1

2

Написать свой jQuery плагин обертку для слайдера например )) В него можно же и навешивание событий переместить кстати.

$.fn.myBxSlider = function() {
    return this.bxSlider({
        mode: 'horizontal',
        pager: false,
        auto: true,
        captions: false,
        controls: false
   });
};

var slider1 = $('.bxslider1').myBxSlider();
var slider2 = $('.bxslider1').myBxSlider();

Или как правильно заметили в комментарии лучше сохранить параметры и передавать их. Не думаю что у тебя будет одинаковых 100500 слайдеров на странице, что бы инициализацию в опр. параметрами в отдельную функцию (плагин) выводить.

3
  • я так пробывал. Принцип вы поняли, что мне нужно, но тут загвоздка, с таким способом перестает работать ссылка перезапуска слайдеров, а это мне нужно обязательно, вот я перенес код в писочницу чтоб вам было нагляднее jsfiddle.net/AJIEKCEU/d3qtwftp , может есть какой другой способ сделать так чтобы не писать кучу кода но при этом работала кнопка перезапуска слайдеров.
    – Karalahti
    14 сен 2015 в 8:37
  • @Karalahti для этого достаточно добавить в плагин возврат объекта (return), который возвращает функция инициализации слайдера, что бы в переменной у вас оказался тот же объект, вот и все. В ответе поправил код
    – korytoff
    14 сен 2015 в 9:10
  • Точняк))))))))))))), Спасибо!!!!!
    – Karalahti
    14 сен 2015 в 9:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.