Make carousel responsive to changes in viewport dimensions

[nicholasfay]

I want my carousel to scale to the size of the page based on resizing of the page. I have tried recalling the document ready function on window resize but this seems to cause a recursion loop that scales the carousel over and over. Is there anyway to do this?

[specious]

I think some thought could go into how to rearchitect the way the layout parameters are specified, so that they can stay defined relative to the size of the container.

It would then also makes sense to trigger a render when the size of the parent container may have changed. My understanding is this can be tricky in the standard DOM API.

[zk118]

Actually you can do that:

HTML:

<div class="main-scene">
      <div id="carousel">
          <img class="cloud9-item" src="img.png">
          <img class="cloud9-item" src="img.png">
          <img class="cloud9-item" src="img.png">
    </div>
</div>

JS:

$(function() {
    $("#carousel").Cloud9Carousel({});
});

$( window ).resize(function() {
    // Clone actual carousel
    $("#carousel").data("carousel").deactivate();
    var clone = $( "#carousel" ).clone();
    $("#carousel").remove();
    $(".main-scene").append(clone);

    // Call Cloud9Carousel again
    $(function() {
        $("#carousel").Cloud9Carousel({});
    });
});

[specious]

@evenmind, thanks for the duct tape!

The invitation is still open for making this carousel officially responsive.

[nicholasfay]

Yes please if anybody has a solution for this to make it officially responsive that would be great

[specious]

It's not that it's not a desirable feature. It's that somebody would have to contribute the code.

[nicholasfay]

@evenmind When using your fix. I am getting that $("#showcase").data("carousel") is undefined when my carousel div has id showcase. Any idea what would be causing this? The selector seems to be picking up the div but it doesn't have a carousel property.

[zk118]

@nicholasfay just delete this line:
$("#carousel").data("carousel").deactivate();

It's optional i think.

[nicholasfay]

@evenmind It works now thank you. The band-aid is more than enough of a solution for me so should I close this @specious or want to keep it open for a real solution?

[specious]

Keep it open.

[nicholasfay]

As a side note then since it will be kept open. Anybody trying to use the above solution make sure you add your Cloud9Carousel options back when recalling the constructor as the Jquery .clone() does not preserve these

[KattemChen]

You can see here.
// debounce处理resize高频率事件
function debounce(func, wait, immediate) {
var timeout;
return function () {
var context = this, args = arguments;
var later = function () {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
function fn() {
$(function () {
showcase.Cloud9Carousel({
yOrigin: 42,
yRadius: 1,
autoPlay: 0,
bringToFront: true,
onLoaded: function () {
showcase.css('visibility', 'visible');
showcase.css('display', 'none');
showcase.fadeIn(1500);
}
});
//重置旋转样式属性
fontBlack();
});
}
// 添加resize的回调函数，但是只允许它每300毫秒执行一次
window.addEventListener('resize', debounce(function (event) {
fn();
}, 300));

//也可以写成
// window.addEventListener('resize', debounce(fn(), 300));

[KattemChen]

这就很好的解决了自适应的问题。This is a good solution to this problem。my English is not very well,sorry.