CODE EXAMPLE FOR CSS

image gallery html css

<style>
:root {
  --angle: 1;
  --X: 90deg;
  --Y: 0deg;
  --Z: -100px;
  --max:40
  --sceneZ: 50em;
  --activeY: 0deg;
  --img: url("");

}
@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");
body {
  background: #0009;
  min-height: 100vh;
  overflow: hidden;
transition:scroll 2s;
}
.imageWrap{
  width:100%;
  height:50vh;
 
}
img{
// transform:scale(0.5);
  width:100%;
    height:50vh;
}
#numb{
  width:5rem;
}
h1 {
  position: relative;
  font-family: "Anton", sans-serif;
  color: white;
  text-align: center;
  text-justify: center;
}
label {
  color: yellow;
  padding: 3px;
  text-align: center;
}

.app {
  position: absolute;
  background: #0005;
  z-index:100;
  left: 0.5em;
  top: 0.5em;
  bottom: 0.5em;
  right: 0.5em;
  box-shadow: inset 0 0 25px 0 #0005;
  perspective: 800px;
  display: grid;
  place-content: center;
  transition:4s;

}
.scene {
 transition:3s; 
  display:grid;
  padding:0 2px 2px;
  gap:1rem;
  grid-auto-flow:column;
  grid-auto-columns:30%;
  transform-origin: center;
  transform-style: preserve-3d;
  border-top:0.5rem ridge #ccc;
  border-bottom:0.5rem ridge #ccc;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior:contain;

 
}

.innerscene {
display:grid;
  grid-template-rows:min-content;
  gap:0.5rem;
  padding:0.5rem;
  background:#0005;
  border-radius:5px;
  box-shadow:1px 1px 15px 0 #000;
  transition:5s;
  transform-style: preserve-3d;
  transform-origin: 0% 0%;

}
.innerscene > img{
    inline-size:100%;
  aspect-ratio:4/6;
  object-fit:cover;
}
.snaps-inline{
  scroll-snap-type:both mandatory
}
.snaps-inline > *{
  scroll-snap-align:start;
}
.scene::-webkit-scrollbar {
  width: 1em;
  height:5px;
  
}
 
.scene::-webkit-scrollbar-track {

  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
 
.scene::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
  padding:0;

}
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
  img{
    width:100%; 
  }
 
  .scene{
   
     gap:0.5rem;
   width:100%;
  height:50vh;
  grid-auto-columns:100%;
    
  }
  .innerscene{
    grid-template-rows:max-content;
grid-auto-flow:row;
  grid-auto-rows:100%;
    
  }
  #left{
  display:none;}
#right{
  display:none;
}
}
#left{
  left:0;
  top:50%;}
#right{
  right:0;
  top:50%;
}
.arrow:hover:active{
  color:#5f0;
  cursor: grab;
}
.arrow:hover{
  color:#fff;
 
}
.arrow{
   position:absolute;
   background:transparent;
  border:0;
  cursor:pointer;
  color:#0005;
  font-size:3rem;
  transform:translate(0,-50%);
}
</style>

<div class="app">
  <input id="numb" type="number" min="1" max="30" placeholder="default 10" value="5">
  <div id="scene" class="scene snaps-inline">

  </div>
  <button class="arrow" id="left" onclick=lmove()>
    &#5130;</button>
  <button class="arrow" id="right" onclick=rmove()>
    &#5125;</button>
</div>
<script>
var counts = 0;
const scl = document.getElementById("scene"),
  numb = document.getElementById("numb"),
  rmove = () => {
    scl.scrollLeft += 350;
  },
  lmove = () => {
    scl.scrollLeft -= 350;
  };

const images = [];
const innerScene = (count) => {
  count = numb.value || count;

  if (scl.children.length > count) {
    scl.innerHTML = "";
  }
  for (let c = 0; c < count; c++) {
    let dv = document.createElement("div");
    dv.classList.add("imagWrap");
    let img = document.createElement("img");
    dv.append(img);
    img.id = `img${images.length}`;
    img.src = `https://picsum.photos/seed/${counts * 10 + 400}/800/600`;
    if (images.length > numb.value) {
      images.splice(0, 1);
    }
    images.push(dv);
    counts++;
    scl.appendChild(dv);
  }
};
numb.addEventListener("change", innerScene);
innerScene();

</script>