3
これは私の最初のボタンベースのスライダの作成です。なぜjQueryスライドが選択範囲でバウンスするのですか？
すべてのスライドは2つの部分に分割され、左側の部分には画像が含まれ、右側の部分にはテキストが含まれています。スライドを切り替えると、スライドが読み込まれる直前に予期しないバウンスが発生し、なぜそれが発生するのか分からないようです。
この同じスライドを実装する良い方法はありますか？ここで
コードは次のとおりです。
$(function() {
imw_slider();
})
function imw_slider() {
var button = $('.slide-button');
button.click(function() {
\t button.css('background-color', '#fff');
\t $(this).css('background-color', '#eee');
var index = $(this).index();
var image = $(this).parent().prev();
\t image.children('.slide:not(:nth-child('+(index+1)+'))').fadeOut(function() {
image.children('.slide:nth-child('+(index+1)+')').fadeIn();
});
});
}.image-box > .images {
text-align: center;
}
.image-box > .images > .slide:nth-child(1) {
display: block;
}
.image-box .slide.slide-2 {
position: relative;
max-width: 80rem;
margin: 0 auto;
}
.image-box > .images > .slide {
display: none;
}
.image-box > .images > .slide:after {
display: block;
content: '';
clear: both;
}
.image-box .slide.slide-2 > div {
width: 50%;
float: left;
}
.image-box .buttons {
display: table;
margin: 0 auto;
margin-top: 15px;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
}
.image-box .buttons .slide-button {
display: table-cell;
cursor: pointer;
padding: 2px 10px;
border-right: 1px solid #ccc;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-box my4">
<div class="images">
<div class="slide slide-2">
<div><img src="http://test.storeapps.org/wp-content/uploads/2016/11/Putler-Web-customers-sample.png" alt="" /></div>
<div>
<div class="text">
<h2>This is the text for slide 1</h2></div>
</div>
</div>
<div class="slide slide-2">
<div><img src="http://test.storeapps.org/wp-content/uploads/2016/11/Putler-Web-customers-sample.png" alt="" /></div>
<div>
<div class="text">
<h2>This is the text for slide 2</h2></div>
</div>
</div>
<div class="slide slide-2">
<div><img src="http://test.storeapps.org/wp-content/uploads/2016/11/Putler-Web-customers-sample.png" alt="" /></div>
<div>
<div class="text">
<h2>This is the text for slide 3</h2></div>
</div>
</div>
</div>
<div class="buttons"><span class="slide-button">button-1</span><span class="slide-button">button-2</span><span class="slide-button">button-3</span></div>
</div>
あなたがフェードアウトしていることである*すべて*スライド、あなたが参照することができ、関連する議論があります現在のものを消してしまえば、前のスライドを修正してこれをチェックアウトするだけです。 – kukkuz
単一のページに複数のスライダがある場合、これは機能しますか？ –
ええ、私はそれを複数のスライダで動作するように変更できると思います – kukkuz