<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"><!-- [et_pb_line_break_holder] --><script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script><!-- [et_pb_line_break_holder] --><script src="//code.jquery.com/jquery-1.11.1.min.js"></script><!-- [et_pb_line_break_holder] --><!------ Include the above in your HEAD tag ----------><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!DOCTYPE html><html class=''><!-- [et_pb_line_break_holder] --><head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ariona/pen/KrRogZ?depth=everything&limit=all&order=popularity&page=67&q=image&show_forks=false" /><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'><!-- [et_pb_line_break_holder] --><style class="cp-pen-styles">@import "https://fonts.googleapis.com/css?family=Josefin+Slab";<!-- [et_pb_line_break_holder] -->body {<!-- [et_pb_line_break_holder] --> font-family: "Josefin Slab";<!-- [et_pb_line_break_holder] --> height: 100vh;<!-- [et_pb_line_break_holder] --> background-color: transparent;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.section-project {<!-- [et_pb_line_break_holder] --> padding: 50px 0;<!-- [et_pb_line_break_holder] --> position: relative;<!-- [et_pb_line_break_holder] --> background-color: transparent;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.section__title, .section__subtitle {<!-- [et_pb_line_break_holder] --> text-align: center;<!-- [et_pb_line_break_holder] --> color: white;<!-- [et_pb_line_break_holder] --> display: block;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.section__title {<!-- [et_pb_line_break_holder] --> font-size: 3em;<!-- [et_pb_line_break_holder] --> line-height: 1;<!-- [et_pb_line_break_holder] --> margin: 0 0 20px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.section__subtitle {<!-- [et_pb_line_break_holder] --> font-size: 1.2em;<!-- [et_pb_line_break_holder] --> line-height: 1.5;<!-- [et_pb_line_break_holder] --> opacity: .5;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.section__subtitle a {<!-- [et_pb_line_break_holder] --> color: inherit;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.project-carousel {<!-- [et_pb_line_break_holder] --> position: relative;<!-- [et_pb_line_break_holder] --> padding: 50px 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.project-strip {<!-- [et_pb_line_break_holder] --> margin: 150px 0 150px;<!-- [et_pb_line_break_holder] --> -webkit-filter: blur(10px);<!-- [et_pb_line_break_holder] --> filter: blur(10px);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.project-strip .project {<!-- [et_pb_line_break_holder] --> cursor: pointer;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.project-strip img {<!-- [et_pb_line_break_holder] --> max-width: 100%;<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> height: auto;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.project-screen {<!-- [et_pb_line_break_holder] --> width: 768px;<!-- [et_pb_line_break_holder] --> height: 451px;<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> left: 0;<!-- [et_pb_line_break_holder] --> right: 0;<!-- [et_pb_line_break_holder] --> top: 0;<!-- [et_pb_line_break_holder] --> bottom: 0;<!-- [et_pb_line_break_holder] --> margin: auto;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.project-screen .project-detail {<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> left: 0;<!-- [et_pb_line_break_holder] --> right: 0;<!-- [et_pb_line_break_holder] --> width: 578px;<!-- [et_pb_line_break_holder] --> height: 361px;<!-- [et_pb_line_break_holder] --> margin: 32px auto 0;<!-- [et_pb_line_break_holder] --> z-index: 1;<!-- [et_pb_line_break_holder] --> background-color: transparent;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.project-screen .screen-frame {<!-- [et_pb_line_break_holder] --> content: " ";<!-- [et_pb_line_break_holder] --> width: 768px;<!-- [et_pb_line_break_holder] --> height: 451px;<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> background-image: url("");<!-- [et_pb_line_break_holder] --> background-repeat: no-repeat;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.project-screen .project {<!-- [et_pb_line_break_holder] --> margin-right: -100%;<!-- [et_pb_line_break_holder] --> float: left;<!-- [et_pb_line_break_holder] --> cursor: move;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></style></head><body><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><div class="section section-project"><!-- [et_pb_line_break_holder] --> <h2 class="section__title">Project Carousel</h2><small class="section__subtitle"><!-- [et_pb_line_break_holder] --> A simple Synchronised carousel by <a href="https://codepen.io/ariona">@ariona_rian</a><br/>using Slick Carousel</small><!-- [et_pb_line_break_holder] --> <div class="project-carousel"><!-- [et_pb_line_break_holder] --> <div class="project-strip"><!-- [et_pb_line_break_holder] --> <div class="project"><img src="https://unsplash.it/578/360/?image=65&blur" alt=""/></div><!-- [et_pb_line_break_holder] --> <div class="project"><img src="https://unsplash.it/578/360/?image=78&blur" alt=""/></div><!-- [et_pb_line_break_holder] --> <div class="project"><img src="https://unsplash.it/578/360/?image=91&blur" alt=""/></div><!-- [et_pb_line_break_holder] --> <div class="project"><img src="https://unsplash.it/578/360/?image=104&blur" alt=""/></div><!-- [et_pb_line_break_holder] --> <div class="project"><img src="https://unsplash.it/578/360/?image=117&blur" alt=""/></div><!-- [et_pb_line_break_holder] --> <div class="project"><img src="https://unsplash.it/578/360/?image=130&blur" alt=""/></div><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> <div class="project-screen"><!-- [et_pb_line_break_holder] --> <div class="project-detail"><!-- [et_pb_line_break_holder] --> <div class="project"><img src="https://www.simera.mu/wp-content/uploads/2018/02/testimonial-1.png" alt=""/></div><!-- [et_pb_line_break_holder] --> <div class="project"><img src="https://www.simera.mu/wp-content/uploads/2018/02/testimonial-2.png" alt=""/></div><!-- [et_pb_line_break_holder] --> <div class="project"><img src="https://www.simera.mu/wp-content/uploads/2018/02/testimonial-3.png" alt=""/></div><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> <div class="screen-frame"></div><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --></div><!-- [et_pb_line_break_holder] --><script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js'></script><!-- [et_pb_line_break_holder] --><script >$(".project-detail").slick({<!-- [et_pb_line_break_holder] --> slidesToShow: 1,<!-- [et_pb_line_break_holder] --> arrows: false,<!-- [et_pb_line_break_holder] --> asNavFor: '.project-strip',<!-- [et_pb_line_break_holder] --> autoplay: true,<!-- [et_pb_line_break_holder] --> autoplaySpeed: 3000<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->$(".project-strip").slick({<!-- [et_pb_line_break_holder] --> slidesToShow: 5,<!-- [et_pb_line_break_holder] --> slidesToScroll: 1,<!-- [et_pb_line_break_holder] --> arrows: false,<!-- [et_pb_line_break_holder] --> asNavFor: '.project-detail',<!-- [et_pb_line_break_holder] --> dots: false,<!-- [et_pb_line_break_holder] --> infinite: true,<!-- [et_pb_line_break_holder] --> centerMode: true,<!-- [et_pb_line_break_holder] --> focusOnSelect: true<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] -->//# sourceURL=pen.js<!-- [et_pb_line_break_holder] --></script><!-- [et_pb_line_break_holder] --></body></html>
