3D iPhone Carousel For Materialize Framework
File Size: | 42.7 KB |
---|---|
Views Total: | 2613 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.