編集 コードにいくつかの改善を加え、問題に頭を悩ませたので、この投稿のほとんどを書き直します...このスライダーは、応答性と流動性を目的としていますが、アクティブな要素のサイズ変更中はスライド要素があります位置がずれています。
問題を確認するには：
- 2番目のメニュー項目を選択します
- スライダーが2番目のシーンに移動するのを待ちます
- 画面のサイズを変更します。2番目と3番目のシーンが両方とも表示されていることに気付くでしょう！
サイズ変更したピクセル数だけマージンを移動する方法がわからないようです。resize（window）.before＆resize（window）.afterを探し始めようとしています！もっと良い方法があるかもしれません...教えてください。
ありがとう。
HTML：
<div id='main'>
<div id="introAnime">
<div class='sliderNav prevNext'>
<button data-dir='prev' class='left'><span><</span></button>
<button data-dir='next' class='right'><span>></span></button>
</div>
<div class='sliderNav sceneBtns'>
<button data-dir='1'>1</button>
<button data-dir='2'>2</button>
<button data-dir='3'>3</button>
</div>
<div class="sliderContent">
<ul>
<li class="">1<div class="showScene"></div></li>
<li class="">2<div class="showScene"></div></li>
<li class="">3<div class="showScene"></div></li>
</ul>
</div>
</div>
</div>
JS：
$(window).resize(function() {
grabVars();
$('.showScene').css({
'width' : contWidth + 'px'
});
naviSetup();
});
$(document).ready(function(){
grabVars();
naviSetup();
animeSetup();
$('.sliderNav').find('button').on('click', function(){
moveTo = $(this).data('dir');
move(moveTo);
});
});
function grabVars(){
introAnimeWidth = $('#introAnime').width();
contWidth = $('.sliderContent').width();
contHeight = $('.sliderContent').height();
numScenes = $('.showScene').length;
sceneMarginLeft = $('.sliderContent ul')
.css('margin-left').replace('px','');
}
function naviSetup(){
$('.sliderNav').show();
$('.prevNext .right').css({
'left' : ((introAnimeWidth - 43) + 'px')
});
sceneBtnsLeft = (introAnimeWidth - $('.sceneBtns').width())/2;
$('.sceneBtns').css({
'left' : sceneBtnsLeft
});
}
function animeSetup(){
$('.sliderContent').css({
'overflow' : 'hidden'
});
$('.showScene').css({
'width' : contWidth + 'px',
'height' : contHeight + 'px'
});
}
function move(moveTo){
grabVars();
if (moveTo == 'next')
{
if ( sceneMarginLeft <= (-1) * ((1*numScenes) - 1) * (contWidth*1) )
{
moveValue = 0;
}
else
{
moveValue = sceneMarginLeft - contWidth;
}
}
else if (moveTo == 'prev')
{
if ( sceneMarginLeft >= 0 )
{
moveValue = (-1) * ((1*numScenes) - 1) * (contWidth*1);
}
else
{
moveValue = (1*contWidth) + (1*sceneMarginLeft);
}
}
else
{
moveValue = -((moveTo-1) * contWidth);
}
$('.sliderContent ul').animate({
'margin-left' : moveValue + 'px'
}, 'slow');
}
CSS：
#main{
width: 80%;
margin: auto;
}
#introAnime{
width: 100%;
position: relative;
height:300px;
border: 2px solid #cccccc;
margin-bottom: 5%;
margin-top: 2%;
border-radius: 20px;
box-shadow:
1px 1px 0 0 #014D06,
2px 2px 0 0 #014D06,
3px 3px 0 0 #014D06,
4px 4px 0 0 #014D06,
5px 5px 5px 0 #000000;
}
.showScene{
height: 200px;
width: 680px;
}
#introAnime ul li:nth-child(1){
background-color: #669900;
}
#introAnime ul li:nth-child(2){
background-color: blue;
}
#introAnime ul li:nth-child(3){
background-color: orange;
}
.sliderContent{
overflow: scroll;
margin: 50px;
color:#ffffff;
text-size: 3em;
}
.sliderContent ul {
width: 10000px;
height: 100%;
list-style: none;
}
.sliderContent ul li{
float:left;
list-style-type: none;
}
.sliderNav{
position: absolute;
display: none;
}
.sliderNav button{
cursor: pointer;
}
.prevNext {
top: 255px;
}
.prevNext button{
width: 40px;
height: 40px;
color: #ffffff;
font-size: 1.5em;
}
.prevNext .left{
position: absolute;
border-bottom-left-radius: 20px;
border-top-right-radius: 20px;
left: 5px;
}
.prevNext .right{
position: absolute;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
left: 737px;
}
.sceneBtns{
border: 2px solid #cccccc;
padding: 5px;
border-top: 0px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
left: 195px;
}
.sceneBtns button{
background-color: #ffffff;
border: none;
font-size: 10pt;
color: #669900;
padding-left: 10px;
padding-right: 10px;
}
.sceneBtns button:nth-child(1){
border-right: 2px solid #669900;
}
.sceneBtns button:nth-child(2){
border-right: 2px solid #669900;
}