Нужна помощь/совет в адаптивной верстке + owlcarousel

480

07 февраля 2017, 19:16

Есть примерно такая структура сайта, поведение блоков примерно соответствует нужному результату, кроме последнего.

В определенный момент 3 блок уходит в низ и занимает ширину в 100%. Внутренние блоки располагаются в ряд с одинаковой шириной, но при уменьшении экрана контент в синих блоках не помещается, поэтому я добавляю к этому блоку(3) класc карусели(owlcarousel). Вот здесь возникает проблема, если сменить ориентацию устройства на горизонтальную 3 красных блока становятся в ряд, но синие блоки теряют свой вид из за того, что owlCarousel навешивает сверху свои стили и блоки. Как добиться нужного результата для разной ориентации устройства сохранив при этом структуру и нужный вид страницы?

P.S. Вариант не использовать слайдер это на крайний случай, так как отображение синих блоков 3/1, 2/2 вряд не очень подходит.

Структура и поведение(Адаптив) блоков схожи с нужным резултатом, бутстрап, высота и бордер для лучшего отображения.

.block 
{ 
  border: 1px solid red; 
  height: 200px; 
  padding-top: 15px; 
} 
.block__inner 
{ 
  border: 1px solid blue; 
  height: 50px; 
  margin-bottom: 5px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
 
<div class="container"> 
  <div class="row"> 
    <div class="block col-sm-6 col-md-4"></div> 
    <div class="block col-sm-6 col-md-4"></div> 
    <div class="block col-sm-12 col-md-4"> 
      <div class="block__inner col-sm-3 col-md-6"></div> 
      <div class="block__inner col-sm-3 col-md-6"></div> 
      <div class="block__inner col-sm-3 col-md-6"></div> 
      <div class="block__inner col-sm-3 col-md-6"></div> 
    </div> 
  </div> 
</div>

Answer 1

При смене ориентации экрана добавлять или удалять стили css это нормальная практика. Функция addClass на jquery добавит нужный стиль при смене экрана.

 $( window ).resize(function() {
      if(window.innerHeight > window.innerWidth){
            // здесь код для портретной ориентации
            $(".block__inner").addClass("new_view");
            // также можно через css
            //  $(".block").css("");
        }
    });

Еще один вариант для landscape и portrait

$(document).on("pagecreate",function(event){
  $(window).on("orientationchange",function(){
    if(window.orientation == 0)
    {
      $("p").text("The orientation has changed to portrait!").css({"background-color":"yellow","font-size":"300%"});
    }
    else
    {
      $("p").text("The orientation has changed to landscape!").css({"background-color":"pink","font-size":"200%"});
    }
  });                   
});

Возможно будет полезным событие смены ориентации экранов jquery

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<script> 
$(document).on("pagecreate",function(event){ 
  $(window).on("orientationchange",function(event){ 
    alert("Orientation changed to: " + event.orientation); 
  });                      
}); 
</script> 
</head> 
<body> 
 
<div data-role="page"> 
  <div data-role="header"> 
    <h1>The orientationchange Event</h1> 
  </div> 
 
  <div data-role="main" class="ui-content"> 
    <p>Try to rotate your device!</p> 
    <p><b>Note:</b> You must use a mobile device, or a mobile emulator to see the effect of this event.</p> 
  </div> 
 
  <div data-role="footer"> 
    <h1>Footer Text</h1> 
  </div> 
</div>  
 
</body> 
</html>

для css есть синтаксис для ориентации экрана (возможно будет полезен):

@media screen and (orientation: portrait) {
  #toolbar {
    width: 100%;
  }
}
/* For landscape, we want the tool bar stick on the left */
@media screen and (orientation: landscape) {
  #toolbar {
    position: fixed;
    width: 2.65em;
    height: 100%;
  }

Answer 2

Не используйте bootstrap на дивы-члены карусели. И для более тонкой настройки отображения используйте опции объекта owl-carousel, коих там тьма. https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html