如何使硬币滑块响应？

Question

滑块创建后似乎无法调整大小，这对于响应式布局来说非常糟糕。

有没有办法根据 Twitter Bootstrap 3 的媒体查询实际调整 Coin Slider 插件的大小？

您可以将 Coin Slider's demo 视为 fiddle。

Answer 1

的确，目前的插件版本无法调整它的大小。所以，我写了一个脚本来调整 Coin 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();

确保在 DOM 准备好之后以及创建硬币滑块之后放置所有 JavaScript 代码。

如何使硬币滑块响应？

How to make Coin Slider responsive?

javascript

css

jquery

responsive-design

twitter-bootstrap-3