@revoloo/cypress6
Version:
Cypress.io end to end testing tool
81 lines (65 loc) • 2.25 kB
HTML
<html>
<head>
<style>
.slider {
position: absolute;
top: 200px;
left: 200px;
width: 400px;
height: 400px;
overflow: hidden;
white-space: nowrap;
}
.slider-offset {
display: block;
width: 100%;
height: 100%;
overflow: visible;
font-size: 0px;
transform: translateX(0);
transition: transform 1s;
}
.slider-content {
display: inline-block;
font-size: 14px;
width: 100%;
overflow: hidden;
}
.slider-content > input {
display: block;
width: 50%;
margin: auto;
}
</style>
<script>
window.changeSlide = function(num) {
var el = document.querySelector('.slider-offset');
el.style.transform = 'translateX(-' + (num * 100) + '%)';
}
</script>
</head>
<body>
<div class="slider">
<div class="slider-offset">
<div class="slider-content">
<input name="test1" type="text" placeholder="First slide" />
</div>
<div class="slider-content">
<input name="test2" type="text" placeholder="Second slide" />
</div>
<div class="slider-content">
<input name="test3" type="text" placeholder="Third slide" />
</div>
</div>
</div>
<button id="button-1" onclick="changeSlide(0)">Show first slide</button>
<button id="button-2" onclick="changeSlide(1)">Show second slide</button>
<button id="button-3" onclick="changeSlide(2)">Show third slide</button>
<!--
The element to test is nested in multiple parents, with different overflow rules in each elements.
The `.slider` element if the frame to see the data, so its overflow has to be hidden;
The `.slide-offset` element is meant to have the width of each slider so that we can then set `transform: translateX(slideNum * -100%)` to show the slide slideNum. Since the slides are its children, its overflow need to be visible.
Each `.slide-content` element is a slider container, since the content might get out of the slide but we don't want it to bleed in another slide, its overflow need to be hidden.
-->
</body>
</html>