I'm looking for a way to implement an interactive auto slideshow in JavaScript that allows users to manually

Question

I'm looking for a way to implement an interactive auto slideshow in JavaScript that allows users to manually

Having spent a lot of time studying auto slideshows, I'm facing an issue where clicking on the bullet to show the next image results in the image disappearing suddenly.

Initially, I thought the problem was with using addEventListener events, so I switched to using the "click" event in jQuery, but the outcome remained the same.

At this point, I'm quite stuck and would really appreciate some advice from professionals or web developers. Please help me figure out what to do next!

var toggleMenu = $(document).ready(function () {
    // code block goes here...
});

// slideshow script goes here...

@keyframes fadeIn { 
    0% { opacity: 0; }
    100% { opacity: 1; } 
}

/* CSS styles for slideshow */
.slideshow {
    animation: fadeIn 1s ease-in-out;
}

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>

    <div class="slideshow">
        <p>Slideshow content here...</p>
    </div>

    <script src="jquery.js"></script>
    <script src="scripts.js"></script>

</body>
</html>

Link to another helpful resource

javascript html css

Answer 1

Answer №1

Receiving the incorrect value of i, trigger an alert to display i's current value:

function bulletSlide() {
    for (var i = 0; i < bulletImages.length; i++) {
        $(bulletImages).click(function () {
            alert(i); // i = 3
            hideImages();
            slideImages[i].style.display = 'block';
            index = i;
        });
    }
}

The corrected version is as follows:

function bulletSlide() {
  $(bulletImages).click(function () {
    hideImages();
    slideImages[$(this).index()].style.display = 'block';
    index = $(this).index();
  });
}

Vanilla JS variation:

function bulletSlide() {
        [].forEach.call(bulletImages, function(bimg,i,a) {
        bimg.addEventListener('click', function () {
            hideImages();
            slideImages[i].style.display = 'block';
            index = i;
        });
    });
}

Answer 2

Receiving the incorrect value of i, trigger an alert to display i's current value:

function bulletSlide() {
    for (var i = 0; i < bulletImages.length; i++) {
        $(bulletImages).click(function () {
            alert(i); // i = 3
            hideImages();
            slideImages[i].style.display = 'block';
            index = i;
        });
    }
}

The corrected version is as follows:

function bulletSlide() {
  $(bulletImages).click(function () {
    hideImages();
    slideImages[$(this).index()].style.display = 'block';
    index = $(this).index();
  });
}

Vanilla JS variation:

function bulletSlide() {
        [].forEach.call(bulletImages, function(bimg,i,a) {
        bimg.addEventListener('click', function () {
            hideImages();
            slideImages[i].style.display = 'block';
            index = i;
        });
    });
}

I'm looking for a way to implement an interactive auto slideshow in JavaScript that allows users to manually

Answer №1

Similar questions

Discovering the method for accessing a variable within jQuery from a regular JavaScript function

Tips for deactivating dates in the jquery datepicker that correspond to entries in a MySQL database

Utilize the HTTP path to designate the currently active tab

Struggling with adding icons to the home screen in a Create React App?

Encasing the Angular 2 component template in a <div> tag

Tips on sending references from child to parent components in ReactJS

How to Show Firestore Query Results in a React Native App

What could be causing my function to not successfully retrieve elements based on their text content?

Error in GLSL file: "Module parsing error: Unexpected symbol"

Utilize ramda.js to pair an identifier key with values from a nested array of objects

Angular: The Ultimate Guide to Reloading a Specific Section of HTML (Form/Div/Table)

jquery is in motion while svg paths are at a standstill, waiting to

Is there a way to retrieve the Angular-Redux store in a child module?

When combining stores, what sets Mobx.inject apart from Mobx.observer?

CSS styles may not be consistently displayed or may vanish after being initially implemented

Enhancing the default functionality of React.FC within Next.js

Pause Next.js pages temporarily during the build process

Tips for incorporating "are you sure you want to delete" into Reactjs

Exploring CSS3 animations: customizing animations for individual elements based on scroll movements

Toggle element visibility upon clicking