Working exemple center mode

In this example below you will see how to do a Working exemple center mode with some HTML / CSS and Javascript

exploring the plug in and breakpoint behaviour

Thumbnail
This awesome code was written by liodub, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright liodub ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Working exemple center mode</title>
  
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto'>
<link rel='stylesheet prefetch' href='https://dl.dropboxusercontent.com/u/4298141/slick-1.5.0/slick/slick.css'>
<link rel='stylesheet prefetch' href='https://kenwheeler.github.io/slick/slick/slick-theme.css'>
<link rel='stylesheet prefetch' href='https://kenwheeler.github.io/slick/css/prism.css'>
<link rel='stylesheet prefetch' href='https://kenwheeler.github.io/slick/css/style.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section id="features" class="blue">
    				<h2>Center Mode</h2>
				<div class="slider center">
					<div><h3>banner 1</h3></div>
					<div><h3>banner 2</h3></div>
					<div><h3>banner 3</h3></div>
					<div><h3>banner 4</h3></div>
				</div>
  <script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='http://code.jquery.com/jquery-migrate-1.2.1.min.js'></script>
<script src='https://dl.dropboxusercontent.com/u/4298141/slick-1.5.0/slick/slick.min.js'></script>
<script src='https://cdn.foundation5.zurb.com/foundation.js'></script>
<script src='http://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=kenwheelergithubio'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/liodub/working-exemple-center-mode-xGpWBx */
body {
	background-image: url(https://dl.dropboxusercontent.com/u/4298141/thumnails_720x743/bkg_tile.png);
	background-repeat: repeat;
  color:white
  
}



#disqus_thread{margin-top:20px;}
*{-moz-box-sizing:border-box;box-sizing:border-box;}
.blue{background:#3498db;color:#fff;}
.blue h3{background:#fff;color:#3498db;font-size:24px;line-height:100px;margin:10px;padding:2%;position:relative;text-align:center;}
.variable-width .slick-slide p { background: #fff; height: 100px; color:#3498db; margin: 5px; line-height: 100px; }
.button{background:#3498db;color:#fff;display:block;font-size:16px;margin:20px auto;padding:20px;text-align:center;text-decoration:none;width:48%;}
.buttons{padding:0 20px 20px; margin-bottom: 10px;}
.buttons .button{background:#FFF;color:#3498db;float:left;margin:5px;}
.center .slick-center h3{-moz-transform:scale(1.08);-ms-transform:scale(1.08);-o-transform:scale(1.08);-webkit-transform:scale(1.08);color:#e67e22;opacity:1;transform:scale(1.08);}
.center h3{opacity:0.8;transition:all 300ms ease;}
.content{margin:auto;padding:0px;width:600px;}
.content:after,.buttons::after{clear:both;content:"";display:table;}
.destroy{font-weight:400;margin-top:40px;}
.features{display:block;list-style-type:none;margin-top:30px;padding:0;text-align:center;}
.features li{margin:20px 0;}
.filter .button{background:#FFF;color:#3498db; margin-bottom: 40px;}
.fixed-header{background:#FFF;box-shadow:2px 0 5px rgba(0,0,0,0.5);display:none;padding:10px;position:fixed;top:0;width:100%;z-index:10000;}
.fixed-header .header-content{margin:auto;width:600px;}
.fixed-header .subheading{display:none;}
.fixed-header h1.title{float:left;font-size:24px;margin:0;}
.fixed-header ul.nav{float:right;margin:0;padding:5px;}
.fixed-header ul.nav li{margin:0 0 0 10px;}
.header{padding:20px 0;}
.margin-40{margin-bottom:40px;}
.more,.button.first{margin-top:40px;}
.red{background:#e74c3c;color:#fff;}
.slick-slide .image{padding:0px;}
.slick-slide img{border:0px solid #FFF;display:block;width:100%;}
.slick-slide img.slick-loading{border:0 }
.slick-slider{margin:0px 0px 0px;}
.subheading{color:#555;font-size:12px;font-style:italic;font-weight:400;margin:10px auto;text-align:center;}
.white{background:#fff;color:#3498db;}
.white pre,.white hr{background:#3498db !important;}
a{color:#3498db;}
body,html{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;background:#fff; font-family: Roboto,Arial,sans-serif; height:100%;line-height:1;margin:0;padding:0;text-rendering:optimizeLegibility;width:100%;}
code{color:#000; overflow-x: scroll;}
h1{color:#3498db;font-family:Roboto;font-size:72px;font-weight:400;line-height:1.2;margin:0 auto 10px;text-align:center;}
h1.title{font-size:96px;}
h2{font-family:Roboto;font-size:36px;margin:20px auto;text-align:center;}
h4{font-family:Roboto;font-size:28px;margin:20px auto;text-align:center;}
hr{background:#fff;border:0;height:1px;margin:40px 0;}
p{font-size:16px;font-weight:700;line-height:1.5;margin-bottom:40px;text-align:center;}
p.note{font-size: 12px;}
p.cdn{font-size: 14px;}
p.guff{font-size:16px;}
pre{background:#fff;margin:0 10px 20px;padding:10px;}
section{width:100%; position: relative;}
table{font-size:14px;line-height:18px;margin:0px auto 0px; display: block;}
tr { width: 100%; border-right: none; border-bottom: 1px solid #fff; margin: 0px 0px 20px; padding: 0px 0px 20px; background: transparent; float: left; }
thead { display: none; }
td { border: 0; padding: 10px 0px;}
td,tbody { display: block; width: 100% !important;}
table.settings td:nth-of-type(1), table.methods td:nth-of-type(1){font-weight: 700; font-size: 16px; line-height: 18px;}
table.settings td:nth-of-type(2):before{content: 'Type: '; font-weight: 700;}
table.settings td:nth-of-type(3):before{content: 'Default: '; font-weight: 700;}
table.methods td:nth-of-type(2):before{content: 'Arguments: '; font-weight: 700;}
ul.nav{margin-bottom:0;padding-left:0;text-align:center;}
ul.nav li{display:inline-block;list-style-type:none;margin:0 20px;}
ul.nav li a{font-size:14px;text-decoration:none;}
#carbonads { max-width: 320px; width: 100%; color: white; background: white; padding: 20px 20px 20px; margin: 0px auto 40px; text-align: center; position: relative; top: 40px; }
#carbonads a { display: inline-block; margin-bottom: 0px; font-size: 10px; line-height: 1.5; }
#carbonads .carbon-img { margin-bottom: 10px; }
@media (max-width: 420px) {
ul.nav li a{display:block;font-size:14px;}
}
@media (max-width: 768px) {
.blue h3{font-size:18px;}
.button{margin:0 auto 20px;width:auto;}
.button.first{margin-top:40px;}
.buttons{padding:0 0 20px;}
.buttons .button{float:left;font-size:12px;margin:1%;width:48%;}
.center{margin-left:-40px;margin-right:-40px;}
.center .slick-center h3{-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);-webkit-transform:scale(1);color:#e67e22;opacity:1;transform:scale(1);}
.center h3{-moz-transform:scale(0.95);-ms-transform:scale(0.95);-o-transform:scale(0.95);-webkit-transform:scale(0.95);opacity:0.8;transform:scale(0.95);transition:all 300ms ease;}
.content{margin:auto;padding:0px 0px;width:auto;}
.fixed-header .header-content{width:auto;}
pre{font-size:12px; overflow-x: scroll;}
table{font-size:14px;line-height:18px;margin:0px auto 0px; display: block; float: left;}
tr { width: 100%; border-right: none; border-bottom: 1px solid #fff; margin: 0px 0px 20px; padding: 0px 0px 20px; background: transparent; float: left; }
thead { display: none; }
td { border: 0; padding: 10px 0px;}
td,tbody { display: block; width: 100% !important;}
table.settings td:nth-of-type(1), table.methods td:nth-of-type(1){font-weight: 700; font-size: 16px; line-height: 18px;}
table.settings td:nth-of-type(2):before{content: 'Type: '; font-weight: 700;}
table.settings td:nth-of-type(3):before{content: 'Default: '; font-weight: 700;}
table.methods td:nth-of-type(2):before{content: 'Arguments: '; font-weight: 700;}
}

/*Downloaded from https://www.codeseek.co/liodub/working-exemple-center-mode-xGpWBx */
$('.center').slick({
  centerMode: true,
  centerPadding: '12%',
  arrows: true,
  slidesToShow: 1,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: true,
        centerMode: true,
        centerPadding: '12%',
        slidesToShow: 1,
        dots: true
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: true,
        centerMode: true,
        centerPadding: '12%',
        slidesToShow: 1,
        dots: true
        
      }
    }
  ]
});

Comments