如何在幻灯片中添加HTML内容？

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. 但是问题是当我在div容器或主体上添加内容时，内容没有出现在幻灯片上。 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. 如果您在CSS代码中更改pic img的height属性，则幻灯片将正确显示。

Check this fiddle - click here 检查这个小提琴- 单击此处

Hope it helped..! 希望能有所帮助..！

EDIT - With visible heading click here 编辑-具有可见的标题，请单击此处

如何在幻灯片中添加HTML内容？

问题描述

1 个解决方案

解决方案1
1 2015-08-29 17:44:08

如何在幻灯片中添加HTML内容？

问题描述

1 个解决方案

解决方案1 1 2015-08-29 17:44:08

解决方案1
1 2015-08-29 17:44:08