3D iPhone Carousel For Materialize Framework

A touch-friendly 3D carousel based on Materialize Framework that showcases the current image in a realistic iPhone screen and allows the visitor to switch between image by clicking/tapping/swiping the siblings.

How to use it:

1. Load the latest Materialize Framework from CDN.

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

2. Insert images to the 3D iPhone carousel.

<div class="carousel">
  <div class="carousel-item">
    <img src="1.jpg">
  </div>
  <div class="carousel-item">
      <img src="2.jpg">
  </div>
  <div class="carousel-item">
      <img src="3.jpg">
  </div>
  <div class="carousel-item">
      <img src="4.jpg">
  </div>
  <div class="carousel-item">
      <img src="5.jpg">
  </div>
  <img src="iphoneX.png" class="mobile">
</div>

3. The necessary additional CSS styles for the 3D iPhone carousel.

.carousel {
  position: relative;
  height: 600px;
  margin-top: 150px;
  perspective: 1500px;
}

.carousel .carousel-item {
  width: 250px;
}

.carousel .carousel-item img {
  height: 300px;
  max-width: 170px;
  transform: translateX(1px) translateY(-90px);
}

.mobile {
  width: 257px;
  height: 349px;
  position: absolute;
  top: 40%;
  left: 49%;
  transform: translate(-50%, -50%);
  z-index: 1000,
}

4. Initialize the 3D iPhone carousel with jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>

$('.carousel').carousel({
  // options here
});

5. Or via Vanilla JavaScript.

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.carousel', {
      // options here
  });
  var instances = M.Carousel.init(elems);
});

6. Config the 3D iPhone carousel with the following options. For more settings and methods, check out the Materialize Carousel component.

{
  // Transition duration in milliseconds.
  duration: 200,

  // Perspective zoom. If 0, all items are the same size.
  dist: -100,  

  // Set the spacing of the center item.
  shift: 0, 

  // Set the padding between non center items.
  padding: 0, 

  // Set the number of visible items.
  numVisible: 5, 

  // Make the carousel a full width slider
  fullWidth: false, 

  // Set to true to show indicators.
  indicators: false, 

  // Don't wrap around and cycle through items.
  noWrap: false, 

  // Callback for when a new slide is cycled to.
  onCycleTo: null  
}

---

This awesome jQuery plugin is developed by jcrommar. For more Advanced Usages, please check the demo page or visit the official website.