Skip to content

Instantly share code, notes, and snippets.

@jrson83
Forked from Akifcan/index.html
Created September 28, 2022 11:43
Show Gist options
  • Save jrson83/cf64bd4e3fb0b000df78f4e0e7e95285 to your computer and use it in GitHub Desktop.
Save jrson83/cf64bd4e3fb0b000df78f4e0e7e95285 to your computer and use it in GitHub Desktop.
carousel
<style>
.slider {
border-radius: 0.5rem;
margin: 1rem;
min-height: 15rem;
background: linear-gradient(
to right,
#314755,
#26a0da
); /* Default Background */
box-shadow: 8px 7px 10px rgba(0, 0, 0, 0.5);
display: flex;
overflow-x: scroll; /* We should able scroll on x coordinates */
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch; /* For mobile */
-ms-overflow-style: none; /* For hide scrollbar */
scrollbar-width: none; /* For hide scrollbar */
}
.slider .slide-item {
cursor: grabbing;
scroll-snap-align: start;
flex-shrink: 0; /* We don't want to fit divs to parent element. So we'll use flex-shrink: 0 */
background-color: red;
width: 100%;
display: grid;
place-items: center;
font-size: 5rem;
}
.slide-item:nth-of-type(1) {
background: linear-gradient(
to right,
#000000,
#e74c3c
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.slide-item:nth-of-type(2) {
background: linear-gradient(
to right,
#485563,
#29323c
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.slide-item:nth-of-type(3) {
background: linear-gradient(
to right,
#556270,
#ff6b6b
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
</style>
<a href="#slide1">1</a>
<a href="#slide2">2</a>
<a href="#slide3">3</a>
<div class="slider" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">
<div draggable="true" class="slide-item" id="slide1">
😥
</div>
<div draggable="true" class="slide-item" id="slide2">
🤔
</div>
<div draggable="true" class="slide-item" id="slide3">
🥺
</div>
</div>
<div class="links"></div>
<script>
const slider = document.querySelector('.slider')
const sliderTotal = document.querySelectorAll('.slide-item').length
document.querySelectorAll('.slide-item').forEach((item, index) => {
const a = document.createElement('a')
a.href = '#' + item.id
a.textContent = index
document.querySelector('.links').appendChild(a)
})
let slideIndex = 1
setInterval(() => {
slideIndex++
if (slideIndex > sliderTotal) {
slideIndex = 1
}
window.location.href = `#slide${slideIndex}`
}, 5000)
function dragover_handler(ev) {
ev.preventDefault();
}
function drop_handler(ev) {
ev.preventDefault();
}
slider.addEventListener('dragstart', e => {
const sliderWidth = e.target.clientWidth / 2
const clickPosition = e.clientX
e.dataTransfer.setDragImage(new Image(), 0, 0)
console.log(sliderWidth);
console.log(clickPosition);
if (clickPosition > sliderWidth) {
slideIndex++
if (slideIndex > sliderTotal) {
slideIndex = 1
}
} else {
if (slideIndex == 0) {
slideIndex = sliderTotal
} else {
slideIndex--
}
}
console.log(slideIndex);
window.location.href = `#slide${slideIndex}`
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment