Несколько bx слайдеров?

[Alarr]

Очень люблю в своей вёрстке использовать bxSlider, у него есть свои цсс и js файлы которые легко корректировать в своих нуждах.

Вопрос в том, как использовать этот слайдер с разными стилями несколько раз на странице или в проекте? Например в качестве слайдера или в качестве карусели. Или что бы на одном изменялось фэйдом, а на другом просто листались слайды. Затруднения вызывает тот факт, что js и css файлы рассчитаны только на один слайдер, если я вставлю второй, то у второго будут те же самые стили и изменения которые я делал в файликах.

Понимаю что вопрос тупейший, но этот вопрос стоит ребрейшим ребром

[Catherine]

Несколько слайдеров на одной странице: http://bxslider.com/...iple-slideshows

Для изменения стилей конкретного слайдера можно использовать привязку по id, либо (в зависимости от ситуации) использовать обертку:

HTML:

<div class="slider-wrapper1">
   <ul id="slider1">
      <li><img src="/images/730_200/hill_trees.jpg" /></li>
      <li><img src="/images/730_200/me_trees.jpg" /></li>
      <li><img src="/images/730_200/houses.jpg" /></li>
   </ul>
</div>
<div class="slider-wrapper2">
   <ul id="slider2">
      <li><img src="/images/730_200/tree_root.jpg" /></li>
      <li><img src="/images/730_200/trees.jpg" /></li>
      <li><img src="/images/730_200/hill_road.jpg" /></li>
   </ul>
</div>

Тогда отличающиеся стили для каждого из слайдеров можно прописывать следующим образом:

CSS:

.slider-wrapper1 .bx-wrapper {
...
}

.slider-wrapper2 .bx-wrapper {
...
}

[Alarr]

О, кстати да, спасибо

Только ещё остаётся вопрос о js.

Там есть переменные типа:

var defaults = {

// GENERAL
mode: 'horizontal',
slideSelector: '',
infiniteLoop: true,
hideControlonend: false,
speed: 500,
easing: null,
slideMargin: 0,
startSlide: 0,
randomStart: false,
captions: false,
ticker: false,
tickerHover: false,
adaptiveHeight: false,
adaptiveHeightSpeed: 500,
video: false,
useCSS: true,
preloadImages: 'visible',

И получается если поменять их, то они будут меняться во всех слайдерах.

Быть может эти штуки нужно прописывать там где я вызываю слайдер?

Должно же как-то оно прописываться каждому слайдеру отдельно.

Типа для такого одно:

$(document).ready(function(){
	  $('.bxslider').bxSlider();
});

Для такого другое:

$(document).ready(function(){
	  $('.bxslider2').bxSlider();
});

Edited May 5, 2013 by Alarr

[Catherine]

О, кстати да, спасибо

Только ещё остаётся вопрос о js.

Там есть переменные типа:

var defaults = {
...
}

И получается если поменять их, то они будут меняться во всех слайдерах.

Быть может эти штуки нужно прописывать там где я вызываю слайдер?

Должно же как-то оно прописываться каждому слайдеру отдельно.

Типа для такого одно:

$(document).ready(function(){
	 $('.bxslider').bxSlider();
});

Для такого другое:

$(document).ready(function(){
	 $('.bxslider2').bxSlider();
});

На той же странице ( http://bxslider.com/...iple-slideshows ) пример использования двух слайдеров с разными опциями:

JS:

$('#slider1').bxSlider({
   mode: 'fade',
   auto: true,
   autoControls: true,
   pause: 2000
});
$('#slider2').bxSlider({
   auto: true,
   autoControls: true,
   pause: 3000,
   slideMargin: 20
});

[Alarr]

Catherine, привелико благодарю, совсем глаза замылились, надо отдыхать

Если бы ещё я знал как поднять репутацию, обязательно отблагодарил хотя бы плюс одинкой,

форум реально может помогать...

Edited May 5, 2013 by Alarr