Совиная карусель ломает страницу

ProgramBox

Совиная карусель ломает страницу

Post author:admin
Запись опубликована:12 января, 2022
Post category:Вопросы по программированию

#css #owl-carousel #squarespace

Вопрос:

Привет, я использовал этот код для клиентского сайта (Squarespace). Я много возился только с помощью CSS.>

Пожалуйста, проверьте конкретную страницу клиента; пароль mmmm1234
Прокрутите вниз и проверьте раздел «Откройте для себя онлайн-опыт», в котором я реализовал слайдер
Например, при просмотре с меньшим размером экрана, например шириной 1280 пикселей, разрывы страниц
Он ломается чаще всего, особенно в версиях для iPad
Обычно, если мы положим только 4 или 5 карточек, это не сломает страницу
Но в конце концов мы должны быть в состоянии поставить больше
Участник / разработчик из Squarespace не смог помочь мне в этом и упомянул, что, возможно, проблема была в самой карусели owl
Кто-нибудь может мне помочь?

Ниже приведены css и js того, который я использовал для клиента

 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/css/uikit.min.css" rel="stylesheet">

<style>

.uk-margin {
  padding: 0 !important;
  margin: 0 !important;
}
.uk-section {
  background-color: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.owl-carousel {
  position: relative;
  margin-top: 30px;
}
.owl-nav {
  position: absolute;
  top: -45px;
  right: 10px;
}
.uk-card-primary {
  border: none;
  border-radius: 0 0 13px 13px;
  background: none !important;
  background-color: none !important;
  color: none !important;
  margin: 0 5px 5px 5px !important;
  box-shadow: 0 3px 5px 0 rgb(0 0 0 / 50%) !important;
  min-height: 114px !important;
}
.uk-card > :last-child {
  margin-top:0;
  margin-bottom: 10px;
  min-height: 114px !important;
}
.owl-dots {
  margin-top: 0 !important;
}
.uk-card-title {
  margin: 0 0 15px 0 !important;
  color: black !important;
  font-size: 15px;
  line-height: 120%;
}
.crd-rate {
  margin: 0 !important;
  color: black !important;
  font-size: 13px;
  line-height: 120%;
}
#crd-rate {
  color: black !important;
  font-weight: 700 !important;
}
#dsc {
  margin: 0 0 15px 0 !important;
  color: #808080;
  font-size: .8em;
  line-height: 120%;
}
.uk-card-primary.uk-card-hover:hover {
  background-color: none !important;
  box-shadow: none !important;
  border: 1px solid #cecece;
}
.owl-stage {
  padding: 15px !important;
}
.uk-card-body {
  padding: 8px 10px 10px 10px !important;
}
.uk-link, a {
  color: inherit !important;
}

/*
----
Card Image
----
*/
.crd-img {
  padding: 5px 5px 0 5px; 
}
#crd-img {
  border-radius: 13px 13px 0 0; 
}

/*
----
Rate, Star, Reviews
----
*/

.d-flex1, .align-items-end1, .justify-content-between1 {
  text-align: left;
  word-wrap: break-word;
  box-sizing: border-box;
  margin: 0 !important;
}
.d-flex1 {
  display: flex !important;
}
.align-items-end1 {
  align-items: flex-start !important;
}
.justify-content-between1 {
  justify-content: flex-start !important;
}
#crd-rating, #crd-star, #crd-review {
  margin-right: 5px !important;
  font-size: 13px !important;
  color: black !important;
}
/*#crd-rating, #crd-review {
  margin-top: 2px !important;
}*/
#crd-rating {
  color: black !important;
  font-weight: 700 !important;
}
#crd-star {
  max-width: 20px !important;
  margin-top: -2px !important;
}
#crd-review {
  font-weight: 100 !important;
}

/*
----
Owl Carousel
----
*/

.owl-theme .owl-nav {
    margin-top: 10px;
    text-align: center;
    -webkit-tap-highlight-color: transparent; }
.owl-theme .owl-nav [class*='owl-'] {
    color: black;
    font-size: 14px;
    margin: 5px;
    padding: 4px 7px;
    background: none;
    display: inline-block;
    cursor: pointer;
    border-radius: 3px; }
.owl-theme .owl-nav [class*='owl-']:hover {
    background: none;
    color: #808080;
    text-decoration: none; }
  .owl-theme .owl-nav .disabled {
    opacity: 0.5;
    cursor: defau< }
.owl-theme .owl-nav.disabled   .owl-dots {
    margin-top: 10px; }
.owl-theme .owl-dots {
    text-align: center;
    -webkit-tap-highlight-color: transparent; }
.owl-theme .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;
    *display: inline; }
.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: #a7a7a7;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity 200ms ease;
    border-radius: 30px; }
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #cecece; }
.owl-item.active {
  margin: 0 !important;
}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>

<script>
  $('.owl-carousel').owlCarousel({
    loop:false,
  stagePadding: 15,
    margin:10,
    nav:true,
  navText : ['<span class="uk-margin-small-right uk-icon" uk-icon="icon: chevron-left"></span>','<span class="uk-margin-small-left uk-icon" uk-icon="icon: chevron-right"></span>'],
    responsive:{
        0:{
            items:2
        },
        640:{
            items:3
        },
      960:{
            items:4
        },
        1200:{
            items:5
        }
    }
})
</script>

Ответ №1:

обновленный

Когда в карусели Owl много элементов, ее owl-stage блок становится очень широким, и карусель занимает всю ширину экрана от родительских ящиков, которые они готовы ей уступить.

И среди его родительских блоков есть блок с .content-wrapper классом, который имеет возможность становиться шире видимой области экрана.

Класс .page-section:not(.full-bleed-section)>.content-wrapper имеет свойства CSS:

    box-sizing: content-box;
   padding-left: 30px;
   padding-right: 30px;

Класс .page-section>.content-wrapper обладает свойствами:

    box-sizing: content-box;
   max-width: 1363px;
   width: 100%;

В результате мы имеем 100% 60px для потенциальной ширины этого блока:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

По умолчанию в модели CSS-поля ширина и высота, назначенные элементу, применяются только к полю содержимого элемента. Если элемент имеет какие-либо границы или отступы, они затем добавляются к ширине и высоте, чтобы получить размер поля, отображаемого на экране.

content-box дает вам поведение по умолчанию для определения размера CSS-полей.

Это не заметно на рабочем столе, пока max-width свойство действует. Но на узком экране он перестает ограничивать ширину блока и выходит за границу видимой области. А затем мы видим горизонтальную полосу прокрутки и дополнительную белую область в правой части макета страницы.

Решение 1. Определите box-sizing: border-box; для этого блока. В этом случае отступы будут учитываться в пределах 100% ширины, а не добавляться к ним.

скриншот

Решение 2: Если вам нужно использовать именно box-sizing: content-box; здесь, вы можете воспользоваться тем фактом, что у этого блока уже есть display: flex; свойство, и позволить ему самостоятельно определить, сколько места он может предоставить для своего содержимого.

   flex-basis: 100%;
  width: 0;

Оба решения хорошо работают при редактировании сайта с помощью инструментов разработчика. Насколько я мог видеть, они дают надежные результаты для любой ширины экрана.

На веб-странице вам также необходимо обратить внимание на специфику CSS, чтобы новые свойства работали.

1. Спасибо! Это спасает жизнь. Я просто добавил приведенный ниже код в CSS Squarespace .страница-раздел>.оболочка содержимого { дисплей: гибкий; flex-основа: 100%; ширина: 0; } Затем он все исправил, мне не нужно было переходить на каждый из ползунков, еще раз спасибо!

2. Рад помочь! Пожалуйста, отметьте ответ как решение, если проблема решена.

Метки: Совиная карусель ломает страницу