const dots = document.getElementsByClassName("demo");
const _C = document.querySelector(".big_image"),
N = _C.children.length;
var slider_i = 0;
let x0 = null,
locked = false,
w;
function unify(e) {
return e.changedTouches ? e.changedTouches[0] : e;
}
function lock(e) {
x0 = unify(e).clientX;
_C.classList.toggle("smooth", !(locked = true));
}
function drag(e) {
e.preventDefault();
if (locked)
_C.style.setProperty("--tx", `${Math.round(unify(e).clientX - x0)}px`);
}
function move(e) {
if (locked) {
let dx = unify(e).clientX - x0,
s = Math.sign(dx),
f = +((s * dx) / w).toFixed(2);
// if not at left or right end and f is bigger .2
if ((slider_i > 0 || s < 0) && (slider_i < N - 1 || s > 0) && f > 0.1) {
dots[slider_i].classList.remove("img-highlight");
_C.style.setProperty("--i", (slider_i -= s));
dots[slider_i].classList.add("img-highlight");
f = 1 - f;
}
_C.style.setProperty("--tx", "0px");
_C.style.setProperty("--f", f);
_C.classList.toggle("smooth", !(locked = false));
x0 = null;
}
}
function showDivs(n) {
for (let i = 0; i < dots.length; i++) {
dots[i].classList.remove("img-highlight");
}
slider_i = slideIndex - 1;
_C.style.setProperty("--i", slider_i);
dots[slideIndex - 1].classList.add("img-highlight");
}
function size() {
w = window.innerWidth;
}
size();
_C.style.setProperty("--n", N);
addEventListener("resize", size, false);
_C.addEventListener("mousedown", lock, false);
_C.addEventListener("touchstart", lock, false);
_C.addEventListener("mousemove", drag, false);
_C.addEventListener("touchmove", drag, false);
_C.addEventListener("mouseup", move, false);
_C.addEventListener("touchend", move, false);
window.document.getElementsByClassName("demo")[0].classList.add("img-highlight");
function currentDiv(n)
{
showDivs(slideIndex = n);
}
#container {
width: 30em;
height: 25em;
overflow-x: hidden;
}
.big_image {
--n: 1;
display: grid;
grid-auto-flow: column;
align-items: center;
width: calc(var(--n) * 100%);
object-fit: contain;
height: 85%;
max-height: 100vh;
}
.big_image img {
width: 100%;
height: 100%;
user-select: none;
pointer-events: none;
transform: translate(calc(var(--tx, 0px) + var(--i, 0) * -100%));
}
.smooth {
transition: transform calc(var(--f, 1) * 0.5s)
cubic-bezier(1, 1.59, 0.61, 0.74);
}
.big_image > div {
object-fit: cover;
width: 100%;
max-height: 100%;
}
.preview-image {
position: relative;
z-index: 1;
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
.img-highlight {
-webkit-box-shadow: #FFF 0 -1px 4px, #ff0 0 -2px 5px, #ff8000 0 -10px 10px, 5px 5px 4px 5px rgba(0,0,0,0);
box-shadow: #FFF 0 -1px 4px, #ff0 0 0 5px, #ff8000 0 0 10px, 5px 5px 4px 5px rgba(0,0,0,0);
}
.w3-col{
float:left;
width: 11.4%;
height: 3em;
border: 0.1em solid #000;
margin: 0 0.34em;
line-height: calc(3em - 2px);
text-align: center;
}
<div id="container">
<div class="big_image" style="--n:7; --i:6;">
<div>
<img src="https://images-na.ssl-images-amazon.com/images/I/71YGKgs-kOL._SL1500_.jpg">
</div>
<div>
<img src="https://img.fotocommunity.com/testbild-05678122-8d2a-44e0-8e33-fcfe3f62a502.jpg?height=1080">
</div>
<div>
<img src="https://images-na.ssl-images-amazon.com/images/I/71MwoazXzSL._SL1500_.jpg">
</div>
<div>
<img src="https://www.naturparkmagazin.de/bild-des-tages/wp-content/uploads/sites/36/Sonnenuntergang-im-Moor-%E2%80%93-%C2%A9-VDNWerner-Bayerische-Rh%C3%B6n.jpg">
</div>
<div>
<img src="https://images-na.ssl-images-amazon.com/images/I/71d-OQ81DTL._SL1500_.jpg">
</div>
<div>
<img src="https://images-na.ssl-images-amazon.com/images/I/6179uLy6G9L._SL1500_.jpg">
</div>
<div>
<img src="https://images-na.ssl-images-amazon.com/images/I/61fEZPS7kKL._SL1500_.jpg">
</div>
</div>
<div class="w3-row-padding w3-section">
<div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(1)">
<img class="preview-image" src="https://images-na.ssl-images-amazon.com/images/I/71YGKgs-kOL._SL1500_.jpg">
</div>
<div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(2)">
<img class="preview-image" src="https://img.fotocommunity.com/testbild-05678122-8d2a-44e0-8e33-fcfe3f62a502.jpg?height=1080">
</div>
<div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(3)">
<img class="preview-image" src="https://images-na.ssl-images-amazon.com/images/I/71MwoazXzSL._SL1500_.jpg">
</div>
<div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(4)">
<img class="preview-image" src="https://www.naturparkmagazin.de/bild-des-tages/wp-content/uploads/sites/36/Sonnenuntergang-im-Moor-%E2%80%93-%C2%A9-VDNWerner-Bayerische-Rh%C3%B6n.jpg">
</div>
<div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(5)">
<img class="preview-image" src="https://images-na.ssl-images-amazon.com/images/I/71d-OQ81DTL._SL1500_.jpg">
</div>
<div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(6)">
<img class="preview-image" src="https://images-na.ssl-images-amazon.com/images/I/6179uLy6G9L._SL1500_.jpg">
</div>
<div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(7)">
<img class="preview-image" src="https://images-na.ssl-images-amazon.com/images/I/61fEZPS7kKL._SL1500_.jpg">
</div>
</div>
</div>