Skip to content

Instantly share code, notes, and snippets.

@pbrocks

pbrocks/swiper-js-sample

Created May 2, 2022 20:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pbrocks/5483e059222edcb3556f15e3cb74b27a to your computer and use it in GitHub Desktop.
Save pbrocks/5483e059222edcb3556f15e3cb74b27a to your computer and use it in GitHub Desktop.
Download ZIP
Sample Swiper with minimal CSS
Raw
swiper-js-sample
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>SwiperJS - PBrocks - Sample</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.css"
/>
<style>
h1 {
text-align: center;
}
.swiper-container {
margin: 4rem;
border: 1px dashed salmon;
}
.swiper-wrapper {
padding: 2rem 2px;
}
.swiper-slide {
display: grid;
grid-template-columns: 1fr 1fr;
}
.swiper-slide div {
margin: 0 2rem;
padding: 4rem;
min-height: 25vh;
border: 1px dotted;
}
</style>
</head>
<body>
<h1>SwiperJS - PBrocks - Sample</h1>
<div class="swiper-container">
<!-- swiper slides -->
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-text">
<h2>SIMPLE SWIPER</h2>
<p>swiper-text</p>
</div>
<div
class="swiper-image"
style="
background-image: url(https://picsum.photos/900/600?random=24);
"
></div>
</div>
<!-- !swiper-slide -->
<div class="swiper-slide">
<div class="swiper-text">
<h2>HELLO WORLD</h2>
<p>swiper-text</p>
</div>
<div
class="swiper-image"
style="
background-image: url(https://picsum.photos/900/600?random=53);
"
></div>
</div>
<!-- !swiper-slide -->
<div class="swiper-slide">
<div class="swiper-text">
<h2>HELLO WORLD</h2>
<p>swiper-text</p>
</div>
<div
class="swiper-image"
style="
background-image: url(https://picsum.photos/900/600?random=43);
"
></div>
<!-- !swiper-slide -->
</div>
</div>
<!-- !swiper-wrapper -->
<!-- next / prev arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- !next / prev arrows -->
<!-- pagination dots -->
<div class="swiper-pagination"></div>
<!-- !pagination dots -->
</div>
<!-- !swiper-container -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.js"></script>
<script>
var Swipes = new Swiper(".swiper-container", {
loop: true,
autoplay: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
},
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment