Javascript 如何使硬币滑块响应？

创建滑块后，滑块似乎没有调整大小的方法，这对响应性布局非常不利

有没有办法根据Twitter Bootstrap 3的媒体查询来调整硬币滑块插件的大小

---

你可以认为是小提琴。

确实，没有办法用当前插件版本来调整它。因此，我编写了一个脚本来调整硬币滑块的大小（您可以在硬币滑块的演示站点上进行测试）：

因此，我们只需在每个媒体查询断点后调用创建的

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>

---

var硬币滑块=$（“#硬币滑块”）；
var baseWidthDisplay=未定义；
var baseHeightDisplay=未定义；
无功电流比率=未定义；
var-mqratio=[0.75,0.95,0.8,1]；
var mqDetector=$（“#mq detector”）；
变量mqSelectors=[
mqDetector.find（“.visible xs”），
mqDetector.find（“.visible sm”），
mqDetector.find（“.visible md”），
mqDetector.find（“.visible lg”）
];
var checkCoinSliderForResize=函数（）{
对于（变量i=0；i 0）{
将coinSlider调整为（coinSlider、baseWidthDisplay*currentRatio、BaseHightDisplay*currentRatio）；
}
}
打破
}
}
};
$（窗口）.on（'resize'，checkCoinSliderForResize）；
checkCoinSliderForResize（）；

确保在DOM准备就绪和创建coinslider之后放置所有JavaScript代码

<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();