在JavaScript图像滑块上添加导航

Question

So I've been looking for an image slider for my website and I've found a decently simplistic example which I've used but I'm quite stuck on how to add a simple navigation to it.

All I would need is a button to go to the next and previous image.

The code I have :

    <script>
        function imageData(_imageSrc, _imageTitle){
            this.imageSrc   = _imageSrc;
            this.imageTitle = _imageTitle;
        }

        var imageSlider_counter = 0;
        var imageDataList = new Array();

        function Ready(){
            document.getElementById("ImageContainer").innerHTML = "<img id='imageSlider-image' src=''/>";
            document.getElementById("imageSlider-image").src = imageDataList[imageSlider_counter].imageSrc;
            setInterval(function(){
                imageSlider_counter = (imageSlider_counter + 1) % imageDataList.length;
                document.getElementById("imageSlider-image").src = imageDataList[imageSlider_counter].imageSrc;


            },6000);
        }
     </script>

Answer 1

Here's an image slider that's even more simple and has mostly everything built in: Orbit .

An example of how to set this up would be:

<div class="small-10 columns">
    <ul data-orbit>
        <li>
            <img src="filelocation1.jpg" alt="Slide 1">
            <div class="orbit-caption">
                Put text here if you want a caption for your images
            </div>
        </li>
        <li>
            <img src="filelocation2.jpg"  alt="Slide 2">    
        </li>
    </ul>
</div>

Repeat that format for each image. Now for functionality.

You must add these scripts:

<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation/foundation.js"></script>
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation/foundation.orbit.js"></script>

And you need to start the orbit as well:

<script>
    $(document).foundation({
    orbit: {
        animation: 'slide',
        timer_speed: 10000,
        pause_on_hover: true,
        resume_on_mouseout: true,
        animation_speed: 500,
        navigation_arrows: true,
        bullets: true,
        next_on_click: true
        }
    });
    $(function () { $(document).foundation(); });
    $('#example-orbit').foundation('orbit');
</script>

If you don't want to have a slideshow, but rather just a slider that the user iterates through, get rid of the animation, timer, etc. Hope this helps.