1
私は理解できない2つのことを除いて、ほとんどの場合機能するCSSスライダーを持っています。まず最初に、スライダーのナビゲーションボタンをどのようにして後の方法で動作させるか。今すぐクリックすると、私のaddClassは、クリックされたボタンだけでなく、すべてのボタンに.activeを追加します。それに加えて、スライダの位置をナビゲーションメニューに関連付ける方法もわかりません。私が意味することは、ユーザーがボタンのどれもクリックしていない場合でも、どのスライドがアクティブであるかをボタンに表示させたいということです。CSSスライダー付きのナビゲーションボタン
私の2番目の問題は、ボタンをクリックするたびにスライドショーを停止することです。
私の試みは間違っていますか？
トピックはありませんが、スライドをスライドさせるのではなく、スライドをフェードインさせるのが難しいですか？これについて
$('.control-button').click(function() {
button = $(this).attr('id');
id = button.replace('slide', '');
pos = (id - 1) * 100;
$('div#slider figure').css('animation-play-state', 'paused');
$('div#slider figure').removeClass('figure2');
$('.control-button').addClass('active');
posStr = '-' + pos + '%';
$('.figure').css('left', posStr);
});
$('img').click(function() {
$('div#inner').css('left', '0px');
$('div#slider figure').addClass('figure2');
$('div#slider figure').css('animation-play-state', 'running');
})div#slider {
width: 100%;
overflow: hidden;
}
div#slider .figure {
position: relative;
width: 400%;
margin: 0;
padding: 0;
font-size: 0;
text-align: left;
/*animation: 20s company-slider infinite;*/
}
.figure2 {
animation: 20s company-slider infinite;
}
@keyframes company-slider {
0% {
left: 0%;
}
30% {
left: 0%;
}
35% {
left: -100%;
}
55% {
left: -100%;
}
60% {
left: -200%;
}
90% {
left: -200%;
}
95% {
left: -300%;
}
100% {
left: -300%;
}
}
div#slider figure img {
width: 25%;
min-height: 100%;
float: left;
}
/*div#slider figure:hover { animation-play-state:paused; }*/
div#slider li {
list-style: none;
}
div#slider label {
background-color: #111;
bottom: .5em;
cursor: pointer;
display: block;
height: .5em;
position: absolute;
width: .5em;
z-index: 10;
}
#controls {
width: 100%;
height: auto;
}
#control-container {
padding: 25px 12%;
}
.control-button {
display: inline;
margin: 0 2%;
width: 25%;
background: gray;
height: 10px;
border: none;
}
.control-button.active {
display: inline;
margin: 0 2%;
width: 25%;
background: black;
height: 10px;
border: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="slider">
<figure class="figure figure2">
<img src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt>
<img src="http://i.cbc.ca/1.3376224.1450794847!/fileImage/httpImage/image.jpg_gen/derivatives/4x3_620/tundra-tea-toss.jpg" alt>
<img src="https://static.pexels.com/photos/22804/pexels-photo.jpg" alt>
<img src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt>
</figure>
<div id="controls">
<div id="control-container">
<button id="slide1" class="control-button"></button>
<button id="slide2" class="control-button"></button>
<button id="slide3" class="control-button"></button>
</div>
</div>
</div>
、なぜあなたは別のものを作成したいと思いますか？あなたが使っているIDやクラスを見ると、あなたは間違った方向に向いています。 – skobaljic