課題:06-09 - webかたつむり

問09
cssがポイント。
全体を包む、#wrap　containerのようなもの。
#wrapには、position: relative; 。ボタンをposition:absolute;で表示するため。
#wrapの中には、ボタンが２つと、#carouselが入っている。
表示領域、いちばんメインの、#carouselには、overflow: hidden;を記述して、範囲外は表示しないようにする。
そして、#inner。すべての画像を横一列につないだもの。
#inner=<ul>
<ul>にはdisplay: flex;。子要素である<li>を横一列に並べる。

html

<body>
<div id="wrap">

<p id="prevbtn"><img src="img/Q009_white_arrow_prev.png" alt="prev"></p>
<p id="nextbtn"><img src="img/Q009_white_arrow_next.png" alt="next"></p>
<div id="carousel">
<div id="inner">
<ul>
<li><a href="#"><img src="img/Q009_0.jpg"></a></li>
<li><a href="#"><img src="img/Q009_1.jpg"></a></li>
<li><a href="#"><img src="img/Q009_2.jpg"></a></li>
<li><a href="#"><img src="img/Q009_3.jpg"></a></li>
</ul>
</div>
</div>

</div>
</body>

css

@charset "utf-8";
/* CSS Document */
html, body, ul, li, img{
margin: 0;
padding: 0;
line-height: 1.0;
}
img{
vertical-align: bottom;
border: none;
}
a{
text-decoration: none;
}
/*reset-----------------------------------------------------------
*/
#wrap{
width: 800px;
height: 250px;
margin: 100px auto;
position: relative;
}
#prevbtn{
position: absolute;
top: 60px;
left: 25px;
cursor: pointer;
}
#nextbtn{
position: absolute;
top: 60px;
right: 25px;
cursor: pointer;
}
#carousel{
width: 100%;
height: 100%;
overflow: hidden;
}
#inner{
width: 3200px;
height: 250px;
}
#inner>ul{
display: flex;
}
#inner>ul>li{
width: 800px;
height: 250px;
cursor: default;
}
#inner>ul>li{
display: block;
}

script

<script>
$(function(){
$('#inner>ul>li:last').prependTo('#inner>ul');
$('#inner').css('marginLeft','-800px');

$('#prevbtn').on('click', function(){
$('#inner:not(:animated)').animate({'marginLeft':parseInt($('#inner').css('marginLeft'))+800+'px'}, 'swing',function(){
$('#inner').css('marginLeft','-800px');
$('#inner>ul>li:last').prependTo('#inner>ul');
$('#nextbtn', '#prevbtn').show();
});
});

$('#nextbtn').on('click', function(){
$('#inner:not(:animated)').animate({'marginLeft':parseInt($('#inner').css('marginLeft'))-800+'px'}, 'swing',function(){
$('#inner').css('marginLeft','-800px');
$('#inner>ul>li:first').appendTo('#inner>ul');
$('#nextbtn', '#prevbtn').show();
});
});
});
</script>