I'm using bootstrap carousel, which my images are coming from the javascript file written in backbone. I'm using modernizr.mq for making the images responsive.But it is not working. Can any one please help me to make my carousel images responsive, as i was not getting them form CSS file.
My Modernizr.mq code looks like
if (Modernizr.mq('(max-width:480px)')) {
/* debugger;*/
alert('mobile');
var slides = [
{url: 'images/stage4_mobile.jpg'},
{url: 'images/stage5_mobile.jpg'},
{url: 'images/stage6_mobile.jpg'}
];
}else if ('(max-width:768px)')
{
alert('tablet');
var slides = [
{url: 'images/stage4_wide.jpg'},
{url: 'images/stage5_wide.jpg'},
{url: 'images/stage6_wide.jpg'}
];
}
else{
alert('DT');
var slides = [
{url: 'images/stage4_wide1.jpg'},
{url: 'images/stage5_wide1.jpg'},
{url: 'images/stage6_wide1.jpg'}
];
And my carousel.html file looks like
<div class="carousel-image" style="background-image: url('{{url}}');"></div>
<!-- <img src="{{url}}" alt="" /> -->
<div class="carousel-caption carousel-overlay"></div>
<div class="carousel-caption deal">
<div class="col-lg-6 col-lg-offset-1" style="line-height: 60%; left: -1.8em;">
<img src="images/text_mainpromo.png" style="width: 60%; height: 60%">
</div>
<div class="col-lg-4 hidden-xs hidden-sm hidden-md" style="top: 1em; left: 5.3em;">
<a href="#" class="btn" style="width: 180px; height: 64px;">ORDER NOW</a>
</div>
</div>
</div>
I have attached some part of code itself, no syntax mistakes are there.