Проблемы с изменением размеров слайд-шоу на Shopify css

Question

У меня проблемы с изменением размера слайд-шоу на моем Shopify css.

Это код

/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

Я использую тему повышения,

Я пробовалпереключать рост и вес с этими аргументами:

height: 50%
width: 50%

и

max-height:50%

, но безрезультатно.Я хотел бы вдвое уменьшить высоту и ширину моего слайдера

Answer 1

Я посмотрел на ваш исходный код, и если вы ссылаетесь на карусель главной домашней страницы, похоже, что ваш слайдер обернут в следующий div:

<div class="full-width relative js-slideshow-section slick-initialized slick-slider slick-dotted" data-autoplay="true" data-autoplayspeed="8000">

Класс full-width применяет следующее правило CSS в вашей theme.scss.css:

.full-width {
  min-width: 100%;
}

Ваши правила CSS игнорируются из-за специфичности селектора,Либо замените класс full-width, либо, если вы хотите изменить размер в зависимости от размера области просмотра, рассмотрите возможность добавления медиазапроса, который отменяет эти правила.

Если вы хотитеЧтобы уменьшить высоту вашей карусели, рассмотрите стиль, не сам контейнер слайдера, а каждый отдельный слайд.Следующий CSS отрегулирует ширину слайдера до 50%, отцентрирует его по правилам полей и отрегулирует высоту слайдов с классом от .slide-heightchange до 400 пикселей:

/* Slide container */
.full-width.adjusted-width {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

/* Individual slide */
.slide-adjusted-height {
 height: 400px;
}

Обратите внимание, что я добавил adjusted-width Класс к вашему карусели контейнеров.Это вместе с классом full-width создаст более конкретный селектор CSS, который должен применять правило.Однако в семантических целях вы можете рассмотреть возможность переименования класса full-width или его полного удаления с помощью JavaScript при изменении размера.Кроме того, правило width: 50%; изменяет размер ширины в зависимости от размера содержащего блока.Возможно, вы захотите рассмотреть другое правило ширины.

Связанные сведения

Похоже, ваша тема Shopify использует библиотеку Slick для слайдера.Документацию и пример использования можно найти по адресу http://kenwheeler.github.io/slick/

. Как объясняют документы, ваши слайды div помещаются в контейнер div, который затем используется для инициализации карусели.

Еще одна полезная вещь - это настройка параметров JS ползунка.Библиотека Slick имеет настройки adaptiveHeight и variableWidth, которые по умолчанию имеют значение false.Они позволяют вам настроить поведение вашей карусели при работе со слайдами различной высоты и ширины.