Created
February 2, 2016 17:14
-
-
Save cliffordfajardo/0ae29fea8ad0b786dd9b to your computer and use it in GitHub Desktop.
pure css carousel
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
CSS3 Carousel - Clifford Fajardo | |
The markup is very simple: | |
- Radio Inputs | |
- Labels with thumbnails to detect click event | |
- Main Image | |
*/ | |
/************************** CAROUSEL STYLES START **************************/ | |
.carousel .featured-image-caption { | |
padding-bottom : 10px; | |
} | |
.carousel > img { | |
width : 470px; | |
} | |
.carousel { | |
display : inline-block; | |
position : relative; | |
padding-top : 270px; | |
} | |
/*Child selector -selects all imgs that are DIRECT children of .carousel. | |
Since nearest parent has display other than static & img display is absolute, | |
images get absolutely positioned relative to the nearest parent that | |
has declared position. By setting direct image elements absolute | |
with a top of 0 (means go to the top leave no space & left 0 leave no left space, | |
we push the images to the top left corner) | |
*/ | |
.carousel > img { | |
position : absolute; | |
top : 0; | |
left : 0/**/; | |
transition : all 0.5s; | |
} | |
/*CSS attribute selector - select any input tag with this attribute & value*/ | |
.carousel input[name="slide_switch"] { | |
display : none; | |
} | |
/* Floated elements remain a part of the flow of the web page. | |
This is distinctly different than page elements that use absolute positioning. | |
Absolutely positioned page elements are removed from the flow of the webpage,*/ | |
.carousel label { | |
float : left; | |
margin : 0px 15px 0 0; | |
border : 3px solid #999; | |
opacity : 0.6/**/; | |
transition : all 0.5s; | |
} | |
.carousel label:last-of-type { | |
margin-right : 0; | |
} | |
.carousel label img { | |
display : block; | |
} | |
body > span { | |
float : left; | |
} | |
/* Click events Start*/ | |
/*adjacent selector or next-sibling: | |
..in this case: | |
select a <label> that directly follows the input element with x attr that | |
has been check ...very specific*/ | |
.carousel input[name="slide_switch"]:checked + label { | |
border-color : #666; | |
opacity : 1; | |
} | |
/*main images*/ | |
/*general sibling combinator | |
select all images that are sibling siblings of input w/.. | |
*/ | |
.carousel input[name="slide_switch"] ~ img { | |
opacity : 0; | |
} | |
/*^^this hide all main image, but on click of thumbnails | |
the images will be displayed at normal size*/ | |
/*adjacent selector or next-sibling: | |
..in this case: | |
select an <img> that directly follows a <label> element that directly | |
follows the input element with x attr that has been checked*/ | |
.carousel input[name="slide_switch"]:checked + label + img { | |
opacity : 1; | |
transform : scale(1); | |
} | |
/*clicking on any thumbnail now should activate the image related to it*/ | |
/************************** CAROUSEL STYLES END **************************/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<aside class="carousel left"> | |
<!-- image 0 --> | |
<img src="featuredImage.jpg" alt="millennium falcon in air fight"> | |
<div class="featured-image-caption"> Pew Pew Pew, dog fight!</div> | |
<!-- img 1 --> | |
<input type="radio" name="slide_switch" id="id1"> | |
<label for="id1"> | |
<img src="featuredImage.img.1.jpg" alt="storm troopers on field" width="100px" height="auto"> | |
</label> | |
<img src="featuredImage.img.1.jpg" alt="storm troopers on field"> | |
<!-- img 2 --> | |
<input type="radio" name="slide_switch" id="id2"> | |
<label for="id2"> | |
<img src="featuredImage.img.2.jpg" alt="rebels at war" width="100px" height="auto"> | |
</label> | |
<img src="featuredImage.img.2.jpg" alt="rebels at war"> | |
<!-- img 3 --> | |
<input type="radio" name="slide_switch" id="id3"> | |
<label for="id3"> | |
<img src="featuredImage.img.3.jpg" alt="Darth Vader" width="100px" height="auto"> | |
</label> | |
<img src="featuredImage.img.3.jpg" alt="Darth Vader"> | |
<!-- img 4 --> | |
<input type="radio" name="slide_switch" id="id4"> | |
<label for="id4"> | |
<img src="featuredImage.img.4.jpg" alt="" width="100px" height="auto"> | |
</label> | |
<img src="featuredImage.img.4.jpg" alt=""> | |
</aside> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment