flexslider
A Pen by digital-doodle on CodePen.
flexslider
A Pen by digital-doodle on CodePen.
<div class="grid col-940"> | |
<h1>Flexslider Carousel</h1> | |
<section class="slider"> | |
<div class="flexslider carousel"> | |
<ul class="slides"> | |
<li><img src="http://placehold.it/300x150/389ef0/fefefe&text=d"/></li> | |
<li><img src="http://placehold.it/300x150/d760a0/fefefe&text=i"/></li> | |
<li><img src="http://placehold.it/300x150/389ef0/fefefe&text=g"/></li> | |
<li><img src="http://placehold.it/300x150/d760a0/fefefe&text=i"/></li> | |
<li><img src="http://placehold.it/300x150/389ef0/fefefe&text=t"/></li> | |
<li><img src="http://placehold.it/300x150/d760a0/fefefe&text=a"/></li> | |
<li><img src="http://placehold.it/300x150/389ef0/fefefe&text=l"/></li> | |
<li><img src="http://placehold.it/300x150/d760a0/fefefe&text=-"/></li> | |
<li><img src="http://placehold.it/300x150/389ef0/fefefe&text=d"/></li> | |
<li><img src="http://placehold.it/300x150/d760a0/fefefe&text=o"/></li> | |
<li><img src="http://placehold.it/300x150/389ef0/fefefe&text=o"/></li> | |
<li><img src="http://placehold.it/300x150/d760a0/fefefe&text=d"/></li> | |
<li><img src="http://placehold.it/300x150/389ef0/fefefe&text=l"/></li> | |
<li><img src="http://placehold.it/300x150/d760a0/fefefe&text=e"/></li> | |
<li><img src="http://placehold.it/300x150/389ef0/389ef0"/></li> | |
<li><img src="http://placehold.it/300x150/d760a0/d760a0"/></li> | |
<li><img src="http://placehold.it/300x150/389ef0/389ef0"/></li> | |
<li><img src="http://placehold.it/300x150/d760a0/d760a0"/></li> | |
<li><img src="http://placehold.it/300x150/389ef0/389ef0"/></li> | |
<li><img src="http://placehold.it/300x150/d760a0/d760a0"/></li> | |
</ul> | |
</div> | |
</section> | |
<small>this codepen uses the Roboto font</small> | |
</div> |
(function() { | |
// store the slider in a local variable | |
var $window = $(window), | |
flexslider; | |
// tiny helper function to add breakpoints | |
function getGridSize() { | |
return (window.innerWidth < 600) ? 2 : | |
(window.innerWidth < 900) ? 3 : 4; | |
} | |
$(function() { | |
SyntaxHighlighter.all(); | |
}); | |
$window.load(function() { | |
$('.flexslider').flexslider({ | |
animation: "slide", | |
animationSpeed: 400, | |
animationLoop: true, | |
slideshowSpeed:1000, | |
smoothHeight:true, | |
useCSS:true, | |
itemWidth: 210, | |
itemMargin: 5, | |
controlNav: false, | |
directionNav: false, | |
minItems: 6, // use function to pull in initial value | |
maxItems: 6 // use function to pull in initial value | |
}); | |
}); | |
// check grid size on resize event | |
$window.resize(function() { | |
var gridSize = getGridSize(); | |
flexslider.vars.minItems = gridSize; | |
flexslider.vars.maxItems = gridSize; | |
}); | |
}()); |
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100); | |
$white:#fefefe; | |
$black:#333333; | |
$font-size:1.5em; | |
@mixin main_font{ | |
font-family: 'Roboto', 'sans-serif'; | |
font-weight:100; | |
text-transform:lowercase; | |
font-size:$font-size; | |
text-align:center; | |
} | |
/*mixins*/ | |
@mixin border-radius($radius) { | |
-webkit-border-radius: $radius; | |
-moz-border-radius: $radius; | |
-ms-border-radius: $radius; | |
border-radius: $radius; | |
} | |
@mixin box-shadow($x, $y, $spread, $colour){ | |
-moz-box-shadow: ($x, $y, $spread, $colour); | |
-webkit-box-shadow: ($x, $y, $spread, $colour); | |
box-shadow:($x, $y, $spread, $colour); | |
} | |
h1{ | |
@include main_font; | |
small{ | |
@extend h1; | |
font-size:$font-size / 2; | |
} | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus { | |
outline: 0; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.slides, .flex-control-nav, .flex-direction-nav { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
} | |
@font-face { | |
font-family: 'flexslider-icon'; | |
src: url("fonts/flexslider-icon.eot"); | |
src: url("fonts/flexslider-icon.eot?#iefix") format("embedded-opentype"), url("fonts/flexslider-icon.woff") format("woff"), url("fonts/flexslider-icon.ttf") format("truetype"), url("fonts/flexslider-icon.svg#flexslider-icon") format("svg"); | |
font-weight: normal; | |
font-style: normal; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flexslider { | |
margin: 0; | |
padding: 0; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flexslider .slides > li { | |
display: none; | |
-webkit-backface-visibility: hidden; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flexslider .slides img { | |
width: 100%; | |
display: block; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-pauseplay span { | |
text-transform: capitalize; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.slides:after { | |
content: "\0020"; | |
display: block; | |
clear: both; | |
visibility: hidden; | |
line-height: 0; | |
height: 0; | |
} | |
/* line 7, ../sass/screen.scss */ | |
html[xmlns] .slides { | |
display: block; | |
} | |
/* line 7, ../sass/screen.scss */ | |
* html .slides { | |
height: 1%; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.no-js .slides > li:first-child { | |
display: block; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flexslider { | |
margin: 0 0 60px; | |
background: $black; | |
border: 0.25em solid $black; | |
position: relative; | |
@include border-radius(0px); | |
@include box-shadow(0px, 0px, 2px, $black); | |
zoom: 1; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-viewport { | |
max-height: 2000px; | |
-webkit-transition: all 1s ease; | |
-moz-transition: all 1s ease; | |
-o-transition: all 1s ease; | |
transition: all 1s ease; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.loading .flex-viewport { | |
max-height: 300px; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flexslider .slides { | |
zoom: 1; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.carousel li { | |
margin-right: 5px; | |
img{ | |
background:$white; | |
} | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-direction-nav { | |
*height: 0; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-direction-nav a { | |
text-decoration: none; | |
display: block; | |
width: 40px; | |
height: 40px; | |
margin: -20px 0 0; | |
position: absolute; | |
top: 50%; | |
z-index: 10; | |
overflow: hidden; | |
opacity: 0; | |
cursor: pointer; | |
color: rgba(0, 0, 0, 0.8); | |
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); | |
-webkit-transition: all .3s ease; | |
-moz-transition: all .3s ease; | |
transition: all .3s ease; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-direction-nav .flex-prev { | |
left: -50px; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-direction-nav .flex-next { | |
right: -50px; | |
text-align: right; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flexslider:hover .flex-prev { | |
opacity: .7; | |
left: 10px; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flexslider:hover .flex-next { | |
opacity: .7; | |
right: 10px; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { | |
opacity: 1; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-direction-nav .flex-disabled { | |
opacity: 0 !important; | |
filter: alpha(opacity=0); | |
cursor: default; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-direction-nav a:before { | |
font-family: "flexslider-icon"; | |
font-size: 40px; | |
display: inline-block; | |
content: '\f001'; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-direction-nav a.flex-next:before { | |
content: '\f002'; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-pauseplay a { | |
display: block; | |
width: 20px; | |
height: 20px; | |
position: absolute; | |
bottom: 5px; | |
left: 10px; | |
opacity: .8; | |
z-index: 10; | |
overflow: hidden; | |
cursor: pointer; | |
color: #000; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-pauseplay a:before { | |
font-family: "flexslider-icon"; | |
font-size: 20px; | |
display: inline-block; | |
content: '\f004'; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-pauseplay a:hover { | |
opacity: 1; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-pauseplay a.flex-play:before { | |
content: '\f003'; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-control-nav { | |
width: 100%; | |
position: absolute; | |
bottom: -40px; | |
text-align: center; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-control-nav li { | |
margin: 0 6px; | |
display: inline-block; | |
zoom: 1; | |
*display: inline; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-control-paging li a { | |
width: 11px; | |
height: 11px; | |
display: block; | |
background: #666; | |
background: rgba(0, 0, 0, 0.5); | |
cursor: pointer; | |
text-indent: -9999px; | |
-webkit-border-radius: 20px; | |
-moz-border-radius: 20px; | |
-o-border-radius: 20px; | |
border-radius: 20px; | |
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); | |
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); | |
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); | |
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-control-paging li a:hover { | |
background: #333; | |
background: rgba(0, 0, 0, 0.7); | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-control-paging li a.flex-active { | |
background: #000; | |
background: rgba(0, 0, 0, 0.9); | |
cursor: default; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-control-thumbs { | |
margin: 5px 0 0; | |
position: static; | |
overflow: hidden; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-control-thumbs li { | |
width: 25%; | |
float: left; | |
margin: 0; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-control-thumbs img { | |
width: 100%; | |
display: block; | |
opacity: .7; | |
cursor: pointer; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-control-thumbs img:hover { | |
opacity: 1; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-control-thumbs .flex-active { | |
opacity: 1; | |
cursor: default; | |
} | |
@media screen and (max-width: 860px) { | |
/* line 7, ../sass/screen.scss */ | |
.flex-direction-nav .flex-prev { | |
opacity: 1; | |
left: 10px; | |
} | |
/* line 7, ../sass/screen.scss */ | |
.flex-direction-nav .flex-next { | |
opacity: 1; | |
right: 10px; | |
} | |
} | |
body{ | |
max-width:960px; | |
margin:0.5em auto; | |
} |