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类在您的theme.scss.css中应用了以下CSS规则：

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

由于选择器的特殊性，您的CSS规则被忽略。替换类full-width，或者如果您想根据视口大小更改大小，请考虑添加一个覆盖这些规则的媒体查询。

如果您想减小转盘的高度，请考虑样式设置，而不是滑块容器本身，而是每个样式。以下CSS会将滑块的宽度调整为50％，以边距规则居中，并将.slide-heightchange类的幻灯片的高度调整为400px：

/* 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 CSS上调整幻灯片大小的问题

1 个答案:

相关信息