<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title>ELASTIC CONTENT SLIDER | par NGLESSON</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keyword" content="ELASTIC CONTENT SLIDER ">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
</head>
<body>
<div class="container">
<header class="clearfix">
<span></span>
<h1> Elastic Content Slider</h1>
</header>
<div class="main">
<div id="cbp-contentslider" class="cbp-contentslider">
<ul>
<li id="slide1">
<h3 class="icon-wolf">Wolf</h3>
<div>
<div class="cbp-content">
<p>Veggies sunt bona vobis, proinde vos postulo esse magis desert raisin bush tomato soko salsify garbanzo horseradish cabbage burdock.</p>
<p>Daikon artichoke gumbo azuki bean bok choy avocado winter purslane gram earthnut pea broccoli salsify squash plantain wattle seed wakame broccoli rabe bamboo shoot. Zucchini lotus root azuki bean epazote dulse pumpkin rutabaga spinach. Endive mung bean gumbo maize plantain rock melon.</p>
</div>
</div>
</li>
<li id="slide2">
<h3 class="icon-rabbit">Rabbit</h3>
<div>
<div class="cbp-content">
<p>Chicory collard greens tatsoi cress bamboo shoot broccoli rabe lotus root earthnut pea arugula okra welsh onion leek shallot courgette. Chard garlic fava bean pea sprouts gram spinach plantain tomatillo. Chicory garlic black-eyed pea gourd chickpea cucumber lotus root.</p>
<p>Daikon artichoke gumbo azuki bean bok choy avocado winter purslane gram earthnut pea broccoli salsify squash plantain wattle seed wakame broccoli rabe bamboo shoot. Zucchini lotus root azuki bean epazote dulse pumpkin rutabaga spinach. Endive mung bean gumbo maize plantain rock melon.</p>
</div>
</div>
</li>
<li id="slide3">
<h3 class="icon-aligator">Aligator</h3>
<div>
<div class="cbp-content">
<p>Tomato shallot broccoli rabe aubergine melon fava bean soybean sorrel. Tomatillo plantain wattle seed pea ricebean sorrel fennel welsh onion kakadu plum celery. Arugula radicchio garlic welsh onion kale celtuce tomato fava bean beet greens soybean burdock groundnut lentil broccoli rabe.</p>
</div>
</div>
</li>
<li id="slide4">
<h3 class="icon-turtle">Turtle</h3>
<div>
<div class="cbp-content">
<p>Yarrow bush tomato beetroot taro water chestnut komatsuna azuki bean. Parsnip artichoke water chestnut caulie carrot grape summer purslane brussels sprout fava bean tomatillo pea groundnut nori earthnut pea tigernut. Tigernut brussels sprout wakame tomatillo radicchio carrot maize swiss chard seakale melon grape broccoli pea sprouts kakadu plum plantain cauliflower. Gram salsify radicchio daikon courgette rock melon bunya nuts turnip greens. Cabbage black-eyed pea spinach asparagus plantain cress soybean spring onion salad artichoke pea garlic silver beet grape water spinach zucchini wakame summer purslane.</p>
</div>
</div>
</li>
<li id="slide5">
<h3 class="icon-platypus">Platypus</h3>
<div>
<div class="cbp-content">
<p>Potato watercress burdock spinach quandong jícama chard pea sprouts garlic celery turnip daikon kale lotus root sorrel coriander rock melon cabbage. Epazote salsify lentil rock melon eggplant cauliflower zucchini caulie catsear broccoli rabe pumpkin lettuce okra green bean squash seakale onion water chestnut. Sweet pepper peanut corn soko celery winter purslane.</p>
<p>Daikon artichoke gumbo azuki bean bok choy avocado winter purslane gram earthnut pea broccoli salsify squash plantain wattle seed wakame broccoli rabe bamboo shoot. Zucchini lotus root azuki bean epazote dulse pumpkin rutabaga spinach. Endive mung bean gumbo maize plantain rock melon.</p>
</div>
</div>
</li>
</ul>
<nav>
<a href="#slide1" class="icon-wolf"><span>Wolf</span></a>
<a href="#slide2" class="icon-rabbit"><span>Rabbit</span></a>
<a href="#slide3" class="icon-aligator"><span>Aligator</span></a>
<a href="#slide4" class="icon-turtle"><span>Turtle</span></a>
<a href="#slide5" class="icon-platypus"><span>Platypus</span></a>
</nav>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="script.js"></script>
<script>
$(function() {
/*
- how to call the plugin:
$( selector ).cbpContentSlider( [options] );
- options:
{
// default transition speed (ms)
speed : 500,
// default transition easing
easing : 'ease-in-out',
// current item's index
current : 0
}
- destroy:
$( selector ).cbpContentSlider( 'destroy' );
*/
$( '#cbp-contentslider' ).cbpContentSlider();
});
</script>
</body>
</html>
/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
font-family: 'fontawesome';
src:url('fonts/fontawesome.eot');
src:url('fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
url('fonts/fontawesome.svg#fontawesome') format('svg'),
url('fonts/fontawesome.woff') format('woff'),
url('fonts/fontawesome.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body, html { font-size: 100%; padding: 0; margin: 0;}
/* Reset */
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
body {
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #47a3da;
}
a {
color: #f0f0f0;
text-decoration: none;
}
a:hover {
color: #000;
}
.main,
.container > header {
width: 90%;
max-width: 70em;
margin: 0 auto;
padding: 0 1.875em 3.125em 1.875em;
}
.container > header {
padding: 2.875em 1.875em 1.875em;
}
.container > header h1 {
font-size: 2.125em;
line-height: 1.3;
margin: 0;
float: left;
font-weight: 400;
}
.container > header span {
display: block;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
padding: 0 0 0.6em 0.1em;
}
.container > header nav {
float: right;
}
.container > header nav a {
display: block;
float: left;
position: relative;
width: 2.5em;
height: 2.5em;
background: #fff;
border-radius: 50%;
color: transparent;
margin: 0 0.1em;
border: 4px solid #47a3da;
text-indent: -8000px;
}
.container > header nav a:after {
content: attr(data-info);
color: #47a3da;
position: absolute;
width: 600%;
top: 120%;
text-align: right;
right: 0;
opacity: 0;
pointer-events: none;
}
.container > header nav a:hover:after {
opacity: 1;
}
.container > header nav a:hover {
background: #47a3da;
}
.icon-drop:before,
.icon-arrow-left:before {
font-family: 'fontawesome';
position: absolute;
top: 0;
width: 100%;
height: 100%;
speak: none;
font-style: normal;
font-weight: normal;
line-height: 2;
text-align: center;
color: #47a3da;
-webkit-font-smoothing: antialiased;
text-indent: 8000px;
padding-left: 8px;
}
.container > header nav a:hover:before {
color: #fff;
}
.icon-drop:before {
content: "\e000";
}
.icon-arrow-left:before {
content: "\f060";
}
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.svg#icomoon') format('svg'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* Needed for a fluid height: */
html, body, .container, .main { height: 100%;}
/* main wrapper */
.cbp-contentslider {
width: 100%;
height: 70%;
margin: 1em auto;
position: relative;
border: 4px solid #47a3da
}
.cbp-contentslider > ul {
list-style: none;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
padding: 0;
margin: 0;
}
.cbp-contentslider > ul li {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 1em;
background: #fff;
}
/* Whithout JS, we use :target */
.cbp-contentslider > ul li:target {
z-index: 100;
}
.cbp-contentslider nav {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3.313em;
z-index: 1000;
border-top: 4px solid #47a3da;
overflow: hidden;
}
.cbp-contentslider nav a {
float: left;
display: block;
width: 20%;
height: 100%;
font-weight: 400;
letter-spacing: 0.1em;
overflow: hidden;
color: #47a3da;
background: #fff;
outline: none;
text-align: center;
line-height: 3;
position: relative;
padding-left: 3.125em;
text-transform: uppercase;
border-right: 4px solid #47a3da;
-webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.cbp-contentslider nav a span {
display: block;
}
.cbp-contentslider nav a:last-child {
border: none;
box-shadow: 1px 0 #47a3da; /* fills gap caused by rounding */
}
.cbp-contentslider nav a:hover {
background-color: #47a3da;
color: #fff;
}
.cbp-contentslider nav a.rc-active {
background-color: #47a3da;
color: #fff;
}
/* Iconfont for navigation and headings */
.cbp-contentslider [class^="icon-"]:before,
.cbp-contentslider [class*=" icon-"]:before {
font-family: 'icomoon';
font-style: normal;
text-align: center;
speak: none;
font-weight: normal;
line-height: 2.5;
font-size: 2em;
position: absolute;
left: 10%;
top: 50%;
margin: -1.250em 0 0 0;
height: 2.500em;
width: 2.500em;
color: rgba(0,0,0,0.1);
-webkit-font-smoothing: antialiased;
}
.cbp-contentslider .icon-wolf:before {
content: "\56";
}
.cbp-contentslider .icon-rabbit:before {
content: "\52";
}
.cbp-contentslider .icon-turtle:before {
content: "\54";
}
.cbp-contentslider .icon-platypus:before {
content: "\42";
}
.cbp-contentslider .icon-aligator:before {
content: "\41";
}
.cbp-contentslider [class^="icon-"].rc-active:before,
.cbp-contentslider [class*=" icon-"].rc-active:before,
.cbp-contentslider nav a:hover:before {
color: rgba(255,255,255,0.9);
}
.cbp-contentslider h3 {
font-size: 4em;
height: 2em;
line-height: 1.7;
font-weight: 300;
margin: 0 0 0.3em;
position: relative;
color: #47a3da;
text-transform: uppercase;
text-align: right;
letter-spacing: 0.3em;
padding: 0 0.2em 0 0;
border-bottom: 4px solid #47a3da;
}
.cbp-contentslider h3[class^="icon-"]:before,
.cbp-contentslider h3[class*=" icon-"]:before {
top: 0;
left: 0;
width: 2em;
line-height: 1;
height: 1.2em;
margin: 0;
color: #47a3da;
}
.cbp-contentslider li > div {
position: absolute;
top: 9em;
bottom: 3.313em;
width: 100%;
left: 0;
padding: 0 1em;
overflow-x: hidden;
overflow-y: auto;
}
.cbp-contentslider .cbp-content {
-webkit-column-rule: 1px dashed #47a3da;
-moz-column-rule: 1px dashed #47a3da;
column-rule: 1px dashed #47a3da;
-webkit-column-count: 2;
-moz-column-count: 2;
-o-column-count: 2;
column-count: 2;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
-o-column-gap: 1em;
column-gap: 1em;
vertical-align: top;
padding: 1em 0;
}
.cbp-contentslider p {
color: #47a3da;
padding: 0 0.5em 0.4em;
margin: 0;
font-size: 1.2em;
font-weight: 300;
text-align: justify;
line-height: 1.6;
}
/* Media queries */
@media screen and (max-width: 70em) {
.cbp-contentslider p {
font-size: 100%;
}
}
@media screen and (max-width: 67.75em) {
.cbp-contentslider { font-size: 85%; }
.cbp-contentslider nav a[class^="icon-"]:before,
.cbp-contentslider nav a[class*=" icon-"]:before {
left: 50%;
margin-left: -1.250em;
}
.cbp-contentslider nav a span {
display: none;
}
}
@media screen and (max-width: 43em) {
.cbp-contentslider h3 {
font-size: 2em;
}
.cbp-contentslider .cbp-content {
-webkit-column-count: 1;
-moz-column-count: 1;
-o-column-count: 1;
column-count: 1;
}
.cbp-contentslider li > div {
top: 5em;
}
}
@media screen and (max-width: 25em) {
.cbp-contentslider nav a { padding: 0;}
.cbp-contentslider h3[class^="icon-"]:before,
.cbp-contentslider h3[class*=" icon-"]:before { display: none;}
}
/******
Plugin cbpContentSlider (jquery.cbpContentSlider.min.js)
******/
(function(c,b,e){var d=b.Modernizr;c.CBPContentSlider=function(f,g){this.$el=c(g);this._init(f)};c.CBPContentSlider.defaults={speed:500,easing:"ease-in-out",current:0};c.CBPContentSlider.prototype={_init:function(f){this.options=c.extend(true,{},c.CBPContentSlider.defaults,f);this.$items=this.$el.find("ul > li").hide();this.$tabs=this.$el.find("nav > a");var h=this.$tabs.length;this.$tabs.css("width",100/h+"%");this.current=this.options.current;this.old=0;this.isAnimating=false;this.support=d.csstransitions;var g={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd",msTransition:"MSTransitionEnd",transition:"transitionend"};this.transEndEventName=g[d.prefixed("transition")]+".cbpContentSlider";if(this.support){this.$items.css("transition","left "+this.options.speed+"ms "+this.options.easing)}this._updateTabs();this.$items.eq(this.current).show();this._initEvents()},_updateTabs:function(){this.$tabs.eq(this.old).removeClass("rc-active").end().eq(this.current).addClass("rc-active")},_initEvents:function(){var f=this;this.$tabs.on("click.cbpContentSlider",function(k){var g=c(this).index();if(g!==f.current&&!f.isAnimating){f.isAnimating=true;var l=g>f.current?"right":"left",j=f.$items.eq(f.current),h=f.$items.eq(g);f.old=f.current;f.current=g;if(f.support){h.css("left",l==="right"?"100%":"-100%")}h.show();var i=function(){j.off(f.transEndEventName).hide();f.isAnimating=false};if(f.support){j.on(f.transEndEventName,i)}else{i.call()}if(f.support){setTimeout(function(){j.css("left",l==="right"?"-100%":"100%");h.css("left","0%")},25)}f._updateTabs()}k.preventDefault()})},destroy:function(){if(this.support){this.$items.css("transition","none")}this.$items.css("left",0).show();this.$tabs.off(".cbpContentSlider").removeClass("rc-active")}};var a=function(f){if(b.console){b.console.error(f)}};c.fn.cbpContentSlider=function(g){if(typeof g==="string"){var f=Array.prototype.slice.call(arguments,1);this.each(function(){var h=c.data(this,"cbpContentSlider");if(!h){a("cannot call methods on cbpContentSlider prior to initialization; attempted to call method '"+g+"'");return}if(!c.isFunction(h[g])||g.charAt(0)==="_"){a("no such method '"+g+"' for cbpContentSlider instance");return}h[g].apply(h,f)})}else{this.each(function(){var h=c.data(this,"cbpContentSlider");if(h){h._init()}else{h=c.data(this,"cbpContentSlider",new c.CBPContentSlider(g,this))}})}return this}})(jQuery,window);
