How to put html contents inside jquery image slider?

Question

I want to design a page in which contents of page like header,navigation bar, buttons,headings, paragraphs 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 properly. 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>
    <h3>This is heading</h3>//It is not appearing properly

     <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%" />
           <p>This is paragraph</p>// this is insides div and also not appearing properly
          </div> 
    </body>
</html>

Answer 1

Try This

<html>
<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/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:relative;  
            left:0;
            top:0;
            margin-right:0;
        } 

        .pics img {  //style of images
            width:  100%; 
            height: 100%; 
        } 
        .content{
        position:absolute;  
        top:10;
        left:10;
        color:#fff;
        padding:10px;
        background: rgba(45, 195, 89, 0.57);
        z-index:99
        }
    </style>
</head>
<body>
<div class="pics"> <!--Slider images goes here-->
        <img src="http://dummy-images.com/abstract/dummy-480x270-Stripes.jpg" width="100%" height="500" /> 
        <img src="http://dummy-images.com/abstract/dummy-454x280-Glass.jpg" width="100%" height="100%" /> 
        <img src="http://dummy-images.com/abstract/dummy-576x1024-Bottles.jpg" width="100%" height="500" /> 
 </div> 
       <div class="content"> <!--Slider content goes here-->
       <h3>This is heading</h3>
       <p>This is paragraph This is paragraphThis is paragraphThis is paragraphThis is paragraphThis is paragraphThis is paragraphThis is paragraphThis is paragraphThis is paragraph This is paragraph</p>
       </div>
</body>

Answer 2

Check this out http://jsfiddle.net/xfawfyaw/1/

CSS:

.pics {  
    height:  500px;  
    width:   100%;
    position:relative;  
    left:0;
    top:0;
    margin-right:0;
    overflow:hidden;

} 
.slide div, .slide img {
    height:500px;

}
.slide p {
    position:absolute;
    bottom:-12px;
}
.slide h3 {
    position:absolute;
    top:-20px;

}
.slide h3, .slide p {
    background:rgba(0,0,0,0.5);
    color:#fff;
    left:0;
    right:0;
    padding:10px;
}

HTML:

<div class="pics">
    <div class="slide">
        <h3>This is heading</h3>
        <p>This is paragraph</p>
        <img src="http://www.mundologia.de/wp-content/uploads/raemisgummen_0188-1080x500.jpg" width="100%" height="500" />
    </div>

    <div class="slide">
        <h3>This is heading</h3>
        <p>This is paragraph</p>
        <img src="http://www.cycletrailsaustralia.com/images/832.jpg" width="100%" height="100%" />
    </div>

    <div class="slide">
        <h3>This is heading</h3>
        <p>This is paragraph</p>
        <img src="http://www.webidesigns.com/wp-content/uploads/2015/03/nature-background-cities-flowers-papel-images-wallwuzz-hd-wallpaper-18115-1080x500.jpg" width="100%" height="100%" />
    </div>  
</div>

How to put html contents inside jquery image slider?

Question

2 answers

solution1
0 2015-08-30 06:40:36

solution2
0 2015-08-30 07:01:27

How to put html contents inside jquery image slider?

Question

2 answers

solution1 0 2015-08-30 06:40:36

solution2 0 2015-08-30 07:01:27

solution1
0 2015-08-30 06:40:36

solution2
0 2015-08-30 07:01:27