Skip to content

Instantly share code, notes, and snippets.

@maxw3st

maxw3st/index.html

Created June 28, 2013 04:53
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save maxw3st/5882532 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by maxw3st. Sliced Image Slider - A modified version of the tutorial slider set (of 4) by Mary Lou @ Codrops: http://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/
Raw
index.html
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sliced Image Slider Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="CSS3 Sliding Image Panels for COT Index Charts" />
<meta name="keywords" content="sliding, background-image, css3, panel, images, slider, fx majors, cot index charts" />
<meta name="author" content="maxw3st via Codrops & Mary Lou" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Merriweather+Sans">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/styleindxchart2.css" />
</head>
<body>
<div class="container">
<header>
<h1>Sliced Image Slider<span> Template</span></h1>
</header>
<section class="cr-container">
<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
<label for="select-img-1" class="cr-label-img-1">1</label>
<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
<label for="select-img-2" class="cr-label-img-2">2</label>
<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
<label for="select-img-3" class="cr-label-img-3">3</label>
<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
<label for="select-img-4" class="cr-label-img-4">4</label>
<input id="select-img-5" name="radio-set-1" type="radio" class="cr-selector-img-5" />
<label for="select-img-5" class="cr-label-img-5">5</label>
<div class="clr"></div>
<div class="cr-bgimg">
<div>
<span>Slice 1 - Image 1</span>
<span>Slice 1 - Image 2</span>
<span>Slice 1 - Image 3</span>
<span>Slice 1 - Image 4</span>
<span>Slice 1 - Image 5</span>
</div>
<div>
<span>Slice 2 - Image 1</span>
<span>Slice 2 - Image 2</span>
<span>Slice 2 - Image 3</span>
<span>Slice 2 - Image 4</span>
<span>Slice 2 - Image 5</span>
</div>
<div>
<span>Slice 3 - Image 1</span>
<span>Slice 3 - Image 2</span>
<span>Slice 3 - Image 3</span>
<span>Slice 3 - Image 4</span>
<span>Slice 3 - Image 5</span>
</div>
<div>
<span>Slice 4 - Image 1</span>
<span>Slice 4 - Image 2</span>
<span>Slice 4 - Image 3</span>
<span>Slice 4 - Image 4</span>
<span>Slice 4 - Image 5</span>
</div>
</div>
</section>
<section class="reference">
<p>Thanks to Mary Lou, and her tutorial on <a href="http://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/" target="_blank">codrops</a> from which this slider was derived.</p>
</section>
</div>
</body>
Raw
style.css
@font-face {
font-family: 'Merriweather';
src: url('http://fonts.googleapis.com/css?family=Merriweather+Sans');
/*src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/BebasNeue-webfont.woff') format('woff'),
url('fonts/BebasNeue-webfont.ttf') format('truetype'),
url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); */
font-weight: normal;
font-style: normal;
}
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
height: 100%;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
section, header{
display: block;
}
/* General global styles */
body{
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
background: #fff url(http://maxw3st.us/sliding/images/bg.jpg) repeat top left;
font-weight: 400;
font-size: 15px;
color: #3a2127;
overflow-y: scroll;
}
a{
color: #333;
text-decoration: none;
}
.container{
width: 100%;
height: 100%;
position: relative;
text-align: center;
}
.clr{
clear: both;
}
.container > header{
padding: 20px 30px 10px 30px;
margin: 0px 20px 10px 20px;
position: relative;
display: block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5), -1px -1px 1px rgba(255,255,255,0.5);
text-align: center;
}
.container > header h1{
font-family: 'Merriweather', 'Arial Narrow', Arial, sans-serif;
font-size: 35px;
line-height: 35px;
position: relative;
font-weight: 400;
color: rgba(26,89,120,0.9);
text-shadow: 1px 1px 1px rgba(0,0,0,0.1), -1px -1px 1px rgba(255,255,255,0.5);
padding: 0px 0px 5px 0px;
}
.container > header h1 span{
color: #7cbcd6;
font-size: 35px;
text-shadow: 0 1px 1px rgba(255,255,255,0.8), 0 -1px 1px rgba(0,0,0,0.5);
}
.container > header h2{
font-size: 16px;
font-style: italic;
color: #2d6277;
text-shadow: 0 1px 1px rgba(255,255,255,0.8), 0 -1px 1px rgba(0,0,0,0.5);
}
/* this is the container for the slider */
.cr-container{
width: 600px;
height: 460px;
position: relative;
margin: 0 auto;
overflow: hidden;
background: #333;
border: 20px solid #333;
border-radius: 5px 5px 26px 26px;
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
-webkit-background-clip: border-box;
-moz-background-clip: border-box;
background-clip: border-box;
}
/* any selector with "label" in it is related to the buttons */
.cr-container label{
font-weight: normal;
width: 120px;
height: 30px;
cursor: pointer;
color: #eee;
line-height: 29px;
font-size: 20px;
float:left;
position: relative;
margin-top:424px;
z-index: 1000;
}
.cr-container label:before{
content:'';
width: 32px;
height: 32px;
background: rgba(130,195,217,0.9);
position: absolute;
left: 50%;
margin-left: -16px;
border-radius: 50%;
box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
z-index:-1;
}
.cr-container label.cr-label-img-5:after{
width: 0px;
}
/* we're using radio buttons and styling them */
/* this means the slider will work on touch as well as
mouse or keyboard driven devices */
/* radio buttons only allow for 1 active selection within a
list. That's what we want: one image at a time.
Here we're just styling the buttons, but we'll be using the checked
pseudo elements again to animate the incoming image down below this block */
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4,
.cr-container input.cr-selector-img-5:checked ~ label.cr-label-img-5{
color: #489ab2;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before,
.cr-container input.cr-selector-img-5:checked ~ label.cr-label-img-5:before{
background: #eee;
box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);
}
/* this just lines up the text in the buttons a bit. It's inherited
so it really just needs to be applied to the container */
.cr-container label.cr-label-img-1 {
letter-spacing: 0.1em;
}
.cr-container input{
display: none;
}
/* here we set the size of the images. It's best if they're all the same size for this slider */
.cr-bgimg{
width: 600px;
height: 400px;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.cr-bgimg{
background-repeat: no-repeat;
background-position: 0 0;
}
.cr-bgimg div{
width: 150px;
height: 100%;
position: relative;
float: left;
overflow: hidden;
background-repeat: no-repeat;
}
/* here's where the slicing starts */
.cr-bgimg div span{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 150px;
z-index: 2;
text-indent: -9000px;
}
/* things get a little confusing here. Just remember we have 5 images
and we're swapping 4 equal width slices of two of them when a button is "pressed"
So, there's slices 1 and 3 moving in the same direction, and slices
2 and 4 moving in the other or: "even and odd" span children of the divs nested in cr-bgimg */
.cr-bgimg div:nth-child(odd) span{
left: -150px;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
background-image: url(http://maxw3st.us/sliding/images/1.jpg);
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2){
background-image: url(http://maxw3st.us/sliding/images/2.jpg);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3){
background-image: url(http://maxw3st.us/sliding/images/3.jpg);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4){
background-image: url(http://maxw3st.us/sliding/images/4.jpg);
}
.cr-container input.cr-selector-img-5:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(5){
background-image: url(http://maxw3st.us/sliding/images/5.jpg);
}
/* this block creates the slices */
.cr-bgimg div:nth-child(1) span{
background-position: 0px 0px;
}
.cr-bgimg div:nth-child(2) span{
background-position: -150px 0px;
}
.cr-bgimg div:nth-child(3) span{
background-position: -300px 0px;
}
.cr-bgimg div:nth-child(4) span{
background-position: -450px 0px;
}
/* here we set the direction and timing of motion for the slices.
lots of options, this is one
When a button is active (":checked"), the checked pseudo element is the
new, or incoming image. For this demo, the even numbered slices will be moving to the left & the odd slices are moving right when they belong to the "checked" image.
The opposite is true for the image being replaced. Notice also that the newly checked
image gets it's z-index increased so it's always going to be on top no matter
which order the images are selected with the buttons (or what order they are in in the
HTML).
Both images have slices that are moving left or right when the transition occurs. The code below handles the animation for both sets of image slices (entering or exiting).
Whether a given slice is moved right or left is determined by whether it's :checked
or not as well as whether it's an even or odd slice. This demo only has four slices
per image, but you can see how the same technique could be applied to any number
of slices as long as it's an even number. */
.cr-container input:checked ~ .cr-bgimg div span{
-webkit-animation: slideOutRight 0.6s ease-in-out;
-moz-animation: slideOutRight 0.6s ease-in-out;
-o-animation: slideOutRight 0.6s ease-in-out;
-ms-animation: slideOutRight 0.6s ease-in-out;
animation: slideOutRight 0.6s ease-in-out;
}
@-webkit-keyframes slideOutRight{
0%{ left: 0px; }
100%{ left: 150px; }
}
@-moz-keyframes slideOutRight{
0%{ left: 0px; }
100%{ left: 150px; }
}
@-o-keyframes slideOutRight{
0%{ left: 0px; }
100%{ left: 150px; }
}
@-ms-keyframes slideOutRight{
0%{ left: 0px; }
100%{ left: 150px; }
}
@keyframes slideOutRight{
0%{ left: 0px; }
100%{ left: 150px; }
}
.cr-container input:checked ~ .cr-bgimg div:nth-child(even) span{
-webkit-animation: slideOutLeft 0.6s ease-in-out;
-moz-animation: slideOutLeft 0.6s ease-in-out;
-o-animation: slideOutLeft 0.6s ease-in-out;
-ms-animation: slideOutLeft 0.6s ease-in-out;
animation: slideOutLeft 0.6s ease-in-out;
}
@-webkit-keyframes slideOutLeft{
0%{ left: 0px; }
100%{ left: -150px; }
}
@-moz-keyframes slideOutLeft{
0%{ left: 0px; }
100%{ left: -150px; }
}
@-o-keyframes slideOutLeft{
0%{ left: 0px; }
100%{ left: -150px; }
}
@-ms-keyframes slideOutLeft{
0%{ left: 0px; }
100%{ left: -150px; }
}
@keyframes slideOutLeft{
0%{ left: 0px; }
100%{ left: -150px; }
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4),
.cr-container input.cr-selector-img-5:checked ~ .cr-bgimg div span:nth-child(5)
{
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
-o-transition: left 0.5s ease-in-out;
-ms-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
-ms-animation: none;
animation: none;
left: 0px;
z-index: 10;
}
/* below is just styling for the line of text referencing Mary Lou and offering a link to her original
tutorial. The tutorial includes 4 types of motion for the slices. this demo is 1 of them */
.reference > p {
font-family: Merriweather, serif;
font-size: 16px;
position: relative;
top: 1em;
}
.reference > p > a {
text-decoration: underline;
}
/* from the tutorial by Mary Lou on codrops: http://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/ */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment