Can you tell me how to add an image and a text to my html slideshow?

user_10627960 0
Viewed 66

thank you so much for your help in advance. I started coding few days ago, and I have issues with my slider. My text h1 does not appear on top of my slider. I tried the Z-index but it did not work. it seems that the image appear next to my slide and not on it. i tried different things, but it is still the same. Image appears, but next to the sliders,or the text appears under the image.

here is my html and my css file. Hopefully someone can help me to sort it out/ 

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    line-height: 1.43;
    color: #484848;
    max-width: 100%;
    overflow-x: hidden;
}
p {
    font-size: 16px;
    margin: 0;
    padding: 0;
}
a:link {
    font-size: 16px;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
h1,h2,h3,h4,h5,h6,ul,ol,li{
    margin: 0;
    padding: 0;
}
ul,ol{
    list-style-type;
}
::selection {
    color: #fff;
    background-color: #333;
}
::-moz-selection {
    color: #fff;
    background-color: #333;
}


/*-----------Top-Nav-------- */
.top-nav {
 position: fixed;
 width: 100%;
 border-bottom: 1px solid #c9c9c9;
 float: left;
 display: block;
 height: 95px;
 background: #fff;
 z-index: 99999999999;
}
.top-nav .logo{
 width: 100%;
    float: left;
    display: block;
    height: 95px;
    border-right: 1px solid #e9e9e9;
}
.top-nav .logo img {
 width: 100%;
 padding: 14px 0;
 transition: all .9s;
 -webkit-filter: grayscale(0%);
}
.top-nav .logo a:hover img {
    -webkit-filter: grayscale(100%);
}


/*-----------Top-Nav-Search-------- */
.top-nav .search-container {
    float: left;
    width:100%;
    display:block;
    padding:22px 0;
}
.top-nav form{
    position:relative;
    display:block;
}
.top-nav input[type="text"] {
 width: 100%;
 background: #fff;
 padding: 10px 12px;
 border: 1px solid #e1e1e1;
 border-right: none;
 color: #888;
 font-size: 14px;
    height:42px;
}
.top-nav .search-container button {
 float: right;
 padding: 8px 15px;
 background: orange;
 font-size: 17px;
 height: 42px;
 border: none;
 cursor: pointer;
 position: absolute;
 right: 0;
 color: #fff;
}
.top-nav .search-container button:hover {
  background: #ccc;
}



/*-----------Top-Nav-Navigation-------- */
.navigation{
 width: auto;
 float: right;
 display: block;
}
.top-nav ul {
 float: right;
 padding: 35px 0;
 margin: 0;
 width: auto;
 display: block;
}
.top-nav ul li {
 list-style: none;
 margin: 0 34px;
 display: inline-block;
}
.top-nav ul li a {
 color: #777;
 font-size: 16px;
 font-weight: 400;
 text-transform: capitalize;
 letter-spacing: .5px;
    transition: all .9s;
}
.top-nav ul li a:hover {
 color: orange;
}



/*-----------Slideshow----------- */
.slideshow-container {
    width: 100%;
    position: relative;
    margin: auto;
    float: left;
    display: block;
    margin-top: 94px;
}
.slideshow-container .slider-text{
    width:100%;
    float:left;
    display:block;
    background:#008080;
    height:510px;
}
.slideshow-container .slider-text h1 {
d
  color: #fff;
 font-weight: 400;
 text-align: center;
 width: 667px;
 display: block;
 margin: 130px auto auto;
 font-size: 35px;
 font-weight: 600;

}
.slideshow-container .slider-text p {
 color: #fff;
 font-size: 17px;
 text-align: center;
 max-width: 700px;
 display: block;
 margin: 15px auto auto;
 font-weight: 400;
 letter-spacing: 0.5px;

}
.slideshow-container .prev, .slideshow-container .next {
 cursor: pointer;
 position: absolute;
 top: 50%;
 width: auto;
 padding: 11px 18px;
 margin-top: -22px;
 color: white;
 font-weight: bold;
 font-size: 18px;
 transition: 0.6s ease;
 border-radius: 48px;
 height: 48px;
 width: 48px;
 background: rgba(0,0,0, 0.4);
}
.slideshow-container .next{
    right: 16px;
}
.slideshow-container .prev{
    left: 16px;
}
.slideshow-container .prev:hover, .slideshow-container .next:hover {
    background-color: rgba(0,0,0,1);
    text-decoration:none;
}
.slider-image {
  display: flex
  }



/*-----------Slideshow-dot----------- */
.dot-area{
    width:100%;
    float:left;
    display:block;
    padding:20px 0;
    background:orange;
}
.dot-area .dot {
 cursor: pointer;
 height: 15px;
 width: 15px;
 margin: 0 5px;
 background-color: #f9f9f9;
 border-radius: 50%;
 display: inline-block;
 transition: background-color 0.6s ease;
}
.dot-area .active, .dot-area .dot:hover {
    background-color: #008080;
}
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}
@keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}

@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}


/*-----------your-name----------- */
.your-area{
    width:100%;
    float:left;
    display:block;
    background:#003333;
}
.your-area h1{
    padding:100px 0;
    font-size:20px;
    color:#fff;
    text-align: center;
    font-weight:600;
}
.your-area h1 span{
  color:white;
    font-size:20px;




/*:::::::::::::::::Responsive Media Query:::::::::::::::::::*/

@media only screen and (max-width:1279px){
.top-nav ul li {
 margin: 0 20px;
}
}
@media only screen and (max-width:1023px){

}
@media only screen and (max-width:979px){
.top-nav {
 height: 70px;
}
.top-nav .logo {
 height: 70px;
}
.top-nav .search-container {
 padding: 13px 0;
}
.top-nav ul li a {
 font-size: 14px;
 letter-spacing: 0;
}
.top-nav ul {
 padding: 24px 0;
}
.slideshow-container {
 margin-top: 68px;
}
.slideshow-container .slider-text h1 {
 width: 560px;
 font-size: 27px;
}
.slideshow-container .slider-text {
 height: 400px;
}
}
@media only screen and (max-width:899px){
.slideshow-container .slider-text p {
 max-width: 600px;
}
.top-nav ul li {
 margin: 0 15px;
}
.your-area h1 {
 font-size: 18px;
}
.your-area h1 span{
 font-size: 22px;
}
}
@media only screen and (max-width:799px){

}
@media only screen and (max-width:767px){
.top-nav {
 height: auto;
}
.top-nav .logo {
 height: auto;
    border:0;
}
.top-nav .logo img {
 width: 180px;
 margin: auto;
    display:block;
}
.top-nav .search-container {
 padding: 0;
}
.navigation {
 float: none;
 margin: auto;
}
.top-nav ul {
 float: none;
 padding: 12px 0;
 width: auto;
 display: table;
 margin: auto;
}
.top-nav input[type="text"] {
 height: 38px;
}
.top-nav .search-container button {
 height: 38px;
}
.slideshow-container {
 margin-top: 170px;
}
.slideshow-container .slider-text h1 {
 width: 100%;
 padding: 0 90px;
}
.slideshow-container .slider-text p {
 max-width: 100%;
 padding: 0 90px;
}
}
@media only screen and (max-width:639px){

}
@media only screen and (max-width:599px){
.slideshow-container .slider-text h1 {
 margin: 65px auto auto;
}
}
@media only screen and (max-width:479px){
.top-nav ul li {
 margin: 0 9px;
}
.slideshow-container .slider-text h1 {
 padding: 0 85px;
    font-size: 16px;
}
.slideshow-container .slider-text p {
 padding: 0 78px;
    font-size:12px;
}
.slideshow-container .slider-text {
 height: 350px;
}
.slideshow-container .slider-text h1 {
 margin: 100px auto auto;
}
.your-area h1 {
 font-size: 13px;
}
.your-area h1 span {
 font-size: 14px;
}
}
@media only screen and (max-width:359px){
.top-nav ul li {
 margin: 0 5px;
}
}
<!DOCTYPE html>
<html>

<head>
    <title>ElephantRoom</title>
    <meta charset="utf-8" />
    <meta name"viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,500" />
    <link rel="stylesheet" type="text/css" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
    <link rel="stylesheet" type="text/css" href="main.css" />
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- Top-NAV HTML-->
    <section class="top-nav">
        <div class="col-md-2 col-sm-2 col-xs-12">
            <div class="logo">
                <a href="index.php"><img src="logo.png" alt="ElephantRoom"/></a>
            </div>
        </div>
        <div class="col-md-4 col-sm-4 col-xs-12">
            <div class="search-container">
                <form action="/action_page.php">
                    <input type="text" placeholder="Keywords.." name="search">
                    <button type="submit">Search</button>
                </form>
            </div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <div class="navigation">
                <ul>
                    <li><a href="#">Become a Host</a></li>
                    <li><a href="#">Help</a></li>
                    <li><a href="#">Sign Up</a></li>
                    <li><a href="#">Log In</a></li>
                </ul>
            </div>
        </div>
    </section>
    <section class="slideshow-container">
        <div class="mySlides fade">
          <div class="slider-image">
            <img src="image1.jpg" alt="image1"/>

              <div class="slider-text">
            <h1><span> why book an expensive hotel when you can book a cheap apartment</span></h1>
              <p>Lorem ipsum dolor sit amet, consecteur adipiscing
                    elit. Donec venenatis bibendum nunc ut convallis. Suspendisse in nunc unterdum quam pellentesque.</p>
                  </div>
                  </div>
                </div>
            </div>

        <div class="mySlides fade">
            <div class="slider-text">
                <h1>We have you covered anywhere you go in Africa</h1>
                <p>Lorem ipsum dolor sit amet, consecteur adipiscing
                elit. Donec venenatis bibendum nunc ut convallis. Suspendisse in nunc unterdum quam pellentesque.</p>
            </div>
        </div>
        <div class="mySlides fade">
          <div class="slider-text">
            <h1> We believe in a world with no frontier</h1>
            </div>
        </div>
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
      </section>
      <section class="dot-area" style="text-align:center">
        <span class="dot" onclick="currentSlide(1)"></span>
        <span class="dot" onclick="currentSlide(2)"></span>
        <span class="dot" onclick="currentSlide(3)"></span>
    </section>
    <section class="your-area" style="text-align:center">
        <h1>Designed by <span>Sangbe Torndou Jean Marc</span></h1>
    </section>

    <!-- javascript import-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
  showSlides(slideIndex += n);
}
function currentSlide(n) {
  showSlides(slideIndex = n);
}
function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}

</script>
</body>
</html>

enter image description here

css html javascript
2 Answers

Use css for h1

.slider-text h1 {position:absolute; z-index:9999999}
user_24464600

hey hi here is the solution for u slider with right content:

HTML:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" 
   rel="stylesheet" id="bootstrap-css">
 <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 <!-- Wrapper for slides -->
   <div class="carousel-inner">
    <div class="item active">
  <div class="holder col-sm-8">
  <img class="img-responsive" src="http://placehold.it/1000x400" alt="...">
 </div>
 <div class="col-sm-4">
<div class="carousel-caption">
    <h2>Slide 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo 
   ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis 
      parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, 
       pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec 
    pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, 
           rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu 
        pede mollis pretium.</p>
    <button type="button" class="btn btn-default">Default</button>    
     </div>
    </div>
   </div>
 <div class="item">
 <div class="holder col-sm-8">
   <img class="img-responsive" src="http://placehold.it/1000x400" alt="...">
 </div>
 <div class="col-sm-4">
   <div class="carousel-caption">
       <h2>Slide 2</h2>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
    <button type="button" class="btn btn-default">Default</button>    
</div>
  </div>
  </div>
  <div class="item">
   <div class="holder col-sm-8">
        <img class="img-responsive" src="http://placehold.it/1000x400" alt="...">
     </div>
      <div class="col-sm-4">
        <div class="carousel-caption">
          <h2>Slide 3</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
    <button type="button" class="btn btn-default">Default</button>    
   </div>
     </div>
 </div>
</div>
  <div class="controllers col-sm-8 col-xs-12">
   <!-- Controls -->
     <a class="left carousel-control" href="#carousel-example-generic" data- 
        slide="prev">
         <span class="glyphicon glyphicon-chevron-left"></span>
       </a>
     <a class="right carousel-control" href="#carousel-example-generic" data- 
   slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
   <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol> 
 </div>

CSS:

  .carousel-caption {
  position: relative;
   left: 0%;
   right: 0%;
  bottom: 0px;
   z-index: 10;
  padding-top: 0px;
  padding-bottom: 0px;
  color: #000;
 text-shadow: none;
& .btn {
  text-shadow: none; // No shadow for button elements in carousel-caption
}
 }

.carousel {
  position: relative;
}

  .controllers {
      position: absolute;
      top: 0px;
   }

  .carousel-control.left, 
    .carousel-control.right {
     background-image: none;
    }

JAVASCRIPT:

<SCRIPT>
    $(window).bind("load resize slid.bs.carousel", function() {
    var imageHeight = $(".active .holder").height();
    $(".controllers").height( imageHeight );
   console.log("Slid");
 });
</SCRIPT>

Try this let me know ...

user_91964060
Related