Simple Synchronised Carousel

index.pug

- var i = 1
- var j = 1
- var limit = 10

.section.section-project

	h2.section__title Project Carousel
	small.section__subtitle 
		| A simple Synchronised carousel by 
		a(href="https://codepen.io/ariona") @ariona_rian
		br
		| using Slick Carousel
	
	.project-carousel
	
		.project-strip
		
			while i++ < limit
				.project
					img(src="http://unsplash.it/578/360/?image=" + i * 13 + "&blur", alt="")


		.project-screen
		
			.project-detail
			
				while j++ < limit
					.project
						img(src="http://unsplash.it/578/361/?image=" + j * 13 , alt="")
				
			.screen-frame

script.js

$(".project-detail").slick({
	slidesToShow: 1,
	arrows: false,
	asNavFor: '.project-strip',
	autoplay: true,
	autoplaySpeed: 3000
});

$(".project-strip").slick({
	slidesToShow: 5,
	slidesToScroll: 1,
	arrows: false,
	asNavFor: '.project-detail',
	dots: false,
	infinite: true,
	centerMode: true,
	focusOnSelect: true
});

scripts

<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>

simple-synchronised-carousel.markdown

Simple Synchronised Carousel

This is the simple Synchronised carousel between carousel on the back and a carousel within the macbook screen.

The library used here is the awesome slick carousel http://kenwheeler.github.io/slick/ , You should check it out :)

CSS3 filter is used to blur the underlaying carousel.

Image Credit:

• All project images by http://unsplash.it
• Macbook Mockup by http://facebook.design

A Pen by cley tornero mondalgo on CodePen.

License.

style.scss

@import 'https://fonts.googleapis.com/css?family=Josefin+Slab';
body{
	font-family: "Josefin Slab";
	height: 100vh;
	background-color: #222;
}

.section-project{
	padding: 50px 0;
	position: relative;
	background-color: #222;
}

.section__title, .section__subtitle{
	text-align: center;
	color: white;
	display: block;
}
.section__title{
	font-size: 3em;
	line-height: 1;
	margin: 0 0 20px;
	
}
.section__subtitle{
	font-size: 1.2em;
	line-height: 1.5;
	opacity: .5;
	
	a{
		color: inherit
	}
}


// Project carousel outer wrapper
.project-carousel{
	position: relative;
	padding: 50px 0;
}

// Project Strip 
.project-strip{
	margin: 150px 0 150px;
	filter: blur(10px);
	
	.project{
		cursor: pointer;
	}
	img{
		max-width: 100%;
		width: 100%;
		height: auto;

	}
}

// Project Details
.project-screen{
	width: 768px;
	height: 451px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	
	// Project Detail Carousel    
	.project-detail{
		position: absolute;
		left: 0;
		right: 0;
		width: 578px;
		height: 361px;
		margin: 32px auto 0;
		z-index: 1;
		background-color: #333;
	}
	
	// Macbook frame 	
	.screen-frame{
		content:" ";
		width: 768px;
		height: 451px;
		position: absolute;
		background-image: url("https://dl.dropboxusercontent.com/u/26808427/cdn/experiments/training/macbook-frame.png");
		background-repeat: no-repeat;
	}
	
	// Initial style to stack the slides 	
	.project{
		margin-right: -100%;
		float: left;
		cursor: move;
	}
	
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" />