How can I add content inside of my FlexSlider?

Question

My original FlexSlider markup:

<div id="flex" class="flexslider">
    <ol class="flex-control-nav flex-control-paging"><li><a class="flex-active">1</a></li><li><a class="">2</a></li><li><a class="">3</a></li><li><a class="">4</a></li></ol>
  <ul class="slides">
    <li>
      <img src="assets/img/bg-1.jpg" alt="">
    </li>
    <li>
      <img src="assets/img/bg-1.jpg" alt="">
    </li>
    <li>
      <img src="assets/img/bg-1.jpg" alt="">
    </li>
  </ul>
</div>

My Current FlexSlider markup:

<div id="flex" class="flexslider">
    <ol class="flex-control-nav flex-control-paging"><li><a class="flex-active">1</a></li><li><a class="">2</a></li><li><a class="">3</a></li><li><a class="">4</a></li></ol>
  <ul class="slides">
    <li>
            <div class="slider-content">
                <h2>Welcome Jack</h2>
                <p>This is a numch of dummy text jusrt to take up some space s o that I can see how it will ook like with all these characters being taken up in the world of the of uds this is a nothis is a noahtest test I hope that I can do this as possible.</p>
            </div>

      <img src="assets/img/bg-1.jpg" alt="">
    </li>
    <li>

        <div class="slider-content">
                <h2>Welcome Bob</h2>
                <p>This is a numch of dummy text jusrt to take up some space s o that I can see how it will ook like with all these characters being taken up in the world uds this is a nothis is a noahtest test I hope that I can do this as possible.</p>
            </div>

      <img src="assets/img/bg-1.jpg" alt="">
    </li>
    <li>

        <div class="slider-content">
                <h2>Welcome Dan</h2>
                <p>This is a numch of dummy text jusrt to take up some space s o that I can see how it will ook like with all these characters being taken up in the world of uds this is a nothis is a noahtest test I hope that I can do this as possible.</p>
            </div>

      <img src="assets/img/bg-1.jpg" alt="">
    </li>
  </ul>
</div>

as you can see I added this before the images:

<div class="slider-content">
 <h2>Welcome Jack</h2>
 <p>This is a numch of dummy text jusrt to take up some space s o that I can see how it will ook like with all these characters being taken up in the world of the of uds this is a nothis is a noahtest test I hope that I can do this as possible.</p>
 </div>

Now the problem is that I can only get it to where I want it within the slide if I position .slider-content absolute because if I do not I get the slider-content on top of the slider with a huge margin above it. But if I posistion it absolute it does not work within the sliders. The slider-content will not change along with the slides it will just sit ontop of them. So then I tried positioning it relative and I managed to get it where I want to to be with left: 600px; top: 300px; but then the huge margin on top of the slider where the .slider-content should have been still remains there. And it is not a real "Margin" it's as if its part of the <li>'s height. Hope this makes sense but to sum it all up I just want to be able to add content within my sliders.

Answer 1

This should work for you, it adds a title to the slider.

var $flexslider = $('.flexslider');
$flexslider.flexslider({
  animation: "slide",
  manualControls: ".flex-control-nav li",
  useCSS: false /* Chrome fix*/
});

.flexslider, .flexslider-controls {
  max-width: 800px;
}

.slide_text {
  background-color: transparent;
  background-color: rgba(0, 0, 0, 0.5);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
  bottom: 0;
  color: #fff;
  display: block;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000); /* IE6–IE9 */
  left: 0;
  padding: 1em;
  position: absolute;
  width: 100%;
  zoom: 1;
}

.slide_title {
  font-size: 1.2em;
  text-transform: uppercase;
}

.slide_byline {
  font-size: 0.8em;
  display: block;  
}

.flex-control-nav li {
  background: #000;
  border-right: solid #fff 1px;
  color: #fff;
  cursor: pointer;
  float: left;
  margin: 0.09em 0 0 0;
  padding: 1em 1.5em;  
  vertical-align: middle;
  width: 25%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.flex-control-nav li:last-child {
   border: none;
}

.flex-control-nav .flex-active {
  background: #ccc;
  color: #000;
}

/* Minified FlexSlider CSS with Chrome fix */
.flex-container a:active,.flexslider a:active,.flex-container a:focus,.flexslider a:focus{outline:0}.slides,.flex-control-nav,.flex-direction-nav{margin:0;padding:0;list-style:none}.flexslider{margin:0;padding:0}.flexslider .slides>li{display:none;/*-webkit-backface-visibility:hidden;*/position:relative}.flexslider .slides img{width:100%;display:block}.flex-pauseplay span{text-transform:capitalize}.slides:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}html[xmlns] .slides{display:block}* html .slides{height:1%}.no-js .slides>li:first-child{display:block}.flexslider{background:#fff;position:relative;zoom:1}.flex-viewport{max-height:2000px;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;transition:all 1s ease}.loading .flex-viewport{max-height:300px}.flexslider .slides{zoom:1}.carousel li{margin-right:5px}.flex-direction-nav{*height:0}.flex-direction-nav a{width:30px;height:30px;margin:-20px 0 0;display:block;background-position: 0 0;background-repeat: no-repeat;position:absolute;top:50%;z-index:10;cursor:pointer;text-indent:-9999px;opacity:0;-webkit-transition:all .3s ease}.flex-direction-nav .flex-next{background-position:100% 0;right:-36px}.flex-direction-nav .flex-prev{left:-36px}.flexslider:hover .flex-next{opacity:.8;right:5px}.flexslider:hover .flex-prev{opacity:.8;left:5px}.flexslider:hover .flex-next:hover,.flexslider:hover .flex-prev:hover{opacity:1}.flex-direction-nav .flex-disabled{opacity:.3!important;filter:alpha(opacity=30);cursor:default}.flex-control-nav{width:100%;text-align:center}.flex-control-nav li{zoom:1;*display:inline}.flex-control-paging li a{width:11px;height:11px;display:block;background:#666;background:rgba(0,0,0,0.5);cursor:pointer;text-indent:-9999px;-webkit-border-radius:20px;-moz-border-radius:20px;-o-border-radius:20px;border-radius:20px;box-shadow:inset 0 0 3px rgba(0,0,0,0.3)}.flex-control-paging li a:hover{background:#333;background:rgba(0,0,0,0.7)}.flex-control-paging li a.flex-active{background:#000;background:rgba(0,0,0,0.9);cursor:default}.flex-control-thumbs{margin:5px 0 0;position:static;overflow:hidden}.flex-control-thumbs li{width:25%;float:left;margin:0}.flex-control-thumbs img{width:100%;display:block;opacity:.7;cursor:pointer}.flex-control-thumbs img:hover{opacity:1}.flex-control-thumbs .flex-active{opacity:1;cursor:default}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" width="800" height="504" alt="" />
      <div class="slide_text">
        <div class="slide_title">Title of Slide 1</div>
        <div class="slide_byline">Teaser text for slide 1</div>
      </div>
    </li>
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" width="800" height="504" alt="" />
      <div class="slide_text">
        <div class="slide_title">Title of Slide 2</div>
        <div class="slide_byline">Teaser text for slide 2</div>
      </div>
    </li>
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" width="800" height="504" alt="" />
      <div class="slide_text">
        <div class="slide_title">Title of Slide 3</div>
        <div class="slide_byline">Teaser text for slide 3</div>
      </div>
    </li>
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" width="800" height="504" alt="" />
      <div class="slide_text">
        <div class="slide_title">Title of Slide 4</div>
        <div class="slide_byline">Teaser text for slide 4</div>
      </div>
    </li>
  </ul>
</div>
<div class="flexslider-controls">
  <ol class="flex-control-nav">
    <li>Slide 1 Control</li>
    <li>Slide 2 Control</li>
    <li>Slide 3 Control</li>
    <li>Slide 4 Control</li>
  </ol>
</div>