Намаляване на броя на елементите в Bootstrap 3 carousel за мобилни устройства

В момента правя уебсайт в Bootstrap 3.0 с въртележка.

В мобилен режим (xs) имам 4 елемента във въртележката, но когато стигне до размер на таблета (sm или md), клиентът иска да го намали само до 2 елемента вместо 4.

Скриването на индикаторите е достатъчно лесно, можете да използвате hidden-sm, за да се отървете от 2 от точките, а също така добавих hidden-sm към самите елементи, но JS, който контролира въртележката, игнорира факта, че елементите са зададено да показва: няма, и въпреки това ги превърта.

Някой знае ли за начин да накараш Bootstrap да игнорира елементи при определени точки на прекъсване на отговор?


javascript carousel twitter-bootstrap twitter-bootstrap-3
person Ian    schedule 12.09.2014    source източник
comment
Няма вграден начин за извършване на това и ще изисква персонализиран jQuery, за да пропусне елементите. Това не е заявка за отзивчив дизайн, тя е адаптивна и начинът, по който го правя, е от страната на сървъра с клас за откриване на мобилни устройства и зареждам html за различни устройства, така че зареждам версията за настолни компютри, ако не е мобилна, а иначе мобилна. Накратко, тъй като изображенията се зареждат в кеша, можете да покажете една версия за настолен компютър и една версия за мобилно устройство, използвайте отзивчивите помощни класове   -  person Christina    schedule 12.09.2014
comment
Благодаря Кристиан, приех съвета ти, за този превключих между 2 различни въртележки на 2 различни точки на прекъсване, тъй като съм 99% сигурен, че клиентът така или иначе ще промени това по-късно! Благодаря   -  person Ian    schedule 15.09.2014

Отговори (1)


arrow_upward
0
arrow_downward

Имах подобен проблем, но трябваше да мога динамично да променя броя на слайдовете. За да го опростя, избрах да го базирам на видимостта на индикаторите на въртележката. Добавих следното към bootstrap.js, точно след декларациите на променливите вътре в Carousel.prototype.slide():

var $nextIndicator;
if (this.$indicators.length) {
  var iChildren = this.$indicators.children();
  var i=0; 
  while (($nextIndicator = $(iChildren[this.getItemIndex($next)])) && !$nextIndicator.is(':visible') && i<iChildren.length) {
    $next = $next[type]();
    if (!$next.length) {
      if (!this.options.wrap) return
      $next = this.$element.find('.item')[fallback]()
    }    
    i++; 
  }    
}

За да премахна слайдове, поставям следното в собствения си код:

$indicatorsToRemove.hide();
// don't leave user on a page that got removed:
if ($indicatorsToRemove.filter('.active').length) {
  $('#carousel').carousel('next');
}

За да ги добавите обратно:

$indicatorsToAdd.show();
person Roger Dueck    schedule 15.12.2014