1
最初から作成しているイメージスライダーに関する質問がありました。私は外部のスライダーを使用して得ることができる余分のプロパティをたくさん必要としないので、ゼロから作成したいと思います。最初のボタンをクリックした後にイメージスライダーがついてしまった
var num_of_images = $(".image-holder").length;
var visible_images = 2;
$("#slide-right").click(function() {
\t \t $(".hold-1").addClass('first');
});.col-slider{
\t position:relative;
\t z-index:13;
\t margin-top:0px; \t \t \t
\t width:70%;
\t overflow:hidden;
\t height:174px;
background-color:yellow;
}
.image-holder {
\t width: 175px;
\t height: 174px;
\t display: flex;
\t justify-content: center;
\t align-items: center;
\t color: white;
\t margin:0 15px;
\t float:left;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))
}
.image-holder h2{
\t font-family: Titillium Web;
\t text-transform: uppercase;
\t font-weight:600;
\t display:inline-block;
\t width:85%;
\t text-align:center;
\t font-size:36px;
}
.col-slider-buttons a{
margin-right:10px;
display:inline-block;
margin-bottom:30px;
}
.first {
\t -webkit-animation: animateleft 1s ease-out forwards;
\t -moz-animation: animateleft 1s ease-out forwards;
\t -ms-animation: animateleft 1s ease-out forwards;
\t -o-animation: animateleft 1s ease-out forwards;
\t animation: animateleft 1s ease-out forwards;
}
@keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
@-moz-keyframes animateleft {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
@-webkit-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
@-ms-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
@-o-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-slider-buttons">
\t \t <a id="slide-left" href="#">Left</a>
\t \t <a id="slide-right" href="#">Right</a>
</div>
<div class="col-slider">
<div class="image-holder hold-1">
<h2>TEST 1</h2>
</div>
<div class="image-holder hold-2">
<h2>TEST 2</h2>
</div> \t \t \t \t \t \t \t \t \t \t
<div class="image-holder hold-3">
<h2>TEST 3</h2>
</div> \t
<div class="image-holder hold-4">
<h2>TEST 4</h2>
</div> \t \t \t \t
</div>私は何を達成しようとしていますが、私は右のボタンを押すと、必ずマージンが左にシフトしてしまったということです。
は、私は次のセットアップを持っています。しかし、それを検出するには何らかのメカニズムが必要です。どのように私はそれを実装することができますか誰に考えを持っている？私は完全なコードの実装を求めていません。どんな指針も既に非常に役立っています。
希望する設定：左と右のボタンで画像を左右に移動してナビゲートできます。 JSFIDDLEのデモの
：それはない何
$(".hold-"+ ($('.image-holder.first').length + 1)).addClass('first');
：それはクラスのimage-holder & firstの両方を持っている元素の量をカウントし、私は/追加したJSFIDDLE
うんを助け願っています。私を助けるだろう素晴らしい、私はすでにストッパーを構築します。最後の画像に達したときにクラスの追加を停止するようにします。それを左ボタンと組み合わせる方法はありますか？私は何をすべきか？アニメーションでクラスを削除しますか？ – Rotan075
@ Rotan075現在、私はそれを修正するための解決策はありません。新しい質問をするかもしれない。 'css 'の誰かがあなたを手伝ってくれると思います –