javascript - 如何使 slider 响应(codepen)？

Question

我正在使用这个 slider ，但它没有响应。谁能告诉我如何让这个 slider 响应。

我制作了 width:100%; 但内容没有响应任何帮助或 slimier slider 建议将不胜感激

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;
}

Answer 1

这是我目前使用的 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 ...
}

这取决于您希望 slider 在不同断点处的显示方式。举个例子:

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

在移动 View 上似乎效果不是很好。

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

.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%;
}

这只是一个示例，您可能必须在多个类上执行此操作并使用多个不同的断点才能让您的 slider 完美响应。