Help - Search - Members - Calendar
Full Version: Center disolay slide show
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
marius
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>
marius
QUOTE(marius @ Jul 19 2019, 04:39 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>

Christian J
QUOTE(marius @ Jul 21 2019, 09:08 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:

CODE
images[0].src = images[counter].src;

(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):


CODE
    <img src="c\websites\test\1.jpg" alt="" width="50%" height="400" /> <!-- placeholder -->

    <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:
CODE
if(counter === images.length-1)

otherwise the script will display the second image twice in a row for some reason (not sure why yet). unsure.gif
pandy
QUOTE(marius @ Jul 19 2019, 11: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?


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

CODE
.container  { margin-left: auto; margin-right: auto;
              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.
marius
Thank you for the help
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.