Insert Carousel slider in HYPERTEXT MARKUP LANGUAGE.pptx

Insert Carousel slider in HMTL

1. Insert Carousel slider using Javascript

2. Explanation let currentIndex = 0; This line declares a variable currentIndex and initializes it with a value of 0. It keeps track of the currently displayed slide (starting with the first slide, which has an index of 0).

3. function showSlide (index) { This defines a function named showSlide that takes a parameter index. This parameter represents the slide we want to display.

4. const slides = document.querySelectorAll ('.carousel-item'); This line selects all elements with the class carousel-item (which are the individual slides) and stores them in a constant slides. The method querySelectorAll returns a list (called a NodeList ) of all matching elements.

5. if (index >= slides.length ) { This condition checks if the passed index is greater than or equal to the total number of slides ( slides.length ). This happens when the user tries to go beyond the last slide.

6. currentIndex = 0; If the index is greater than or equal to the number of slides, the currentIndex is reset to 0. This effectively loops back to the first slide.

7. } else if (index < 0) { This condition checks if the passed index is less than 0. This happens when the user tries to navigate before the first slide.

8. currentIndex = slides.length - 1; If the index is less than 0, this sets currentIndex to the last slide ( slides.length - 1). This loops back to the last slide if the user navigates back past the first one.

9. } else { currentIndex = index; } If neither of the previous conditions are met (i.e., the index is valid and within bounds), the currentIndex is simply set to the passed index.

10. const carouselInner = document.querySelector ('.carousel-inner'); This line selects the carousel-inner element, which contains all the slides, and stores it in the variable carouselInner . This is the container that will be shifted left or right to display different slides.

11. const offset = - currentIndex * 100; This line calculates the offset that is needed to shift the slides horizontally to show the correct one. Each slide takes up 100% of the width, so multiplying currentIndex by 100 gives the amount to shift. The negative sign (-) ensures that the slides move left when advancing to the next one.

12. carouselInner.style.transform = \ translateX (${offset}%)`;` This applies the calculated offset as a transformation to the carousel-inner element. The translateX CSS function moves the container left or right by the specified percentage. For example, if offset is -200%, the container is shifted 200% to the left, showing the third slide.

13. function nextSlide () { This defines a function called nextSlide that will be called when the user clicks the "Next" button. It moves to the next slide.

14. showSlide ( currentIndex + 1); Inside nextSlide , the showSlide function is called with currentIndex + 1, which increases the currentIndex by 1 and moves to the next slide. If the current slide is the last one, this function will loop back to the first slide (due to the logic in showSlide ).

15. function prevSlide () { This defines another function called prevSlide that is called when the user clicks the "Previous" button. It moves to the previous slide.

16. showSlide ( currentIndex - 1); Inside prevSlide , the showSlide function is called with currentIndex - 1, which decreases the currentIndex by 1 and moves to the previous slide. If the current slide is the first one, it will loop back to the last slide.

17. END