Skip to content

Instantly share code, notes, and snippets.

@maxw3st

maxw3st/slider.html

Last active December 19, 2015 02:19
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save maxw3st/5882698 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
slider.html
<!-- Kudos to Mary Lou on codrops: http://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/ for coming up with this.
In order to retask her slider the banner text and button positioning were removed or altered to produce a different look and feel.
You are encouraged to visit her tutorial and demo on Codrops for a view of the original 4 versions of this slider. --->
<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>
<!-- the block below sets up the radio buttons that will be used by the user to randomly select a desired
image from the set of slides. These are styled in the CSS. More importantly, they create cross device
compatibility as radio buttons (or check boxes) can be used to select list items via touch, mouse, or keyboard. -->
<!-- cr-container is the wrapper for the whole slider element. The code here reflects a need for 5 images.
Feel free to change this for any number of images. Also, the slide transitions are set for 4 slices
of each image. This can also be altered, so long as you use an even number.
The overall effect is achieved by creating animation that involves complimentary translation between
pairs of slices. There are two types of image–slice pairs involved. Slices of the same image moving in
opposite directions, and pairs of image–slices from the incoming and exiting images that are also
moving in opposite directions.
Feel free to try other possible directions of motion and other effects to achieve different overall effects. In the original
demos, Mary Lou shows how to move the slices vertically, as well as having the slice pairs (of the same image) moving in the
same direction. The slices could also be 3D rotated into, and out of, view. This is a template to start from.
It must be noted that the "slice" effect is achieved by the occlusive effect of layering, absolute positioning
and the use of changing z-index during the animation processs. The images themselves are not physically altered
throughout the process.
By using modular blocks of code (right and left blocks separate from checked and unchecked blocks) in combination
with the artful use of descendent and sibling selectors, Mary Lou has set up a framework that allows for the apparent
simultaneous animation of two images, each with multiple discrete visual regions. Using this framework any number of
paths of motion, and other effects, can be applied to image swaps to create a slide show. -->
<section class="cr-container">
<!-- the input elements are the markup for the buttons used to select the desired slide by the user -->
<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> <!-- the buttons are floated, so a clearfix is applied before the images are positioned -->
<!-- below is a set of placeholder divs and spans to set up each image in the show, as well as each "slice" of
individual images. The text in these placeholders is overlaid by the images (accessed in the CSS) and so is not visible. -->
<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>
</div> <!-- end .container div -->
<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><br />
<p>Images by Joanna Kustra http://www.behance.net/gallery/w-h-i-t-e/269865
http://creativecommons.org/licenses/by-nc/3.0/</p><br />
<p>Background Pattern from http://subtlepatterns.com/</p>
</section>
</div>
</body>
Raw
slider_style.css
/* first tie into google fonts for the heading and button text. This was done simply to put the code into a codepen and
eliminate the need for supplying a local copy of a font. If you're hosting this on your own server feel free to change this to
Whatever font you'd like to use */
@font-face {
font-family: 'Merriweather';
src: url('http://fonts.googleapis.com/css?family=Merriweather+Sans');
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);
}
/* all done with the doc head and the page header. The slider starts from here */
/* 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.
This paired animation of slices is happening within the same image, and between the incoming and exiting images.
Put another way, there are individual motion paths for checked moving right, checked moving left, unchecked moving right,
and unchecked moving left. Separating each of the four into its own animation code block allows for image swapping involving
any number of "slices" while keeping the motion paths consistently matched across each image (and between incoming and
exiting images).
This article does a great job of defining the child and sibling selectors used below. I highly recommend taking a look
for help sorting out exactly how they're used below: http://web-design-weekly.com/2012/05/31/css-selectors-that-rock/ */
.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: -10em;
}
.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