how do I make my slide show full screen on my webpage?

Question

So im trying to stretch my slideshow to be fullscreen like the one on www.dealix.com (something you can refer to) Im currently using Jquery is it a css code that has to be implemented or do the images have to be sized to fit the screen and if so what is the default width of an internet browser thanks so much! please be easy on me as im only in my second month of coding!

CSS:


<!--
#fadein {
    position:relative;
    height:320px;
    width:320px;
}

#fadein img {
    position:absolute;
    left:0;
    top:0;
}
-->

Html/Javascript:

</div>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('.fadein img:gt(0)').hide();

setInterval(function () {
    $('.fadein :first-child').fadeOut()
                             .next('img')
                             .fadeIn()
                             .end()
                             .appendTo('.fadein');
}, 4000); // 4 seconds
});

Marco10 · Answer 1 · 2014-07-15T15:53:02.163

0

What about if you put the height and width properties with 100% value?

EDIT:

Put also this on the css:

    body{
        padding: 0px;
        margin: 0px;
    }

edited Jul 15 '14 at 15:53

answered Jul 15 '14 at 15:04

Marco10

87
2
8

what put 100% in the css or in the img=src? – Mendax Jul 15 '14 at 15:15
In the CSS, `fadeIn` id, `width: 100%` and `height: 100%` – Marco10 Jul 15 '14 at 15:22
Okay i did that but theres still a little white showing probably about 10px wide how do i get it to cover that? – Mendax Jul 15 '14 at 15:43
put `padding: 0` and/or `margin:0` also – Marco10 Jul 15 '14 at 15:45
pushed beyone the page because everything i have made is in the middle of the image so i only want that put showing on the webpage – Mendax Jul 15 '14 at 17:31
It would be easier if you put the code online so we can test it – Marco10 Jul 15 '14 at 17:32
were do i go to do that jsfiddle? im new to all this – Mendax Jul 15 '14 at 17:41
jsfiddle.net, put the code, save and then share the link, I guess – Marco10 Jul 15 '14 at 19:01

score 0 · Answer 2 · edited May 23 '17 at 10:26

0

IF you are looking for full screen within browser use width:100%; height:100%;

or if you are looking total full screen refer to this question

How to make the window full screen with Javascript (stretching all over the screen)

edited May 23 '17 at 10:26

Community

1
1

answered Jul 15 '14 at 15:16

shefali

85
1
9

how do I make my slide show full screen on my webpage?

2 Answers2