Skip to content

Instantly share code, notes, and snippets.

@smagch
Last active March 4, 2019 09: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 smagch/7e099622063dc233e9d6fb8972f7c4c8 to your computer and use it in GitHub Desktop.
Save smagch/7e099622063dc233e9d6fb8972f7c4c8 to your computer and use it in GitHub Desktop.
Simple slider: should fix margin
<html>
<style>
html, body {
margin: 0;
}
.hidden-wrapper {
overflow: hidden;
}
.wrapper {
width: 100%;
transition: transform 0.3s;
overflow: visible;
}
.h-box {
overflow: visible;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
transition: transform 0.3s;
}
.h-box > * {
min-width: calc((100% - 16px * 5) / 6);
margin-right: 16px;
}
.h-box > *:last-child {
margin-right: 0;
}
.rect {
height: 200px;
border: 2px solid black;
box-sizing: border-box;
}
</style>
<body>
<div class="hidden-wrapper">
<div class="wrapper">
<div class="h-box">
<div class="rect" style="background-color: tomato;">1.start</div>
<div class="rect" style="background-color: skyblue;">2</div>
<div class="rect" style="background-color: gray;">3</div>
<div class="rect" style="background-color: yellowgreen;">4</div>
<div class="rect" style="background-color: rosybrown;">5</div>
<div class="rect" style="background-color: hotpink;">6</div>
<div class="rect" style="background-color: orange;">7</div>
<div class="rect" style="background-color: slateblue;">8</div>
<div class="rect" style="background-color: tomato;">9</div>
<div class="rect" style="background-color: skyblue;">10</div>
<div class="rect" style="background-color: gray;">11</div>
<div class="rect" style="background-color: yellowgreen;">12</div>
<div class="rect" style="background-color: rosybrown;">13</div>
<div class="rect" style="background-color: hotpink;">14</div>
<div class="rect" style="background-color: orange;">15</div>
<div class="rect" style="background-color: slateblue;">16 end</div>
</div>
</div>
</div>
<button type="button" id="prevButton">prev</button>
<button type="button" id="nextButton">next</button>
<script>
const hbox = document.querySelector('.h-box');
const wrapper = document.querySelector('.wrapper');
const columnCount = 6;
const max = document.querySelectorAll('.rect').length - columnCount;
const marginTick = 16 / columnCount;
const slideTick = 100 / columnCount;
document.querySelector('#prevButton').addEventListener('click', onPrev);
document.querySelector('#nextButton').addEventListener('click', onNext);
let i = 0;
function onPrev () {
console.log('prev');
if (i > 0) {
i--;
}
update();
}
function onNext () {
console.log('next');
if (i < max) {
i++;
}
update();
}
console.log('max: ', max);
function update () {
hbox.style.transform = `translate3d(-${ i * slideTick}%, 0px, 0px)`;
wrapper.style.transform = `translate3d(-${i * marginTick}px, 0px, 0px)`;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment