スライダを反応させる方法（codepen）？

Question

私はこのスライダーを使用していますが、応答しません。 誰も私にこのスライダーを反応させる方法を教えてもらえますか？

私はwidth:100%;をしたが、内容は任意のヘルプまたはslimierスライダー提案応答しないがここ

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のミックスインであるoutdaded現在は）：

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

と同じである：（NOサス）と同じである

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

：

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

これは一例にすぎず、いくつかのクラスでこれを行い、いくつかの異なるブレークポイントを使用して、スライダのperfec応答性が高い。