3d carousel materialize

3d-carousel-materialize.markdown

3d carousel materialize

A Pen by Crianbluff on CodePen.

License.

index.html

<div class="carousel">
	<div class="carousel-item">
		<img src="https://images.pexels.com/photos/356378/pexels-photo-356378.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Dog" title="Dog">
		<h3>
			Someone Famous 1
		</h3>
	</div>
	
	<div class="carousel-item">
		<img src="https://images.pexels.com/photos/1485637/pexels-photo-1485637.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Dog" title="Dog">
		<h3>
			Someone Famous 2
		</h3>
	</div>
	
	<div class="carousel-item">
		<img src="https://images.pexels.com/photos/1254140/pexels-photo-1254140.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Dog" title="Dog">
		<h3>
			Someone Famous 3
		</h3>
	</div>
	
	<div class="carousel-item">
		<img src="https://images.pexels.com/photos/374898/pexels-photo-374898.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Dog" title="Dog">
		<h3>
			Someone Famous 4
		</h3>
	</div>
	
	<div class="carousel-item">
		<img src="https://images.pexels.com/photos/58997/pexels-photo-58997.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Dog" title="Dog">
		<h3>
			Someone Famous 5
		</h3>
	</div>
	
	<div class="carousel-item">
		<img src="https://images.pexels.com/photos/434090/pexels-photo-434090.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Dog" title="Dog">
		<h3>
			Someone Famous 6
		</h3>
	</div>
	
	<div class="carousel-item">
		<img src="https://images.pexels.com/photos/733416/pexels-photo-733416.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Dog" title="Dog">
		<h3>
			Someone Famous 7
		</h3>
	</div>
	
	<div class="carousel-item">
		<img src="https://images.pexels.com/photos/160846/french-bulldog-summer-smile-joy-160846.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Dog" title="Dog">
		<h3>
			Someone Famous 8
		</h3>
	</div>
	
	<div class="carousel-item">
		<img src="https://images.pexels.com/photos/551628/pexels-photo-551628.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Dog" title="Dog">
		<h3>
			Someone Famous 9
		</h3>
	</div>
</div>

script.js

$(document).ready(function() {
	$('.carousel').carousel();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

style.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*:focus {
  outline: 0;
}

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
	background-color: #000000;
}

.carousel {
	height: 700px;
	perspective: 600px;
	transform: translateY(-100px);
}

.carousel .carousel-item {
	cursor: grab;
	width: 400px;
}

.carousel .carousel-item:active {
	cursor: grabbing;
}

.carousel .carousel-item img {
	width: 100%;
}

.carousel .carousel-item h3 {
	background-color: #ffffff;
	color: #000000;
	font-size: 2em;
	font-weight: bold;
	margin: -5px 0 0;
	padding: 10px 5px;
	text-align: center;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />