Javascript won't put array values in CSS syntax

I'm trying to make a slide show using multiple background-images and using the background-position property to animate them. Here is the code:

HTML:

<div class="slide_holder" id="slide_holder"></div>


CSS:

.slide_holder
float: left;
width: 1440px;
height: 720px;
background-image: url("images/gc-h-s-01.jpg"), url("images/gc-h-s-02.jpg"), url("images/gc-h-s-03.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-position: 0px, 1440px, 2880px;
transition: 1s;



JS:

var imageIndex = 1;
var x;

var PosValues = ["0px, 1440px, 2880px", "-1440px, 0px, 1440px", "-2880px, -1440px, 0px"]

startSlides();

function startSlides()
x = setInterval(IncAndWrite, 1000);


function IncAndWrite()
var i;
document.getElementById("slide_holder").style.backgroundPosition = PosValues[imageIndex];
imageIndex++;
if (imageIndex > 2) imageIndex = 0;



The concept is that the background-position values for each background-image change every 1s keeping only one image in the visible frame.
The above mentioned code works just fine, but I do not want to write individual position values for different screen sizes (as my website is responsive). So I wrote the following code:
JS:

var imageIndex = 1;
var x;
var UnitRes = 1440;

var PosValues = [
UnitRes*0 + "px, " + UnitRes*1 + "px, " + UnitRes*2 + "px;",
UnitRes*(-1) + "px, " + UnitRes*0 + "px, " + UnitRes*1 + "px;",
UnitRes*(-2) + "px, " + UnitRes*(-1) + "px, " + UnitRes*0 + "px;"]

startSlides();

function startSlides()
x = setInterval(IncAndWrite, 1000);


function IncAndWrite()
var i;
document.getElementById("slide_holder").style.backgroundPosition = PosValues[imageIndex];
imageIndex++;
if (imageIndex > 2) imageIndex = 0;



The basic concept is that you put the width of the container in UnitRes and then the values get calculated. But this does not seem to work. The background-position values don't change at all.

What I thought was causing the problem:
In the second case of js code I'm putting a variable value inside an array which I thought is not being converted to a string type while inputing it in the CSS syntax.

What I tried doing:
I used typeof but it is showing the type as string
Then I tried using:

typeof

string

document.getElementById("slide_holder").style.backgroundPosition = PosValues[imageIndex].valueOf();


but still it's not working. I also used alert(PosValues[imageIndex]); to check if the values are ok and they are.

alert(PosValues[imageIndex]);

Please help me.

;

1 Answer
1

The problem was that in first time you have defined parameters without semicolon ; and in second example you have placed it what broke the script.

;

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.