Get started with coverflow CDN
MIT licensed
Coverflow: library for 3D media browsing .
Tags:- coverflow
- cover
- album
- flow
- slider
- slide
Stable version
Copied!
How to start using coverflow CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with coverflow CDN - cdnhub.io</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<link rel="stylesheet" href="styles.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.cdnhub.io/coverflow/3.0.2/coverflow.min.js"></script>
</head>
<body>
<div id="coverflow" class="coverflow">
<div class="coverflow-item">
<img src="image1.jpg" alt="Image 1" />
<h3>Image 1</h3>
</div>
<div class="coverflow-item">
<img src="image2.jpg" alt="Image 2" />
<h3>Image 2</h3>
</div>
<div class="coverflow-item">
<img src="image3.jpg" alt="Image 3" />
<h3>Image 3</h3>
</div>
</div>
<script>
const coverflow = new Coverflow({
container: document.getElementById("coverflow"),
items: document.querySelectorAll(".coverflow-item"),
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
navigation: {
next: document.querySelector(".next"),
prev: document.querySelector(".prev")
},
metro: {
width: 5,
height: 5
},
pagination: {
el: document.querySelector(".pagination"),
hideOnSinglePage: false
}
});
document.querySelector(".next").addEventListener("click", () => {
coverflow.next();
});
document.querySelector(".prev").addEventListener("click", () => {
coverflow.prev();
});
</script>
<style>
.coverflow {
width: 100%;
height: 400px;
perspective: 1000px;
}
.coverflow-item {
width: 300px;
height: 400px;
background-color: rgba(255, 255, 255, 0.5);
text-align: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
transition: transform 0.5s;
transform-style: preserve-3d;
}
.coverflow-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.coverflow-item h3 {
margin: 0;
padding: 10px;
text-align: left;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.next,
.prev {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
border-radius: 50%;
cursor: pointer;
transform: translateY(-50%);
z-index: 1;
}
.next:hover,
.prev:hover {
background-color: rgba(255, 255, 255, 0.5);
color: #000;
}
.pagination {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.pagination li {
display: inline-block;
width: 10px;
height: 10px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
margin: 0 2px;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.2s;
}
.pagination li:hover {
opacity: 1;
}
.pagination li.active {
opacity: 1;
background-color: #000;
}
</style>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!