Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Center disolay slide show
Posted by: marius Jul 19 2019, 04:39 AM
I have the folloowing html code and the container is displayed to the left of the page. How do I center the slide show display?
<html>
<head>
<style>
.container{
position:relative;
top: 300px; // 100px from top relative to its old position
left: 600px; // 100px from left
width:50%;
height:400px;
border-radius:5px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="imgGallary" class="container">
<img src="c\websites\test\1.jpg" alt="" width="50%" height="400" />
<img src="c:\websites\test\2.jpg" alt="" width="50%" height="400" />
<img src="c:\websites\test\3.jpg" alt="" width="50%" height="400" />
<img src="c:\websites\test\1.jpg" alt="" width="50%" height="400" />
</div>
<script>
(function(){
var imgLen = document.getElementById('imgGallary');
var images = imgLen.getElementsByTagName('img');
var counter = 1;
if(counter <= images.length){
setInterval(function(){
images[0].src = images[counter].src;
console.log(images[counter].src);
counter++;
if(counter === images.length){
counter = 1;
}
},4000);
}
})();
</script>
</body>
</html>
Posted by: marius Jul 21 2019, 02:08 AM
Thanks I have solved my problem by inserting <div style="text-align:center"> as below:
Only three images are displayed in the slide show. I supose its the counter.
Could someone please help me with this problem!!
"<body>
<div id="imgGallary" class="container">
<div style="text-align:center">
<img src="1.jpg" alt="" width="70%" height="400" />"
I have the following html code and the container is displayed to the left of the page. How do I center the slide show display?
<html>
<head>
<style>
.container{
position:relative;
top: 300px;
left: 600px;
width:50%;
height:400px;
border-radius:5px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="imgGallary" class="container">
<div style="text-align:center">
<img src="c\websites\test\1.jpg" alt="" width="50%" height="400" />
<img src="c:\websites\test\2.jpg" alt="" width="50%" height="400" />
<img src="c:\websites\test\3.jpg" alt="" width="50%" height="400" />
<img src="c:\websites\test\1.jpg" alt="" width="50%" height="400" />
</div>
<script>
(function(){
var imgLen = document.getElementById('imgGallary');
var images = imgLen.getElementsByTagName('img');
var counter = 1;
if(counter <= images.length){
setInterval(function(){
images[0].src = images[counter].src;
console.log(images[counter].src);
counter++;
if(counter === images.length){
counter = 1;
}
},4000);
}
})();
</script>
</body>
</html>
Posted by: Christian J Jul 21 2019, 06:04 AM
Only three images are displayed in the slide show.
The script works by replacing the URL of image[0] (the first IMG element) with each URL of the other IMG elements:
(so you might regard the first IMG element as a placeholder for the other pictures' URLs). To include the first picture's URL in the slideshow, add it among the other pictures (just like you're doing here):
<img src="c:\websites\test\2.jpg" alt="" width="50%" height="400" />
<img src="c:\websites\test\3.jpg" alt="" width="50%" height="400" />
<img src="c:\websites\test\1.jpg" alt="" width="50%" height="400" />
You should also add a -1 here:
otherwise the script will display the second image twice in a row for some reason (not sure why yet).
Posted by: pandy Jul 21 2019, 05:00 PM
I have the folloowing html code and the container is displayed to the left of the page. How do I center the slide show display?
The positioning you have doesn't help. Also, the double slash comments you use is kosher for instance in JS, but aren't valid in CSS. Probably nothing after the first // is read. CSS only use one type of comment, this: /* comment */ .
I'd remove the positioning to start with. Then you can center the DIV by giving it auto left and right margins. But since you make the images' width 50% of the div.container's width you also need to center the content inside the DIV.
See here about centering.
http://www.w3.org/Style/Examples/007/center.html
text-align: center }
If you want the slide show further down it may work with a top margin.' position: relative' could also work, depends on the context. But only use top, don't position it horizontally.
Posted by: marius Jul 28 2019, 02:57 AM
Thank you for the help
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)