The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Center disolay slide show, Center a container in the web window
marius
post Jul 19 2019, 04:39 AM
Post #1





Group: Members
Posts: 3
Joined: 19-July 19
Member No.: 26,937



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
marius
post Jul 21 2019, 02:08 AM
Post #2





Group: Members
Posts: 3
Joined: 19-July 19
Member No.: 26,937



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>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 21 2019, 06:04 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 21 2019, 05:00 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
marius
post Jul 28 2019, 02:57 AM
Post #5





Group: Members
Posts: 3
Joined: 19-July 19
Member No.: 26,937



Thank you for the help
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th March 2024 - 09:16 PM