Как сделать Монетный слайдер отзывчивым?

Question

После создания ползунка, похоже, не может быть изменен, что очень плохо для гибкого макета.

Есть ли способ изменить размер плагина для слайдера монеты в соответствии с запросами СМИ Twitter Bootstrap 3?

Вы можете рассмотреть Coin Slider's demo как скрипку.

Answer 1

Действительно, нет способа изменить его размер с помощью текущей версии плагина. Итак, я написал сценарий, чтобы изменить размер монет Slider (вы можете проверить его на демо-сайте Coin Slider в):

var resizeCoinSliderTo = function(coinSlider, toWidth, toHeight) { 
    var csColumns = 7; 
    var csRows = 5; 
    var imgWidth = toWidth; 
    var imgHeight = toHeight; 
    var cellWidth = imgWidth/csColumns; 
    var cellHeight = imgHeight/csRows; 
    var coinSliderId = coinSlider.attr("id"); 
    coinSlider.css({ 
     'width': imgWidth, 
     'height': imgHeight 
    }); 
    $('.cs-'+coinSliderId).css({ 
     'width': (cellWidth + 'px'), 
     'height': (cellHeight + 'px'), 
     'background-size': (imgWidth + 'px ' + imgHeight + 'px') 
    }).each(function() { 
     var cellOffsets = $(this).attr("id").replace("cs-"+coinSliderId,""); 
     var hOffSet = cellHeight * (Math.floor(parseInt(cellOffsets[0])-1) % csRows); 
     var wOffSet = cellWidth * (parseInt(cellOffsets[1])-1); 
     $(this).css({ 
      "left": (wOffSet + 'px'), 
      "top": (hOffSet + 'px'), 
      "background-position": ((-wOffSet) + 'px ' + (-hOffSet) + 'px') 
     }); 
    }); 
    $('#cs-navigation-'+coinSliderId).children("a").css("top", (((imgHeight/2)-15)+'px')); 
}; 

Таким образом, нам нужно просто вызвать созданную resizeCoinSliderTo после каждого медиазапросы контрольных точек, обработку изменения размера, не теряя при этом свое отношение, чтобы соответствовать формату экрана:

<span id="mq-detector"> 
    <span class="visible-xs"></span> 
    <span class="visible-sm"></span> 
    <span class="visible-md"></span> 
    <span class="visible-lg"></span> 
</span> 

---

#mq-detector { 
    visibility: hidden; 
} 

---

var coinSlider = $("#coin-slider"); 
var baseWidthDisplay = undefined; 
var baseHeightDisplay = undefined; 
var currentRatio = undefined; 
var mqRatios = [0.75, 0.95, 0.8, 1]; 
var mqDetector = $("#mq-detector"); 
var mqSelectors = [ 
    mqDetector.find(".visible-xs"), 
    mqDetector.find(".visible-sm"), 
    mqDetector.find(".visible-md"), 
    mqDetector.find(".visible-lg") 
]; 

var checkCoinSliderForResize = function() { 
    for (var i = 0; i <= mqSelectors.length; i++) { 
     if (mqSelectors[i].is(":visible")) { 
      if (currentRatio == undefined) { 
       baseWidthDisplay = parseInt(coinSlider.css("width")); 
       baseHeightDisplay = parseInt(coinSlider.css("height")); 
      } 
      if (i == 0) { 
       var specialWidth = Math.floor(parseInt($("body").css("width"))*0.75); 
       if (specialWidth < 300){ 
        specialWidth = 300; 
       } 
       var specialHeight = Math.floor(baseHeightDisplay * specialWidth/baseWidthDisplay); 
       resizeCoinSliderTo(coinSlider, specialWidth, specialHeight); 
      } 
      if (currentRatio != mqRatios[i]) { 
       currentRatio = mqRatios[i]; 
       if (i > 0) { 
        resizeCoinSliderTo(coinSlider, baseWidthDisplay*currentRatio, baseHeightDisplay*currentRatio); 
       } 
      } 
      break; 
     } 
    } 
}; 

$(window).on('resize', checkCoinSliderForResize); 

checkCoinSliderForResize(); 

Обязательно поместите весь код JavaScript после готовности DOM и после создания монетоприемника.