slideshow o galleria di immagini

[quiris!]

ho provato diverse gallerie ma non riesco nel mio intento quello che voglio e su questo genere MRcW1.jpg (550×322) (imgur.com) quello che mi chiedo come può essere strutturato il codice? qualcuno mi può dare una mano grazie.

[quiris!]

ho provato scomporre diversi codici e ha unirli ma il risultato è sempre stato una immagine per slide.

[carlomarangoni]

Non ho capito che genere di galleria vuoi!

[quiris!]

ciao la galleria che voglio creare è questa
<div class="center">
<div class="wrapper">
<div class="inner">
<div class="card">
<img src="https://colorlib.com/preview/theme/seogo/img/case_study/1.png">
<div class="content">
<h1>Product Design</h1>
<h3>UI/UX, Design</h3>
</div>
</div>
<div class="card">
<img src="https://colorlib.com/preview/theme/seogo/img/case_study/2.png">
<div class="content">
<h1>Custom Website</h1>
<h3>UI/UX, Design</h3>
</div>
</div>
<div class="card">
<img src="https://colorlib.com/preview/theme/seogo/img/case_study/3.png">
<div class="content">
<h1>Digital Marketing</h1>
<h3>UI/UX, Design</h3>
</div>
</div>
<div class="card">
<img src="https://colorlib.com/preview/theme/seogo/img/case_study/1.png">
<div class="content">
<h1>Digital Marketing</h1>
<h3>UI/UX, Design</h3>
</div>
</div>
<div class="card">
<img src="https://colorlib.com/preview/theme/seogo/img/case_study/2.png">
<div class="content">
<h1>Digital Marketing</h1>
<h3>UI/UX, Design</h3>
</div>
</div>
<div class="card">
<img src="https://colorlib.com/preview/theme/seogo/img/case_study/3.png">
<div class="content">
<h1>Digital Marketing</h1>
<h3>UI/UX, Design</h3>
</div>
</div>
<div class="card">
<img src="https://colorlib.com/preview/theme/seogo/img/case_study/1.png">
<div class="content">
<h1>Digital Marketing</h1>
<h3>UI/UX, Design</h3>
</div>
</div>
<div class="card">
<img src="https://colorlib.com/preview/theme/seogo/img/case_study/2.png">
<div class="content">
<h1>Digital Marketing</h1>
<h3>UI/UX, Design</h3>
</div>
</div>
<div class="card">
<img src="https://colorlib.com/preview/theme/seogo/img/case_study/3.png">
<div class="content">
<h1>Digital Marketing</h1>
<h3>UI/UX, Design</h3>
</div>
</div>
</div>
</div>

<div class="map">
<button class="active first"></button>
<button class="second"></button>
<button class="third"></button>
</div>
</div>

[quiris!]

ora metto lo style

html,
body {
height: 100%;
}


body {
background: #001d38;
font-family: "Poppins", sans-serif;
overflow: hidden;
}


.center {
-webkit-box-align: center;
align-items: center;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
height: 100%;
-webkit-box-pack: center;
justify-content: center;
}


.wrapper {
display: -webkit-box;
display: flex;
grid-gap: 1em;
overflow: hidden;
width: 55em;
}
.wrapper > .inner {
display: -webkit-box;
display: flex;
grid-gap: 1em;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}


.card {
border-radius: 0.5em;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
}
.card > img {
border-top-right-radius: inherit;
border-top-left-radius: inherit;
display: block;
width: 17.5em;
}
.card > .content {
background: #0a2640;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
padding: 1em;
text-align: center;
}
.card > .content > h1, .card > .content > h3 {
margin: 0.35em 0;
}
.card > .content > h1 {
color: #fff;
font-size: 1.25rem;
line-height: 1;
}
.card > .content > h3 {
color: #ccc;
font-size: 0.9rem;
font-weight: 300;
}


.map {
margin-top: 1em;
}
.map > button {
all: unset;
background: #11406c;
cursor: pointer;
margin: 0 0.125em;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 100%;
height: 1em;
width: 1em;
}
.map > button.active:after {
background: #001d38;
content: "";
left: 50%;
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
border-radius: 100%;
height: 0.5em;
width: 0.5em;
}

[quiris!]

ora metto javascripit

const buttonsWrapper = document.querySelector(".map");
const slides = document.querySelector(".inner");


buttonsWrapper.addEventListener("click", e => {
if (e.target.nodeName === "BUTTON") {
Array.from(buttonsWrapper.children).forEach(item =>
item.classList.remove("active")
);
if (e.target.classList.contains("first")) {
slides.style.transform = "translateX(-0%)";
e.target.classList.add("active");
} else if (e.target.classList.contains("second")) {
slides.style.transform = "translateX(-33.33333333333333%)";
e.target.classList.add("active");
} else if (e.target.classList.contains('third')){
slides.style.transform = 'translatex(-66.6666666667%)';
e.target.classList.add('active');
}
}
});

[quiris!]

se lo metto doppio sulla stessa pagina il secondo non gira le pagine come mai ho provato a cambiare anche i nomi delle class"" ma non succede nulla. dove sta il problema

[quiris!]

cosa devo modificare per farsi che funzionano tutte due

[SoloWiFi]

Non hai pensato di realizzartela da solo una galleria di questo tipo invece di tentare di raccapezzarti con quelle di terzi?

Mostri le prime 3 immagini e poi a seconda di come ti vuoi muovere fai sparire la prima e comparire la quarta o viceversa.
Credo che se ti applichi un minimo su un tuo progetto riuscirai a fare grandi cose oltre che a comprendere di più in programmazione.

[Roby140569]

Anni fa avevo usato Owl Carousel.

Penso che potrebbe fare al caso tuo.
https://owlcarousel2.github.io/OwlCa...esponsive.html