Как сделать классы div и его изображения отзывчивыми

-1

Как сделать этот слайдер чувствительным во всех устройствах. Waht следует использовать в css, чтобы сделать его отзывчивым. , поскольку он не реагирует после добавления еще трех классов div. СпасибоКак сделать классы div и его изображения отзывчивыми

<div class="col-lg-12" style="background: rgb(255, 255, 255) none repeat scroll 0% 0%; top: 0px; margin-top: 0px; border-top-width: 0px; padding-top: 0px; width: 1100px; height: 530px; left: 0px; padding-left: 0px; padding-right: 0px;"> 


    <div class="container"> 
       <div class="col-lg-11"> 
        <div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1040px; height: 500px; overflow: hidden; visibility: hidden;"> 
         <!-- Loading Screen --> 
         <div class="container"> 
          <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1040px; height: 500px; overflow: hidden;"> 
           <div data-p="112.50" style="display: none;"> 
            <img class="img-rounded img-responsive" data-u="image" style="padding-top: 26px;"src="images/birch-899553_1920.jpg" /> 
           </div> 
           <div data-p="112.50" style="display: none;"> 
            <img class="img-rounded img-responsive" data-u="image" style="padding-top: 26px;" src="images/house-949265_1920.jpg" /> 
           </div> 
           <div data-p="112.50" style="display: none;"> 
            <img class="img-rounded img-responsive" data-u="image" style="padding-top: 26px;" src="images/nature-958406_1920.jpg" /> 
           </div> 
           <div data-p="112.50" style="display: none;"> 
            <img class="img-rounded img-responsive" data-u="image" style="padding-top: 26px;" src="images/birch-112829_1920.jpg" /> 
           </div> 
           <div data-p="112.50" style="display: none;"> 
            <img class="img-rounded img-responsive" data-u="image" style="padding-top: 26px;" src="images/park-454416_1920.jpg" /> 
           </div> 
           <div data-p="112.50" style="display: none;"> 
            <img class="img-rounded img-responsive" data-u="image" style="padding-top: 26px;"src="images/columbine-981541_1920.jpg" /> 
           </div> 
           <div data-p="112.50" style="display: none;"> 
            <img class="img-rounded img-responsive" data-u="image" style="padding-top: 26px;" src="images/garden-705485_1920.jpg" /> 
           </div> 
          </div> 
         </div> 
         <!-- Bullet Navigator --> 
         <div data-u="navigator" class="jssorb01" style="bottom:16px;right:16px;"> 
          <div data-u="prototype" style="width:12px;height:12px;"></div> 
         </div> 
         <!-- Arrow Navigator --> 
         <span data-u="arrowleft" class="jssora02l" style="top:0px;left:8px;width:55px;height:55px;" data-autocenter="2"></span> 
         <span data-u="arrowright" class="jssora02r" style="top:0px;right:8px;width:55px;height:55px;" data-autocenter="2"></span> 
        </div> 
        <!-- #endregion Jssor Slider End --> 
       </div> 
      </div> 
     </div>

спасибо.

источник

2016-07-14 Tanmoy Sarkar

слайдер изображения на мобильном телефоне - это плохая идея ИМХО, поскольку она слишком тяжелая для загрузки сценариев и всех изображений, лучше всего иметь 1 картинку для мобильных устройств. –

это мой главный слайдер сайта .. любые трюки, чтобы сделать его отзывчивым @CarolMcKay –

Не используйте исправления widhts. Вы можете установить его с максимальной шириной и использовать 100% для нормальной ширины. –

-1

Почему вы не используете карусель для бутстрапа?

источник

2016-07-14 09:06:02

** Это действительно комментарий, а не ответ. ** Я благодарю вас, что у вас еще нет достаточной репутации, чтобы оставлять комментарии, но, пожалуйста, не используйте систему ответов в качестве замены. Получение репутации довольно легко и требует лишь немного усилий с вашей стороны. Благодаря! –

Как сделать классы div и его изображения отзывчивыми

ответ

Смежные вопросы