Add ReplyNew Thread

 carousel headers
PANSY PARKINSON
 Posted: November 5th, 2013, 02:17 PM
Quote
Advanced Member
Posts:40Group:MemberJoined:October 28th, 2013
Send Message


carousel sliders
the next big thing, right?! carousel sliders are something that are relatively easy to use and sometimes complicated to code. the code that i'm going to demonstrate is NOT one that i coded myself and, should you use it, you MUST credit RING WANG @ TYMPANUS. there are a lot of pure css carousel sliders provided on the internet that are easy to access, and don't forget to credit them! note, this code is different from my slider HERE and this one is much more user friendly. i will be providing the complete mark up at the end of the tutorial. THIS IS ONLY FOR SKINNING HEADERS.

the first question that you're going to want to ask yourself is whether you'll be using this for a template or a skin. it doesn't really matter because the slider is pure css, but it'll probably be important so you can determine your width and whatnot. also, if you code this into a template, the arrows weren't styled to work within dohtml so the only navigation you'll have are the bullets. first, we'll have to put in the css. this first part is your container. you can stylize and position it in any way that you want. this is where you will determine the width and the height of the slider.
CODE
.sp-slideshow {  position: relative; margin: 10px auto; width: ###px; height: ###px; }


this next part is going to be your slider background (i.e. the background image, not the actual content). it will move if you want it to, but we'll get to that part later on. this particular code has been provided in such a way that the background means the color and the url, though you can change that so it's easier for you to understand if you want because i know most people keep their background things in a different style. the width and height are kept at 100% so that the image fills the entire slider, otherwise the image will stretch if it's too small. the overflow is hidden.
CODE
.sp-content { background: #7d7f72 url(http://i.imgur.com/CbcVdlx.png) repeat scroll 0 0;position: relative;width: 100%;height: 100%;overflow: hidden;} .sp-parallax-bg {background: url(BACKGROUND IMAGE HERE) repeat-x scroll 0 0;-webkit-background-size: cover;-moz-background-size: cover;background-size: cover;position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;}


this is going to be your bottom controls / quick controls. most people want to delete these and you can probably go right ahead if you really want to, but i find them useful to keep around. this is the positioning of them, as well as the css of what they do.
CODE
.sp-slideshow input {position: absolute;bottom: 15px;left: 50%;width: 9px;height: 9px;z-index: 1001;cursor: pointer;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;} .sp-slideshow input + label {position: absolute;bottom: 15px;left: 50%;width: 6px;height: 6px;display: block;z-index: 1000;border: 3px solid #fff;border: 3px solid rgba(255,255,255,0.9);-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;-webkit-transition: background-color linear 0.1s;-moz-transition: background-color linear 0.1s;-o-transition: background-color linear 0.1s;-ms-transition: background-color linear 0.1s;transition: background-color linear 0.1s;} .sp-slideshow input:checked + label {background-color: #fff;background-color: rgba(255,255,255,0.9);} .sp-selector-1, .button-label-1 {margin-left: -36px;} .sp-selector-2, .button-label-2 {margin-left: -18px;} .sp-selector-3, .button-label-3 {margin-left: 0px;} .sp-selector-4, .button-label-4 {margin-left: 18px;} .sp-selector-5, .button-label-5 {margin-left: 36px;}


this next part is the arrows, their width, height, and what they do. i've modified it a little bit because originally the code doesn't allow the fifth slide to slider back into the first one and vice versa without the bottom controls, but i found that a little annoying so i altered it. the arrow positioning is beside what they control, so you can add in your own arrow images if you wish! the area that controls slide five going into one is the one beside ".sp-selector-5:checked ~ .sp-arrow.sp-a1 " and the one controlling the position of the arrow going from slide five to slide four (the arrow on the left) is beside ".sp-selector-5:checked ~ .sp-arrow.sp-a4".
CODE
.sp-arrow {position: absolute;top: 50%;width: 28px;height: 38px;margin-top: -19px;display: none;opacity: 0.8;cursor: pointer;z-index: 1000;background: transparent url(http://i.imgur.com/eYUSsIS.png) no-repeat;-webkit-transition: opacity linear 0.3s;-moz-transition: opacity linear 0.3s;-o-transition: opacity linear 0.3s;-ms-transition: opacity linear 0.3s; transition: opacity linear 0.3s;} .sp-arrow:hover{opacity: 1;} .sp-arrow:active{margin-top: -18px;} .sp-selector-1:checked ~ .sp-arrow.sp-a2, .sp-selector-2:checked ~ .sp-arrow.sp-a3, .sp-selector-3:checked ~ .sp-arrow.sp-a4, .sp-selector-4:checked ~ .sp-arrow.sp-a5 {right: 15px;display: block;background-position: top right;} .sp-selector-2:checked ~ .sp-arrow.sp-a1, .sp-selector-3:checked ~ .sp-arrow.sp-a2, .sp-selector-4:checked ~ .sp-arrow.sp-a3, .sp-selector-5:checked ~ .sp-arrow.sp-a4 {left: 15px;display: block;background-position: top left;}


this is just here so that your slider transition nicely instead of jumping.
CODE
.sp-slideshow input:checked ~ .sp-content {-webkit-transition: background-position linear 0.6s, background-color linear 0.8s;-moz-transition: background-position linear 0.6s, background-color linear 0.8s;-o-transition: background-position linear 0.6s, background-color linear 0.8s;-ms-transition: background-position linear 0.6s, background-color linear 0.8s;transition: background-position linear 0.6s, background-color linear 0.8s;} .sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {-webkit-transition: background-position linear 0.7s;-moz-transition: background-position linear 0.7s;-o-transition: background-position linear 0.7s;-ms-transition: background-position linear 0.7s;transition: background-position linear 0.7s;}


IF YOU WANT A FIXED BACKGROUND, YOU MAY SKIP THIS STEP! okay, so if you want a parallax background -- aka a moving background -- pay close attention. this next step is going to create a moving background for you. right now, i've set it at 0 0 for the background position so that the background is fixed, but if you want a movinf one, you MUST change the background position for EACH slide. i don't advise using the "top center, center, etc" positioning, either, i mean the number / px position! REMINDER: the FIRST NUMBER is how far LEFT it is, and the SECOND NUMBER is how far from the TOP it is.
CODE
input.sp-selector-1:checked ~ .sp-content {background-position: 0 0;background-color: #727b7f;} input.sp-selector-2:checked ~ .sp-content {background-position: -100px 0; background-color:#7f7276;} input.sp-selector-3:checked ~ .sp-content {background-position: -200px 0;background-color: #737f72;} input.sp-selector-4:checked ~ .sp-content {background-position: -300px 0;background-color: #79727f;} input.sp-selector-5:checked ~ .sp-content {background-position: -400px 0;background-color: #7d7f72;} input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;} input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;} input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;} input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;} input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}


transitions, yay! i usually leave this next part alone when i'm coding. it basically creates what the li img / li in general is going to come out like.
CODE
.sp-slider { position: relative;left: 0; width: 500%;height: 100%;list-style: none; margin: 0;padding: 0;-webkit-transition: left ease-in 0.8s; -moz-transition: left ease-in 0.8s; -o-transition: left ease-in 0.8s; -ms-transition: left ease-in 0.8s;transition: left ease-in 0.8s; } .sp-slider > li { height:100%; padding:0 60px; width: 20%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; float:left; text-align:center; opacity:0.4; -webkit-transition:opacity ease-in 0.4s 0.8s; -moz-transition:opacity ease-in 0.4s 0.8s; -o-transition:opacity ease-in 0.4s 0.8s; -ms-transition:opacity ease-in 0.4s 0.8s; transition:opacity ease-in 0.4s 0.8s; } .sp-slider > li img{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;display: block;margin: 0 auto;padding: 40px 0 50px 0;max-height: 100%;max-width: 100%;}


this part will tell you that if you're in this slide, this is where you're going to be moving the slide. this is in percents, but if you feel more comfortable making it in px then go right ahead!
CODE
input.sp-selector-1:checked ~ .sp-content .sp-slider {left: 0;} input.sp-selector-2:checked ~ .sp-content .sp-slider {left: -100%;} input.sp-selector-3:checked ~ .sp-content .sp-slider {left: -200%;} input.sp-selector-4:checked ~ .sp-content .sp-slider {left: -300%;} input.sp-selector-5:checked ~ .sp-content .sp-slider {left: -400%;}


this is the opacity for the arrows when it's on these slides.
CODE
input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child, input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2), input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3), input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4), input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5){ opacity: 1; }


then this part
CODE
@media screen and (max-width: 840px){ .sp-slideshow { height: 345px; } } @media screen and (max-width: 680px){ .sp-slideshow { height: 285px; } } @media screen and (max-width: 560px){ .sp-slideshow { height: 235px; } } @media screen and (max-width: 320px){ .sp-slideshow { height: 158px; }
NOW FOR THE HTML! we're almost done though, i promise. i'm not going to explain the html because if you read the css, you'll know what everything is. your code is going to look like this.
CODE
<div class="sp-slideshow">               <input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />   <label for="button-1" class="button-label-1"></label>       <input id="button-2" type="radio" name="radio-set" class="sp-selector-2" />   <label for="button-2" class="button-label-2"></label>       <input id="button-3" type="radio" name="radio-set" class="sp-selector-3" />   <label for="button-3" class="button-label-3"></label>       <input id="button-4" type="radio" name="radio-set" class="sp-selector-4" />   <label for="button-4" class="button-label-4"></label>       <input id="button-5" type="radio" name="radio-set" class="sp-selector-5" />   <label for="button-5" class="button-label-5"></label>       <label for="button-1" class="sp-arrow sp-a1"></label>   <label for="button-2" class="sp-arrow sp-a2"></label>   <label for="button-3" class="sp-arrow sp-a3"></label>   <label for="button-4" class="sp-arrow sp-a4"></label>   <label for="button-5" class="sp-arrow sp-a5"></label>       <div class="sp-content">       <div class="sp-parallax-bg"></div>       <ul class="sp-slider clearfix">           <li><div style="width:###px; height:###px;">SLIDE CONTENT HERE</div></li>           <li><div style="width:###px; height:###px;">SLIDE CONTENT HERE</div></li>           <li><div style="width:###px; height:###px;">SLIDE CONTENT HERE</div></li>           <li><div style="width:###px; height:###px;">SLIDE CONTENT HERE</div></li>           <li><div style="width:###px; height:###px;">SLIDE CONTENT HERE</div></li>       </ul>   </div>     </div>


Now we're done with that, yay :DDD i recommend creating another container for you to put your slide content in. if you want background images for each section, then you're going to have to create the yourself to input into each slide, but it isn't that difficult. if you have any questions, comments, or feedback, post in the comments below! IF YOU NEED CODING HELP, PLEASE POST IN THE CODING HELP SECTION.

EmailWebsite

Topic Options Add ReplyNew Thread


 


 

Latest Shouts In The Shoutbox -- View The Shoutbox · Rules   


's reputation