Duplicating Image slider-Javascript

[cambam1023]

Can someone tell me what I would need to change in my code (javascript) if I wanted to duplicate this slider with different images on the same page?

HTML

<div class="sketch-wrapper">
<i id="left" class="fa-solid fa-angle-left"></i>
<div class="sketch-carousel">
<img src="Images/image-1.jpg" alt="Hourglass Drawing" draggable="false">
<img src="Images/image-2.jpg" alt="Girl Drawing" draggable="false">
<img src="Images/image-3.jpg" alt="Baboon/Goriila Drawing" draggable="false">
<img src="Images/image-4.jpg" alt="Aries Merrit Drawing" draggable="false">
<img src="Images/image-5.jpg" alt="Dog Drawings" draggable="false">
<img src="Images/image-6.jpg" alt="Mom and Son Drawing" draggable="false">
<img src="Images/image-7.jpg" alt="Meditation Drawing" draggable="false">
<img src="Images/image-8.jpg" alt="Enchantress Drawing" draggable="false">
<img src="Images/image-9.jpg" alt="Muscular Man Drawing" draggable="false">
</div>
<i id="right" class="fa-solid fa-angle-right"></i>
</div>

CSS

.sketch-wrapper{

max-width: 1200px;

position: relative;

justify-content: center;

padding-top: 80px;

}

.sketch-wrapper i{

top: 55%;

color: #FFFFFF;

font-size: 1.7rem;

text-align: center;

position: absolute;

line-height: 46px;

height: 45px;

width: 45px;

background: #4C4C4C;

border-radius: 50%;

transform: translateY(-50%);

}

.sketch-wrapper i:hover{

background: #7C7C7C;

}

.sketch-wrapper i:first-child{

left: 5px;

display: none;

}

.sketch-wrapper i:last-child{

right: 5px;

}

.sketch-wrapper .sketch-carousel{

font-size: 0px;

cursor: pointer;

overflow: hidden;

white-space: nowrap;

scroll-behavior: smooth;

}

.sketch-carousel.dragging{

cursor: grab;

scroll-behavior: auto;

}

.sketch-carousel.dragging img{

pointer-events: none;

}

.sketch-carousel img{

height: 490px;

margin-left: 14px;

object-fit: cover;

width: calc(100% / 3);

}

.sketch-carousel img:first-child{

margin-left: 0px;

}

Javascript

const carousel = document.querySelector(".sketch-carousel"),
firstImg = carousel.querySelectorAll("img")[0],
arrowIcons = document.querySelectorAll(".sketch-wrapper i");
let isDragStart = false, isDragging = false, prevPageX, prevScrollLeft, positionDiff;
const showHideIcons = () => {
// showing and hiding prev/next icon according to carousel scroll left value
let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
arrowIcons[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "block";
}
arrowIcons.forEach(icon => {
icon.addEventListener("click", () => {
let firstImgWidth = firstImg.clientWidth + 14; // getting first img width & adding 14 margin value
// if clicked icon is left, reduce width value from the carousel scroll left else add to it
carousel.scrollLeft += icon.id == "left" ? -firstImgWidth : firstImgWidth;
setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
});
});
const autoSlide = () => {
// if there is no image left to scroll then return from here
if(carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;
positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
let firstImgWidth = firstImg.clientWidth + 14;
// getting difference value that needs to add or reduce from carousel left to take middle img center
let valDifference = firstImgWidth - positionDiff;
if(carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right
return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
}
// if user is scrolling to the left
carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
}
const dragStart = (e) => {
// updatating global variables value on mouse down event
isDragStart = true;
prevPageX = e.pageX || e.touches[0].pageX;
prevScrollLeft = carousel.scrollLeft;
}
const dragging = (e) => {
// scrolling images/carousel to left according to mouse pointer
if(!isDragStart) return;
e.preventDefault();
isDragging = true;
carousel.classList.add("dragging");
positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
carousel.scrollLeft = prevScrollLeft - positionDiff;
showHideIcons();
}
const dragStop = () => {
isDragStart = false;
carousel.classList.remove("dragging");
if(!isDragging) return;
isDragging = false;
autoSlide();
}
carousel.addEventListener("mousedown", dragStart);
carousel.addEventListener("touchstart", dragStart);
document.addEventListener("mousemove", dragging);
carousel.addEventListener("touchmove", dragging);
document.addEventListener("mouseup", dragStop);
carousel.addEventListener("touchend", dragStop);

[L e n a]

You give the answer in the object of your request... So, all you have to do is duplicate the existing code. 
However, you will have to just differentiate each HTML instance.

<div class="sketch-carousel" data-carousel-id="1">

Then, in order to adapt the JavaScript code, you need to mutualize the mechanism within a JavaScript function that would be common, but would identify each carousel through its identifier...

function initializeCarousel(carouselElement) {
  const carousel = carouselElement.querySelector(".sketch-carousel");
  const carouselId = carousel.getAttribute("data-carousel-id");
  const leftButton = carouselElement.querySelector(".fa-angle-left");
  const rightButton = carouselElement.querySelector(".fa-angle-right");
  // all the previous code
}

So you can add as many carousels as you like, and call the function from each one of them....

const carouselElements = document.querySelectorAll(".sketch-wrapper");
carouselElements.forEach((carouselElement) => {
  initializeCarousel(carouselElement);
});

To simplify the task of generating test images in within the HTML, you can use Emmet (included in DW, for example) that way instead of entering one by one your IMG, SRC, ALT... etc. for each images, you can just enter i.e :

(img[src="https://picsum.photos/640/480?random=$"][alt=""][draggable="false"])*27

 and then press the TAB key.

In order not to clutter up this thread with code, I've taken the liberty of placing the whole thing online.

You'll find your original scripts at https://demo.puce-et-media.com/cambam/

and the adapted ones at https://demo.puce-et-media.com/cambam/index-2.html

Note that in the adapted part, I had to add a style to the images that have their heights hard-coded in your original CSS

[Nancy OShea]

Not an Adobe Dreamweaver question. 

You should consult Sketch-Carousel documentation.

A Google search reveals these URLs:

• https://support.animaapp.com/en/articles/3516977-how-to-create-a-carousel-or-slide-photo-gallery-in-...
• https://www.sketch.com/blog/instagram-carousel-templates/
• https://www.sketchappsources.com/free-source/2828-perfect-carousel-grid-sketch-freebie-resource.html

Hope that helps.