如何使Coin Slider响应？

Question

After being created, the slider seems not to have a way to be resized, which is really bad for a responsive layout.

Is there a way to actually resize the Coin Slider plugin according to Twitter Bootstrap 3's media queries?

You might consider Coin Slider's demo as a fiddle.

Answer 1

Indeed, there is no way to resize it with the current plugin version. So, I wrote a script to resize the Coin Slider (you can test it on Coin Slider's demo site):

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'));
};

So, we just need to call the created resizeCoinSliderTo after each media queries breakpoints, handling the resize, without losing its ratio, to fit the screen properly:

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

Make sure to place all JavaScript code after the DOM is ready, and after the coinslider was created.