I developed an imageslider that shows some of the top and most beautiful hotels in the world. In the code, I created a div element with an id of slider and add twenty (20) img elements with the source of twenty (20) different images. I then used JavaScript to hide all the images except for the one at the current index, and then used NEXT & PREV Buttons to call the slide function and added an icon using Font Awesome. Then, I use CSS to position the buttons on the right and left sides of the slider and style it with a background color, border, padding, and cursor. I also positioned the slider relatively to make sure the button is positioned inside it. I also set a background color for the slider using CSS. I added an event listener to the button to call the slide function when clicked. I set the height of the #slider element to 100vh, which means it will take up the full height of the viewport. I then use CSS to set the width and height of the img elements to 100%, which will make them fill the entire #slider element. I also use the object-fit and object-position properties to control how the images are displayed inside the img elements. The object-fit property set to cover will make sure that the entire image is visible and fills the img element without distortion. The object-position property set to center will make sure that the center of the image is always visible. Finally, I also added some CSS to remove the default margins and padding from the body element.
Enjoy your view!