0

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.

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
rUI7999
  • 129
  • 1
  • 3
  • 20
  • This is not the proper HTML code for a Bootstrap carousel. Bootstrap uses this format: http://getbootstrap.com/javascript/#carousel-examples and because of that, it's impossible to diagnose. You should have carousel-inner > item > img and carousel-caption. – Aibrean Feb 11 '15 at 16:22
  • I already said that this is the part of the code! the syntax i've wriiten is working, but Modernizr.mq doesn't works automatically when i resize() the window. when i tried to refresh the page it is working – rUI7999 Feb 11 '15 at 16:33
  • Resizing is a common issue. You need an event listener. – Aibrean Feb 11 '15 at 18:32
  • can you help with that – rUI7999 Feb 11 '15 at 19:54

0 Answers0