I’m trying to make a carousel slide with images, I want it to be able to slide to the next and prev image on click, and I need to snap each image/slide to the center of the window. But each image has varying widths, how can I achieve this? Perhaps with gsap?
Currently the slides in this code snippet have the same width but I will be using images of varying widths in my actual project.
.scroll-container {
position: absolute;
overflow-y: hidden;
white-space: nowrap;
background: transparent;
height: 100vh;
width: 100vw;
margin-right: 0;
border: 4px solid pink;
display: flex;
}
.gridscroll {
display: flex;
height: 100%;
border: 2px solid yellow;
}
.project-sections {
height: 100%;
width: 600px;
background-color:green;
border: 2px solid blue;
}
#scroll-right {
position: fixed;
/* width: 49vw;
height: 94vh; */
width: 60px;
height: 60px;
right:0;
cursor: grab;
background-color: red;
}
#scroll-left {
position: fixed;
/* width: 49vw;
height: 94vh; */
width: 60px;
height: 60px;
left:0;
cursor: grab;
background-color: red;
}
<div class="scroll-container">
<div class="gridscroll">
<div class="project-sections">
<img src="" />
</div>
<div class="project-sections">
<img src="" />
</div>
<div class="project-sections">
<img src="" />
</div>
<div class="project-sections">
<img src="" />
</div>
<div class="project-sections">
<img src="" />
</div>
<div class="project-sections">
<img src="" />
</div>
<div class="project-sections">
<img src="" />
</div>
<div id="scroll-right"></div>
<div id="scroll-left"></div>
</div>
</div>