Good day. First off, I am quite the noob when it comes to Javascript so, I appreciate any assistance you might be able to afford. My issue shouldn't be a difficult fix. I am simply trying to align my slideshow in the center of my webpage. You will see on my test page HERE, that is aligned left. I'm not sure where to begin with this or which part of the script to configure this. Again, I would appreciate assistance. Below is the script I am using:
var ultimateshow = new Array()
ultimateshow[0] = ['https://i.imgur.com/dF7w0Lc.png', 'https://www.alphatournamentcompany.com/', '_new']
ultimateshow[1] = ['https://i.imgur.com/OzBBtKk.jpg', 'https://weekendhockey.com/upcoming-tournaments/', '_new']
ultimateshow[2] = ['https://i.imgur.com/iZketaT.png', 'https://onehockey.com/our-events', '_new']
ultimateshow[3] = ['https://i.imgur.com/GJdRG2Z.jpg', 'https://www.lakeeffecthockey.com/', '_new']
ultimateshow[4] = ['https://i.imgur.com/SH0YSb0.jpg', 'https://grinderhockey.com/', '_new']
ultimateshow[5] = ['https://i.imgur.com/QvhdlZt.png', 'https://powersk8r.com/', '_new']
ultimateshow[6] = ['https://i.imgur.com/cU6VcpL.png', 'https://www.nickelcityhockey.com/', '_new']
ultimateshow[7] = ['https://i.imgur.com/ZIC8ELG.jpg?1', 'https://www.black-biscuit.com/', '_new']
ultimateshow[8] = ['https://i.imgur.com/Yjh80fq.jpg?1', 'https://www.ministicks.com/', '_new']
ultimateshow[9] = ['https://i.imgur.com/BoCHofu.png', 'https://allblackhockeysticks.com/', '_new']
ultimateshow[10] = ['https://i.imgur.com/9GrkCjQ.jpg', 'https://stinkylockers.com/', '_new']
ultimateshow[11] = ['https://i.imgur.com/rTsRxsI.jpg', 'https://justhockeyjerseys.com/', '_new']
ultimateshow[12] = ['https://i.imgur.com/J7kQnIJ.jpg', 'https://www.chehockey.com/', '_new']
ultimateshow[13] = ['https://i.imgur.com/oC17NS7.png', 'https://niagaratournaments.com/', '_new']
ultimateshow[14] = ['https://i.imgur.com/Mmd1IL8.png', 'https://www.planethockey.com/', '_new']
ultimateshow[15] = ['https://i.imgur.com/PePqj14.png', 'https://www.holidayrinks.com/pepsi-tournament', '_new']
var slidewidth = "850" //set to width of LARGEST image in your slideshow
var slideheight = "475px" //set to height of LARGEST iamge in your slideshow
var slidecycles = "continuous" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder = "yes" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages = "yes" //preload images? "yes" or "no"
var slidebgcolor = 'white'
var slidedelay = 9000
var ie = document.all
var dom = document.getElementById
var curcycle = 0
if (preloadimages == "yes") {
for (i = 0; i < ultimateshow.length; i++) {
var cacheimage = new Image()
cacheimage.src = ultimateshow[i][0]
}
}
var currentslide = 0
function randomize(targetarray) {
ultimateshowCopy = new Array()
var the_one
var z = 0
while (z < targetarray.length) {
the_one = Math.floor(Math.random() * targetarray.length)
if (targetarray[the_one] != "_selected!") {
ultimateshowCopy[z] = targetarray[the_one]
targetarray[the_one] = "_selected!"
z++
}
}
}
if (randomorder == "yes")
randomize(ultimateshow)
else
ultimateshowCopy = ultimateshow
function rotateimages() {
curcycle = (currentslide == 0) ? curcycle + 1 : curcycle
ultcontainer = '<left>'
if (ultimateshowCopy[currentslide][1] != "")
ultcontainer += '<a href="' + ultimateshowCopy[currentslide][1] + '" target="' + ultimateshowCopy[currentslide][2] + '">'
ultcontainer += '<img src="' + ultimateshowCopy[currentslide][0] + '" border="0">'
if (ultimateshowCopy[currentslide][1] != "")
ultcontainer += '</a>'
ultcontainer += '</center>'
if (ie || dom)
crossrotateobj.innerHTML = ultcontainer
if (currentslide == ultimateshow.length - 1) currentslide = 0
else currentslide++
if (curcycle == parseInt(slidecycles) && currentslide == 0)
return
setTimeout("rotateimages()", slidedelay)
}
if (ie || dom)
document.write('<div id="slidedom" style="width:' + slidewidth + ';height:' + slideheight + '; background-color:' + slidebgcolor + '"></div>')
function start_slider() {
crossrotateobj = dom ? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}
if (ie || dom)
window.onload = start_sliderHere is a version for the 21st century. Centered using flex and I removed legacy code
const ultimateshow = [
['https://i.imgur.com/dF7w0Lc.png', 'https://www.alphatournamentcompany.com/', '_new'],
['https://i.imgur.com/OzBBtKk.jpg', 'https://weekendhockey.com/upcoming-tournaments/', '_new'],
['https://i.imgur.com/iZketaT.png', 'https://onehockey.com/our-events', '_new'],
['https://i.imgur.com/GJdRG2Z.jpg', 'https://www.lakeeffecthockey.com/', '_new'],
['https://i.imgur.com/SH0YSb0.jpg', 'https://grinderhockey.com/', '_new'],
['https://i.imgur.com/QvhdlZt.png', 'https://powersk8r.com/', '_new'],
['https://i.imgur.com/cU6VcpL.png', 'https://www.nickelcityhockey.com/', '_new'],
['https://i.imgur.com/ZIC8ELG.jpg?1', 'https://www.black-biscuit.com/', '_new'],
['https://i.imgur.com/Yjh80fq.jpg?1', 'https://www.ministicks.com/', '_new'],
['https://i.imgur.com/BoCHofu.png', 'https://allblackhockeysticks.com/', '_new'],
['https://i.imgur.com/9GrkCjQ.jpg', 'https://stinkylockers.com/', '_new'],
['https://i.imgur.com/rTsRxsI.jpg', 'https://justhockeyjerseys.com/', '_new'],
['https://i.imgur.com/J7kQnIJ.jpg', 'https://www.chehockey.com/', '_new'],
['https://i.imgur.com/oC17NS7.png', 'https://niagaratournaments.com/', '_new'],
['https://i.imgur.com/Mmd1IL8.png', 'https://www.planethockey.com/', '_new'],
['https://i.imgur.com/PePqj14.png', 'https://www.holidayrinks.com/pepsi-tournament', '_new']
];
const slidewidth = "850px"; //set to width of LARGEST image in your slideshow
const slideheight = "475px"; //set to height of LARGEST image in your slideshow
const slidecycles = "continuous"; //number of cycles before slideshow stops (ie: "2" or "continuous")
const randomorder = "yes"; //randomize the order in which images are displayed? "yes" or "no"
const preloadimages = "yes"; //preload images? "yes" or "no"
const slidebgcolor = 'white';
const slidedelay = 9000;
let curcycle = 0;
let currentslide = 0;
if (preloadimages === "yes") {
ultimateshow.forEach(item => {
const cacheimage = new Image();
cacheimage.src = item[0];
});
}
const randomize = (targetArray) => {
let ultimateshowCopy = [];
let z = 0;
while (z < targetArray.length) {
const the_one = Math.floor(Math.random() * targetArray.length);
if (targetArray[the_one] !== "_selected!") {
ultimateshowCopy[z] = targetArray[the_one];
targetArray[the_one] = "_selected!";
z++;
}
}
return ultimateshowCopy;
};
const ultimateshowCopy = (randomorder === "yes") ? randomize([...ultimateshow]) : ultimateshow;
const createSlideContainer = () => {
const slideContainer = document.createElement('div');
slideContainer.id = 'slidedom';
slideContainer.style.width = slidewidth;
slideContainer.style.height = slideheight;
slideContainer.style.backgroundColor = slidebgcolor;
slideContainer.style.display = 'flex';
slideContainer.style.justifyContent = 'center';
slideContainer.style.alignItems = 'center';
// Center the slide container on the page
slideContainer.style.position = 'absolute';
slideContainer.style.top = '50%';
slideContainer.style.left = '50%';
slideContainer.style.transform = 'translate(-50%, -50%)';
document.body.appendChild(slideContainer);
};
document.body.style.display = 'flex';
document.body.style.justifyContent = 'center';
document.body.style.alignItems = 'center';
document.body.style.height = '100vh';
document.body.style.margin = '0';
const rotateimages = () => {
curcycle = (currentslide === 0) ? curcycle + 1 : curcycle;
const slideContainer = document.getElementById('slidedom');
slideContainer.innerHTML = ''; // Clear the container
const imgElement = document.createElement('img');
imgElement.src = ultimateshowCopy[currentslide][0];
imgElement.style.border = '0';
if (ultimateshowCopy[currentslide][1] !== "") {
const linkElement = document.createElement('a');
linkElement.href = ultimateshowCopy[currentslide][1];
linkElement.target = ultimateshowCopy[currentslide][2];
linkElement.appendChild(imgElement);
slideContainer.appendChild(linkElement);
} else {
slideContainer.appendChild(imgElement);
}
currentslide = (currentslide === ultimateshow.length - 1) ? 0 : currentslide + 1;
if (curcycle === parseInt(slidecycles) && currentslide === 0) return;
setTimeout(rotateimages, slidedelay);
};
const start_slider = () => {
createSlideContainer();
rotateimages();
};
window.addEventListener('load', start_slider);