Skip to content

Instantly share code, notes, and snippets.

@pbuzdin

pbuzdin/index.html

Created July 23, 2019 11:36
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 pbuzdin/533d82ed8fbcec8b92174b9f49b151fb to your computer and use it in GitHub Desktop.
Save pbuzdin/533d82ed8fbcec8b92174b9f49b151fb to your computer and use it in GitHub Desktop.
Download ZIP
regularElements swiper demo // source https://jsbin.com/loriyuz
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>regularElements swiper demo</title>
<script>this.Promise||document.write('<script src="https://unpkg.com/es6-promise@4.2.5/dist/es6-promise.auto.min.js"><\x2fscript>')</script>
<script>this.WeakMap||document.write('<script src="https://unpkg.com/@ungap/weakmap@0.1.4/min.js"><\x2fscript>')</script>
<script defer src="https://webreflection.github.io/regular-elements/min.js"></script>
<script defer src="https://idangero.us/swiper/dist/js/swiper.min.js"></script>
</head>
<body>
<div class="swiper-c">click me</div>
<script>
document.addEventListener('DOMContentLoaded', function (){
document.querySelector('.swiper-c').dataset.attr = '9980'
regularElements.define('.swiper-c', {
onconnected: function () {
console.log('swiper-c connected')
document.querySelector('.swiper-c').dataset.attr++;
document.querySelector('.swiper-c').insertAdjacentHTML('afterbegin', //beforeend
`
<link rel="stylesheet" href="https://idangero.us/swiper/dist/css/swiper.min.css">
<style>
body { padding: 10% }
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: lime;
display: flex;
justify-content: center;
align-items: center;
min-height: 200px;
}
</style>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">${document.querySelector('.swiper-c').dataset.attr}</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
`);
},
onattributechanged: function (event) {
var {attributeName, oldValue, newValue} = event;
console.log(attributeName, oldValue, newValue, 'хуй');
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment