Javascript slideshow array issue

Question

I'm pretty new to Javascript and im trying to build slideshow myself now. Only im stuck right now after i build the array where i get my pictures from. It only shows a white screen.

My Javascript

 $(function () {
var counter = 0;
var defaultSettings = {
    "sliderContainer": "#slider"
    , "pauseWithMouse": true
    , "sliderSpeed": 2000
    , "transitionSpeed": 1500
};

function cycleImages() {
    counter++;
if (counter >= images.Length) {
    counter = 0;
}
document.getElementById("#slider img").src = MyImages[counter];

var images = $('#slider img')
    , now = images.filter(':visible')
    , next = now.next().length ? now.next() : images.first()
    , speed = 1500; //Transition speed
now.fadeOut(speed);
next.fadeIn(speed);
 }

var theInterval; // Slide speed

var = images = [];
// if myImages exists then
images = myImages;
if (images.length > 0) {
    $(defaultSettings.sliderContainer).append('<img id="sliderImage" src="' + images[0] + '" />');
    startSlide();
}
var startSlide = function () {
    setInterval(cycleImages, defaultSettings.sliderSpeed); // Set interval
};
var stopSlide = function () {
    if (defaultSettings.pauseWithMouse) {
        clearInterval(theInterval);
    }
};
startSlide();
$('#slider img').on('mouseover', function () {
    stopSlide();
});
$('#slider img').on('mouseout', function () {
    startSlide();
});
});

And my HTML:

  <!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Javascript Slider</title>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <link rel="stylesheet" href="css/style.css">
  <script src="js/slideshow.js"></script>

<script>
  var myImages = ["slide1.jpg", "slide2.jpg", "bg/slide3.jpg"];
 </script>
</head>

<body>
<main>
<div id="slider">
</div>
</main> 
</body>
</html>

Ok not sure if this is your problem, but you declare var images = $('#slider img') and then like 4 lines later you declare var images = [] Did you mean to do that? And pointing out the obvious here, change var = images = [] to var images = [] — jdmdevdotnet
– jdmdevdotnet, Commented Jun 8, 2017 at 14:19
Yes thanks it shows the first image now, but still not sliding — Romeo Immanuel
– Romeo Immanuel, Commented Jun 8, 2017 at 14:21
You did not address the biggest point I made. You have 2 var's named images. I assume you need different names for them, why would you override it 4 lines after if otherwise? Can you fix your code to not have the same variable name? That might be your biggest problem, I see numerous ones though. — jdmdevdotnet
– jdmdevdotnet, Commented Jun 8, 2017 at 14:22

Kirill Staruhin · Accepted Answer · 2017-06-08 14:19:54Z

1

you have strange declaration of variable here

var = images = [];

also you need to move this part

var startSlide = function() {
  setInterval(cycleImages, defaultSettings.sliderSpeed); // Set interval
};

before

if (images.length > 0) {
  $(defaultSettings.sliderContainer).append('<img id="sliderImage" src="' + images[0] + '" />');
  startSlide();
}

you have wrong variable name (MyImages) here

document.getElementById("#slider img").src = MyImages[counter];

first try to debug your code

edited Jun 8, 2017 at 14:19

answered Jun 8, 2017 at 14:08

Kirill Staruhin

1376 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jdmdevdotnet Over a year ago

It's impossible for any of us to answer seeing as the OP has 2 var named images and we have no idea which var hes trying to reference at any part of the code. There's numerous problems with the code, and before he fixes the 2 images problem we cant possibly have any idea how to fix the rest of the code.

Kirill Staruhin Over a year ago

first var images is inside function i think it will not conflict i think author can press F12 and see what errors he receives in console

Romeo Immanuel Over a year ago

Console says: Uncaught TypeError: Cannot read property 'Length' of undefined at CycleImages

Kirill Staruhin Over a year ago

in function cycleImages you are getting length of variable images which is not yet defined. if you are planning to receive it then you need to change your function like this function cycleImages(images) { then you need to change this one var startSlide = function (images) { setInterval(cycleImages(images), defaultSettings.sliderSpeed); // Set interval }; as well also calls of start slide, but after this i see that you will face other error, so try to work on code bugfixing. you need to spend some time

Collectives™ on Stack Overflow

Javascript slideshow array issue

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related