How to add html contents into slideshow?

Question

I want to design a page in which contents of page like header,navigation bar, buttons etc should be placed on slideshow. But the problem is when I add contents on div container or body, contents does not appear on slideshow. Can any one please tell me what should I do?
Here is the code:

<html>
    <head>
        <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){ //This is jquery code for fade slideshow
                $('.pics').cycle('fade');
            });
        </script>
        <style type="text/css">
            .pics {  //this is style of container (div) which contain images
                height:  100%;  
                width:   100%;
                position:absolute;  
                left:0;
                top:0;
                margin-right:0;
            } 

            .pics img {  //style of images
                width:  100%; 
                height: 100%; 
            } 
        </style>
    </head>
    <body>
        <div class="pics"> //html code for container
            <img src="adv1_wheels_ferrari_f430-HD.jpg" width="100%" height="500" /> 
            <img src="kepler_motion-HD.jpg" width="100%" height="100%" /> 
            <img src="nissan_gt_r_gold-HD.jpg" width="100%" height="100%" />
        </div> 
    </body>
</html>

Answer 1

The slideshow appears properly if you change the height property of pic img in css code.

Check this fiddle - click here

Hope it helped..!

EDIT - With visible heading click here

How to add html contents into slideshow?

Question

1 answers

solution1
1 2015-08-29 17:44:08

How to add html contents into slideshow?

Question

1 answers

solution1 1 2015-08-29 17:44:08

solution1
1 2015-08-29 17:44:08