如何使滑块响应（codepen）？

Posted 2021-04-12

我正在使用这个滑块，但它没有响应。任何人都可以告诉我如何使这个滑块响应。

我做了width:100%;但内容没有响应任何帮助或更苗条的滑块建议将不胜感激

https://codepen.io/ivanrafael/pen/xGNOrP

    .anim-slider {
  background: #225A86;
  list-style-type: none;
  position: relative;
  overflow: hidden;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 550px;
  padding:0;
  margin:0;
}

答案

这是我目前使用的sass mixin（现在尺寸可能有点过时）：

@mixin breakpoint($class) {
  @if $class == xs {
    @media (max-width: 767px) { @content; }
  }
  @else if $class == sm {
    @media (min-width: 768px) { @content; }
  }

  @else if $class == md {
    @media (min-width: 992px) { @content; }
  }
  @else if $class == lg {
    @media (min-width: 1200px) { @content; }
  }
  @else if $class == xlg {
    @media (min-width: 1367px) { @content; }
  }
  @else {
    @warn "Breakpoint mixin supports: xs, sm, md, lg";
  }
}

它只是媒体查询的捷径。然后我用

@include breakpoint(xs) {
 ... properties targeting mobile only go here ...
}

然后，它取决于您希望滑块出现在不同断点中的方式。通过实例：

.anim-slide img#css3 {
    left: 35%;
    top: 4%;
}

似乎在移动视图上工作得不好。

对于特定情况，您可能更喜欢：

.anim-slide img#css3 {
    left: 35%;
    @include breakpoint(xs) {
      left: 25%;
    }
    top: 4%;
}

这与：

.anim-slide img#css3 {
    left: 25%;
    @include breakpoint(sm) {
      left: 35%;
    }
    top: 4%;
}

这与（没有sass）相同：

.anim-slide img#css3 {
    left: 35%;
    @media (max-width: 767px) {
      left: 25%;
    }
    top: 4%;
}

这只是一个例子，你可能必须在几个类上执行此操作并使用几个不同的断点来使滑块完全响应。