0
私は応答スライダーを作成しようとしていましたが、 "ボタンをクリックします。また、ユーザーがどの画像を見ているかを示す点があり、それをクリックで適切に変更できるようになっています（しかし、確かに最も「乾いた」コードではありません）。jqueryを使用して「次/前」をクリックしたときに反応するスライダーを作成しますが、プラグインは使用しません
誰かが「前」または「次へ」のいずれかをクリックしたときに適切な量の「innerCaro」を移動する方法がわかりません。私はいくつかのことを試しました（いつでもカロの位置を把握し、ポジションに応じて移動させようとしています）。しかし何も働いていません。
また、私はこれにプラグインを使用することはできません。
ここには私がこれまで持っていたもののCodepenがあります。
CSSすべてのヘルプは大歓迎です
<div class='outerCaro' style='width:66vw;overflow:hidden;position:relative;'>
<ul class='innerCaro'>
<li>
<img class="caroIMG" src="//images.crateandbarrel.com/is/image/Crate/dHP_NwArrvls2trSrv_160701?wid=1228&qlt=50,0" alt=''>
</li>
<li>
<img class="caroIMG" src="//images.crateandbarrel.com/is/image/Crate/dHP_NwArrvlsCeleste_160701_JL16?wid=1228&qlt=50,0" alt=''>
</li>
<li>
<img class="caroIMG" src="//images.crateandbarrel.com/is/image/Crate/dHP_NwArrvlsEgypt_160701?wid=1228&qlt=50,0" alt=''>
</li>
<li>
<img class="caroIMG" src="//images.crateandbarrel.com/is/image/Crate/dHP_NwArrvlsGeoffrey_160701_OMN16?wid=1228&qlt=50,0" alt=''>
</li>
<li>
<img class="caroIMG" src="//images.crateandbarrel.com/is/image/Crate/dHP_NwArrvlsMarin_160701_OMN16?wid=1228&qlt=50,0" alt=''>
</li>
<li>
<img class="caroIMG" src="//images.crateandbarrel.com/is/image/Crate/dHP_NwArrvlsSonata_160701?wid=1228&qlt=50,0" alt=''>
</li>
<li>
<img class='caroIMG' src="//images.crateandbarrel.com/is/image/Crate/dHP_NwArrvlsSrvng_160701_JL16?wid=1228&qlt=50,0" alt="">
</li>
</ul>
<div style='width:66vw;height:3.42vw;bottom:2%;position:absolute;'>
<div class='dotContainer' style='width:21vw;margin:0 auto;height:3.91vw;'>
<div id='dot1' class='dot activeDot'></div>
<div id='dot2' class='dot'></div>
<div id='dot3' class='dot'></div>
<div id='dot4' class='dot'></div>
<div id='dot5' class='dot'></div>
<div id='dot6' class='dot'></div>
<div id='dot7' class='dot'></div>
</div>
</div>
<div style='width:66vw;height:3.42vw;bottom:40%;position:absolute;'>
<div class='prevBtn' style='display:inline-block;float:left;cursor:pointer'>
<img src="//images.crateandbarrel.com/is/image/Crate/arrow_Gray_LEFT?&fmt=png-alpha" alt="" />
</div>
<div class='nextBtn' style='display:inline-block;float:right;cursor:pointer'>
<img src="//images.crateandbarrel.com/is/image/Crate/arrow_Gray_RIGHT?&fmt=png-alpha" alt="" />
</div>
</div>
</div>
</div>
jQueryの
var $caroHeight = $('.caroIMG').css('height');
$('.outerCaro').delay(1000).css('height', $caroHeight);
$(window).resize(function() {
$caroHeight = $('.caroIMG').css('height');
$('.outerCaro').css('height', $caroHeight);
});
$('#dot1').click(function(){
$('.dot').removeClass('activeDot');
$(this).addClass('activeDot')
$('.innerCaro').css('margin-left', '0px');
})
$('#dot2').click(function(){
$('.dot').removeClass('activeDot');
$(this).addClass('activeDot')
$('.innerCaro').css('margin-left', '-100%');
})
$('#dot3').click(function(){
$('.dot').removeClass('activeDot');
$(this).addClass('activeDot')
$('.innerCaro').css('margin-left', '-200%');
})
$('#dot4').click(function(){
$('.dot').removeClass('activeDot');
$(this).addClass('activeDot')
$('.innerCaro').css('margin-left', '-300%');
})
$('#dot5').click(function(){
$('.dot').removeClass('activeDot');
$(this).addClass('activeDot')
$('.innerCaro').css('margin-left', '-400%');
})
$('#dot6').click(function(){
$('.dot').removeClass('activeDot');
$(this).addClass('activeDot')
$('.innerCaro').css('margin-left', '-500%');
})
$('#dot7').click(function(){
$('.dot').removeClass('activeDot');
$(this).addClass('activeDot')
$('.innerCaro').css('margin-left', '-600%');
})
.outercaro {
width:66vw;
overflow:hidden;
position:relative;
}
.innerCaro {
list-style:none;
position:absolute;
top:0;
transition:all 1s ease;
width: 700%;
}
.dotContainer {
width:21vw;
margin:0 auto;
height:3.91vw;
}
.caroIMG {
width:100%;
float: left;
}
.innerCaro li {
width: 66vw;
float: left;
}
.dot {
height:1vw;
width:1vw;
border-radius:50%;
float:left;
margin:1vw 1vw;
background-color:#fff;
cursor:pointer;
}
.dot:hover {
background-color:#4D4D4E;
}
.activeDot {
background-color:#4D4D4E;
}
HTML：
そしてここでは、コードです！