Skip to content

Instantly share code, notes, and snippets.

@bleeckerj

bleeckerj/gist:e5421fb1ebcf9319695a406cad22f29f

Created July 2, 2024 18:05
Show Gist options
  • Save bleeckerj/e5421fb1ebcf9319695a406cad22f29f to your computer and use it in GitHub Desktop.
Save bleeckerj/e5421fb1ebcf9319695a406cad22f29f to your computer and use it in GitHub Desktop.
Download ZIP
swiper-test.html
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Swiper</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<link rel="stylesheet" href="./effect-material.min.css" />
<style>
/** Demo styles **/
html,
body {
padding: 0;
margin: 0;
position: relative;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
body {
background: #000;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
overflow: hidden;
}
/** Swiper styles **/
.swiper {
user-select: none;
box-sizing: border-box;
overflow: hidden;
width: 100%;
height: 100%;
padding: 16px 16px;
}
.swiper-slide {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
}
.swiper-slide-bg-image {
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
z-index: 0;
}
.swiper-slide-content {
width: 100%;
height: 100%;
display: flex;
position: relative;
z-index: 1;
box-sizing: border-box;
}
.swiper-slide-91ee {
border-radius: 32px;
--swiper-material-slide-border-radius: 32px;
}
.swiper-slide-bg-image-c61b {
object-fit: cover;
border-radius: inherit;
}
.swiper-slide-content-609f {
padding: 32px 32px;
flex-direction: column;
gap: 0px;
align-items: flex-start;
justify-content: flex-end;
}
.swiper-slide-text-bee6 {
color: rgba(255, 255, 255, 1);
text-align: left;
font-size: 48px;
line-height: 1.5;
font-weight: bold;
}
</style>
</head>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-91ee">
<div class="swiper-material-wrapper">
<div class="swiper-material-content">
<img
class="swiper-slide-bg-image swiper-slide-bg-image-c61b"
data-swiper-material-scale="1.25"
src="https://studio.swiperjs.com/demo-images/models/10.jpg"
/>
<div
class="swiper-slide-content swiper-material-animate-opacity swiper-slide-content-609f"
>
<div class="swiper-slide-text swiper-slide-text-bee6">
Sabrina
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-slide-91ee">
<div class="swiper-material-wrapper">
<div class="swiper-material-content">
<img
class="swiper-slide-bg-image swiper-slide-bg-image-c61b"
data-swiper-material-scale="1.25"
src="https://studio.swiperjs.com/demo-images/models/11.jpg"
/>
<div
class="swiper-slide-content swiper-material-animate-opacity swiper-slide-content-609f"
>
<div class="swiper-slide-text swiper-slide-text-bee6">Jane</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-slide-91ee">
<div class="swiper-material-wrapper">
<div class="swiper-material-content">
<img
class="swiper-slide-bg-image swiper-slide-bg-image-c61b"
data-swiper-material-scale="1.25"
src="https://studio.swiperjs.com/demo-images/models/12.jpg"
/>
<div
class="swiper-slide-content swiper-material-animate-opacity swiper-slide-content-609f"
>
<div class="swiper-slide-text swiper-slide-text-bee6">
Jessica
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-slide-91ee">
<div class="swiper-material-wrapper">
<div class="swiper-material-content">
<img
class="swiper-slide-bg-image swiper-slide-bg-image-c61b"
data-swiper-material-scale="1.25"
src="https://studio.swiperjs.com/demo-images/models/13.jpg"
/>
<div
class="swiper-slide-content swiper-material-animate-opacity swiper-slide-content-609f"
>
<div class="swiper-slide-text swiper-slide-text-bee6">Kate</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-slide-91ee">
<div class="swiper-material-wrapper">
<div class="swiper-material-content">
<img
class="swiper-slide-bg-image swiper-slide-bg-image-c61b"
data-swiper-material-scale="1.25"
src="https://studio.swiperjs.com/demo-images/models/14.jpg"
/>
<div
class="swiper-slide-content swiper-material-animate-opacity swiper-slide-content-609f"
>
<div class="swiper-slide-text swiper-slide-text-bee6">
Margo
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-slide-91ee">
<div class="swiper-material-wrapper">
<div class="swiper-material-content">
<img
class="swiper-slide-bg-image swiper-slide-bg-image-c61b"
data-swiper-material-scale="1.25"
src="https://studio.swiperjs.com/demo-images/models/15.jpg"
/>
<div
class="swiper-slide-content swiper-material-animate-opacity swiper-slide-content-609f"
>
<div class="swiper-slide-text swiper-slide-text-bee6">Mary</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-slide-91ee">
<div class="swiper-material-wrapper">
<div class="swiper-material-content">
<img
class="swiper-slide-bg-image swiper-slide-bg-image-c61b"
data-swiper-material-scale="1.25"
src="https://studio.swiperjs.com/demo-images/models/16.jpg"
/>
<div
class="swiper-slide-content swiper-material-animate-opacity swiper-slide-content-609f"
>
<div class="swiper-slide-text swiper-slide-text-bee6">
Helen
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-slide-91ee">
<div class="swiper-material-wrapper">
<div class="swiper-material-content">
<img
class="swiper-slide-bg-image swiper-slide-bg-image-c61b"
data-swiper-material-scale="1.25"
src="https://studio.swiperjs.com/demo-images/models/17.jpg"
/>
<div
class="swiper-slide-content swiper-material-animate-opacity swiper-slide-content-609f"
>
<div class="swiper-slide-text swiper-slide-text-bee6">
Nicole
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-slide-91ee">
<div class="swiper-material-wrapper">
<div class="swiper-material-content">
<img
class="swiper-slide-bg-image swiper-slide-bg-image-c61b"
data-swiper-material-scale="1.25"
src="https://studio.swiperjs.com/demo-images/models/18.jpg"
/>
<div
class="swiper-slide-content swiper-material-animate-opacity swiper-slide-content-609f"
>
<div class="swiper-slide-text swiper-slide-text-bee6">Lara</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-slide-91ee">
<div class="swiper-material-wrapper">
<div class="swiper-material-content">
<img
class="swiper-slide-bg-image swiper-slide-bg-image-c61b"
data-swiper-material-scale="1.25"
src="https://studio.swiperjs.com/demo-images/models/19.jpg"
/>
<div
class="swiper-slide-content swiper-material-animate-opacity swiper-slide-content-609f"
>
<div class="swiper-slide-text swiper-slide-text-bee6">Kate</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="../scripts/effect-material.min.js"></script>
<script>
var swiper = new Swiper(".swiper", {
modules: [EffectMaterial],
slidesPerView: 2,
spaceBetween: 16,
effect: "material",
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment