How can I add content inside of my FlexSlider? - html

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>