Si es posible, estoy tratando de crear algo como lo siguiente usando solo HTML, CSS y Javascript. Sé que el carrusel a continuación se creó en React, pero no lo estoy usando ni estoy familiarizado con él. Este carrusel se extiende por toda la pantalla, pero parece que las imágenes solo ocupan el 65-75 % del ancho (resaltado en azul) y el resto es una caja negra que nunca cambia, incluso cuando las imágenes sí lo hacen. Hay palabras que también superponen el cuadro negro y la imagen. La imagen también tiene un degradado en el lado izquierdo para que el cuadro negro se desvanezca agradablemente en la imagen.

Actualmente estoy usando un guión de presentación de diapositivas/carrusel de W3Schools ( https://www.w3schools.com/howto/howto_js_slideshow.asp ). Tampoco tengo bootstrap con este proyecto, aunque puedo agregarlo si es necesario. Intenté dividir mi contenedor en columnas para que un lado pudiera ser 40 % negro y el otro 60 % pudiera ser la presentación de diapositivas, pero eso no funcionó.

Lo siento, todavía soy bastante nuevo en todo esto. ¿Alguien tiene sugerencias sobre cómo agregar un carrusel como este sin React (y preferiblemente con arranque)?