body {
padding: 10px;
}
.carousel {
position: relative;
width: 398px;
padding: 10px 40px;
border: 1px solid #CCC;
border-radius: 15px;
background:#eee;
}
.carousel img {
width:130px;
height:130px;
/*make it block to remove space around images being inline*/
display:block;
}
.arrow {
position:absolute; /*parent elem position is relative*/
top: 60px; /*FUCKING TOP WAS SET TO 60PX*/
padding: 0;
background: #ddd;
border-radius: 15px;
border: 1px solid gray;
font-size: 24px;
line-height: 24px;
color: #444;
display: block;
}
.arrow:focus {
outline: none;
}
.arrow:hover {
background: #ccc;
cursor: pointer;
}
.prev {
left: 7px;
}
.next{
right:7px;
}
/*gallery is a div wrapping only the images*/
.gallery {
width:390px;
overflow:hidden;
/*scroll-overed images are hidden*/
}
.gallery ul{/*the elem which contains all imgs*/
height:130px;
width:9999px;
/*with those two settings below,
border sticks to the content with no space*/
margin:0px;
padding:0px;
list-style:none;
transition:margin-left 250ms;
font-size:0;
}
.gallery li {
display: inline-block;
}
padding: 10px;
}
.carousel {
position: relative;
width: 398px;
padding: 10px 40px;
border: 1px solid #CCC;
border-radius: 15px;
background:#eee;
}
.carousel img {
width:130px;
height:130px;
/*make it block to remove space around images being inline*/
display:block;
}
.arrow {
position:absolute; /*parent elem position is relative*/
top: 60px; /*FUCKING TOP WAS SET TO 60PX*/
padding: 0;
background: #ddd;
border-radius: 15px;
border: 1px solid gray;
font-size: 24px;
line-height: 24px;
color: #444;
display: block;
}
.arrow:focus {
outline: none;
}
.arrow:hover {
background: #ccc;
cursor: pointer;
}
.prev {
left: 7px;
}
.next{
right:7px;
}
/*gallery is a div wrapping only the images*/
.gallery {
width:390px;
overflow:hidden;
/*scroll-overed images are hidden*/
}
.gallery ul{/*the elem which contains all imgs*/
height:130px;
width:9999px;
/*with those two settings below,
border sticks to the content with no space*/
margin:0px;
padding:0px;
list-style:none;
transition:margin-left 250ms;
font-size:0;
}
.gallery li {
display: inline-block;
}
/*
was challenging and fun
without the mark MIN, some comment which are kinder than JS tutorial are written by me*/
댓글
댓글 쓰기