How to set the width and height as per container sizes?

Question

I have build a carousel but I want to make it responsive so when I resize the window it should resize itself.

I am using the following lines of code where I set the sizes but I want to do it by itself.

https://jsfiddle.net/6nhuk7vm/4/

var slideWidth = 1200;
var slideHeight = 300;
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
$('#slidesHolder').css('height', slideHeight);

Answer 1

This should help, On resizing a function is triggered which adjusts all other height and width

$( window ).resize(function() {
    slideWidth = $(window).width();
    slideHeight = $(window).height();
    $('#slidesHolder').css('width', slideWidth * numberOfSlides);
    $('#slidesHolder').css('height', slideHeight);
    $('.img_tag').css('height', slideHeight);//change of height of image
    $('.img_tag').css('width', slideWidth);//change width of image
});

Also add this style

.slide{
   max-height:100%;
   max-width:100%;
}

Answer 2

Have a look at the JSFiddle here

The key thing to take is the complete lack of any fixed pixel definitions anywhere in the build. Obviously there are other things, like position and overflow that one might expect to see in a simple slider and several colours added to slides for clarity.

Sliding left and right is handled by animating left by 100% which takes it's value from the parent container.

Slide sizes are calculated in JS and kept as % too.

The parent .slider class is set to 50% so when you resize the JSFiddle output panel it resizes too; then the rest of the % styles kick in the whole slider squashes or stretches. When coupled with using % is the javascript the result is a slider that responds to it's parent size including it slide distances.

This can probably be tidied up further. I think some of the calculation could be removed from the JS with a bit of thought and refactoring.

Please note, the html and body tag 100% settings were just put in to help with the way JSFiddle rendered and aren't necessary, I just didn't want to set fixed pixels at the top level of the example DOM and have you change them to see the effect - this way the JSFiddle panel resize works