Skip to content

Instantly share code, notes, and snippets.

@nksm

nksm/CSS でカルーセル.markdown

Last active September 7, 2015 01:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nksm/fafdca22831bbb88e1fc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nksm/fafdca22831bbb88e1fc to your computer and use it in GitHub Desktop.
Download ZIP
CSS でカルーセル
Raw
CSS でカルーセル.markdown

CSS でカルーセル

間接セレクタとtarget擬似クラスを利用したカルーセル トランジションはスライドイン

A Pen by nakashima akira on CodePen.

License.

Raw
index.html
- var images = ['http://www-img.dclog.jp/images/free_photo/photo001/original.jpg', 'http://www-img.dclog.jp/images/free_photo/photo006/original.jpg', 'http://www-img.dclog.jp/images/free_photo/photo018/original.jpg', 'http://www-img.dclog.jp/images/free_photo/photo016/original.jpg', 'http://www-img.dclog.jp/images/free_photo/photo027/original.jpg']
- var count = 1
.container
.carousel
each image in images
.carousel__control(id="photo#{count}")
- (count < images.length ? count++ : count = 1 )
.carousel__item-container
each image in images
.carousel__item
img.carousel__image(src="#{image}", alt="")
- (count < images.length ? count++ : count = 1 )
.pagination
each image in images
.pagination__item
a(href='#photo#{count}')
i.fa.fa-angle-left.fa-2x
- (count < images.length ? count++ : count = 1 )
.pager
each image in images
.pager__item
a(href="#photo#{count}")
- (count < images.length ? count++ : count = 1 )
Raw
style.css
// variables
$width: 640px;
$height: 480px;
$duration: .5s;
$carousel: '.carousel';
$carousel__control: '#{$carousel}__control';
$pager: '.pager';
$length: 5;
@keyframes carousel {
0% {
transform: translateX(0);
}
16% {
transform: translateX(0);
}
20% {
transform: translateX($width * -1);
}
36% {
transform: translateX($width * -1);
}
40% {
transform: translateX($width * -2);
}
56% {
transform: translateX($width * -2);
}
60% {
transform: translateX($width * -3);
}
76% {
transform: translateX($width * -3);
}
80% {
transform: translateX($width * -4);
}
96% {
transform: translateX($width * -4);
}
100% {
transform: translateX(0);
}
}
.container {
margin: 10px;
}
#{$carousel} {
$carousel: &;
$carousel__item-container: ();
position: relative;
width: 100%;
max-width: $width;
min-width: ($width / 2);
height: 100%;
max-height: $height;
min-height: ($height / 2);
padding-bottom: 40px;
overflow: hidden;
margin: auto;
&__control {
display: none;
}
&__item {
@at-root #{selector-append(&, '-container')} {
$carousel__item-container: &;
position: relative;
display: flex;
width: 100% * $length;
height: inherit;
min-height: inherit;
max-height: inherit;
margin-bottom: 10px;
transition: transform $duration;
transform: translateZ(0);
will-change: transform;
@for $i from 1 through $length {
#{$carousel__control}:nth-child(#{$i}):target ~ & {
transform: translateX((100% / $length) * ($i - 1) * -1);
animation: none;
}
}
}
position: relative;
&:first-child {
// 初期表示時のデフォルト表示
transform: translateX(0);
}
}
&__image {
width: 100%;
height: auto;
}
}
.pagination {
$pagination: &;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 10;
width: inherit;
min-width: inherit;
max-width: inherit;
margin: auto;
&::before {
content: '';
display: block;
padding-top: (100% * (($height / $width) * 1));
}
&__item {
$size: 50px;
@at-root %pagination__item--is-hidden {
display: none;
}
@at-root %pagination__item--prev {
left: 10px;
right: auto;
display: block;
transform: rotate(0);
}
@at-root %pagination__item--next {
right: 10px;
left: auto;
display: block;
transform: rotate(180deg);
}
position: absolute;
top: 0;
bottom: 0;
width: $size;
height: $size;
margin: auto;
#{$carousel__control} ~ #{$pagination} & {
@extend %pagination__item--is-hidden;
}
@at-root #{$carousel__control} ~ #{$pagination} #{&}:nth-child(2) {
@extend %pagination__item--next;
}
@at-root #{$carousel__control}:nth-child(#{$length}):target ~ #{$pagination} #{&}:nth-child(2) {
@extend %pagination__item--is-hidden;
}
@for $i from 1 through $length {
@at-root #{$carousel__control}:nth-child(#{$i}):target ~ #{$pagination} #{&}:nth-child(#{$i}) {
@extend %pagination__item--is-hidden;
}
@at-root #{$carousel__control}:nth-child(#{$i}):target ~ #{$pagination} #{selector-replace(&, '#{&}', '#{&}:nth-child(#{$i - 1})')} {
@extend %pagination__item--prev;
}
@at-root #{$carousel__control}:nth-child(#{$i}):target ~ #{$pagination} #{selector-replace(&, '#{&}', '#{&}:nth-child(#{$i + 1})')} {
@extend %pagination__item--next;
}
}
> a {
display: flex;
align-items: center;
justify-content: center;
width: $size;
height: $size;
border-radius: 51%;
background-color: rgba(#fff, .5);
color: #000;
text-decoration: none;
transition-duration: $duration;
transition-property: background-color;
transform: translateZ(0);
will-change: background-color;
&:hover {
background-color: rgba(#fff, .8);
}
}
}
}
#{$pager} {
$size: 10;
$size--px: $size * 1px;
position: relative;
display: flex;
justify-content: center;
&__item {
display: inline-block;
width: $size--px;
height: $size--px;
border-radius: 51%;
background-color: rgba(0, 0, 0, .2);
transition: background-color $duration;
transform: translateZ(0);
will-change: background-color;
&:first-child {
// 初期表示時のデフォルト表示
background-color: #000;
}
#{$carousel__control}:target ~ #{$pager} > & {
// 選択されていない時の表示
background-color: rgba(0, 0, 0, .2);
@for $i from 1 through $length {
&:nth-child(#{$i}) {
@at-root #{selector-replace(&, '#{$carousel__control}:target', '#{$carousel__control}:target:nth-child(#{$i})')} {
// 選択時の表示
background-color: #000;
}
}
}
}
& + & {
margin-left: 10px;
}
> a {
display: block;
width: 100%;
height: 100%;
}
}
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment