Bootstrap carousel full screen on every device - html

Question

so i want a carousel that should take full height and width of the display monitor and then scroll down. like this, and the images inside should fill its parent while maintaining ratio. the problem is either i have to provide fixed height or it will take the height of largest image. so how can i make a carousel of full screen for every device.
$(document).ready(function() {
$("#my-slider").carousel({
interval : 3000,
pause: false
});
})
.container-fluid {
padding-right: 0px;
padding-left: 0px;
margin-right: 0px;
margin-left: 0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row" style="margin-right:0px; margin-left:0px;">
<div class="col-sm-12" style="padding:0px;">
<div id="my-slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/image1.jpg"/>
</div>
<div class="item">
<img src="img/image2.jpg"/>
</div>
<div class="item">
<img src="img/image3.jpg"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container" style="margin-top:20px;">
<div class="row">
<div class="col-sm-12 col-md-12 col-xs-12">
<div class="thumbnail" style="border:none; background:white;">
<div class="col-sm-4 col-md-4 col-xs-12 image-container">
<center><img src="img/image4.jpg" style="height:200px;" class="img-responsive" /></center>
</div>
<div class="col-sm-8 col-md-8 col-xs-12">
<h2>Sample heading</h2>
<p style="font-size:15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-xs-12">
<div class="thumbnail" style="border:none; background:white;">
<div class="col-sm-4 col-md-4 col-sm-push-8 col-xs-12 image-container">
<center><img src="img/image4.jpg" style="height:200px;" class="img-responsive" /></center>
</div>
<div class="col-sm-8 col-md-8 col-sm-pull-4 col-xs-12">
<h2>Sample heading</h2>
<p style="font-size:15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-xs-12">
<div class="thumbnail" style="border:none; background:white;">
<div class="col-sm-4 col-md-4 col-xs-12 image-container">
<center><img src="img/image4.jpg" style="height:200px;" class="img-responsive" /></center>
</div>
<div class="col-sm-8 col-md-8 col-xs-12">
<h2>Sample heading</h2>
<p style="font-size:15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Contact Us</h2>
<form action="" method="" class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input id ="name" type="name" name="" class="form-control">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email Address</label>
<div class="col-sm-10">
<input id ="email" type="email" name="" class="form-control"></div>
</div>
<div class="form-group">
<label for="message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<input id ="message" type="message" name="" class="form-control"></div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-push-2">
<input id ="submit" type="submit" name="" class="btn btn-default"/>
</div>
</div>
</form>
</div>
</div>
</div>

Answer 1

You have to use jquery for this, As when your site load you need to get height and width of viewport. And then apply that height and width to your carosel.
use this code and change the carosel class for yourself.
$(function(){
var height = $(window).height();
var width = $(window).width();
$(".yourCarosel").css(
{
"height":height,
"width":width
});
});
It will automatically get the height and width of window and apply that also on the carosel.