Question

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

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

您可以将Coin Slider's demo视为小提琴。

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准备好之后以及创建coinlider之后放置所有JavaScript代码。

如何使Coin Slider响应？

1 个答案: