2015-05-02 2 views
0

Мой оригинальный FlexSlider разметки:Как я могу добавить содержимое внутри своего FlexSlider?

<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> 

Мой текущий FlexSlider разметка:

<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> 

, как вы можете видеть, что я добавил это перед изображениями:

<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> 

Теперь проблема заключается в том, что я может получить его только туда, где я хочу его в слайде, если я положу .slider-content абсолютным, потому что, если я не получу содержимое слайдера поверх слайдера с ах громадный край над ним. Но если я уверен, что он не работает внутри слайдеров. Содержимое слайдера не будет меняться вместе со слайдами, которые он будет просто сидеть на них. Итак, я попробовал позиционировать его относительно, и мне удалось получить его там, где я хочу быть с left: 600px; top: 300px;, но затем огромный запас поверх слайдера, где должно было остаться .slider-content. И это не настоящая «маржа», это как бы ее часть высоты <li>. Надеюсь, это имеет смысл, но, чтобы судить об этом, я просто хочу иметь возможность добавлять контент в свои слайдеры.

ответ

1

Это должно сработать для вас, оно добавляет название слайдеру.

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>

+1

http://codepen.io/nzshumate/pen/YXXjPY – NateShumate

+1

Эй я использовал свое решение, и она работала тогда я сузил его к корню исправления и получается все Мне нужно было предоставить '.flexslider .slides> li { position: relative; } 'Я предполагаю, что мне не хватало положения относительно li .. спасибо TON! ценю вашу помощь! –

Смежные вопросы