CSS, затронутые JavaScript для EasySlider 1.7
-
13-09-2020 - |
Вопрос
Я пытаюсь получить хороший накладной эффект, идущий с ползунком, используя EasySlider 1.7. Не только это включает в себя изображения, но и текст, представляющий изображение. Теперь у меня проблемы с подкладкой текста на странице, где мне это нужно.
http://intranet.streamflame.com
Это домашняя страница, раздел, в котором вы видите черное наложение на главном изображении прокрутки, где текст должен сидеть. Теперь, если я избавимся от кода, чтобы прокрутить текст, текст сидит, где он должен. Однако, как только добавит скрипт, чтобы прокрутить текст одновременно, кажется, что текст исчезнет.
Вот мой код.
HTML:
<div class="filler">
<div class="filler-picture">
<div class="filler-img">
<ul>{% for project in rotations %}
<li><img src="{% thumbnail project.key_image.get_absolute_url 559x361 crop,upscale %}" width="559" height="361" alt="{{ project.title }}" /></li>
{% endfor %}
</ul>
</div>
<div class="filler-mask">
<img src="{{ MEDIA_URL }}img/filler.png" alt="filler" />
</div>
<div class="filler-text">
<ul>
<li>
<span class="filler-text-left">WaterTiger</span>
<span class="filler-text-right">Project watertiger is a test project whilst we get all the site together, call it a filler if you must, there is no project watertiger your only dreaming.</span>
</li>
<li>
<span class="filler-text-left">Dragonfly</span>
<span class="filler-text-right">Project Dragonfly is a test project whilst we get all the site together, call it a filler if you must, there is no project dragonfly your only dreaming.</span>
</li>
<li>
<span class="filler-text-left">Spacemunch</span>
<span class="filler-text-right">Project Spacemunch is a test project whilst we get all the site together, call it a filler if you must, there is no project Spacemunch your only dreaming.</span>
</li>
</ul>
.
.
<Сильные> CSS:
.filler {
position: relative;
margin-left:20px;
height:361px;
width:559px;
float:left;
}
.filler-mask {
position: absolute;
left:0; top:0;
height:361px;
width:559px;
z-index: 100;
}
.filler-img{
position: absolute;
left:0; top:0;
height:361px;
width:559px;
z-index: 50;
}
.filler-text {
width: 558px;
height: 68px;
position: absolute;
z-index: 200;
color: #fff;
}
.filler-text li {
list-style-type: none;
z-index: 1000;
}
.filler-text-left {
width: 169px;
float: left;
height: 48px;
padding: 10px;
font-size: 18pt;
font-weight: 100;
}
.filler-text-right {
width: 340px;
float: right;
height: 48px;
padding: 10px;
font-size: 10pt;
}
.
<Сильный> EasySlider JavaScript:
<script type="text/javascript">
$(document).ready(function(){
$(".filler-text").easySlider({
auto: true,
continuous: true,
speed: 1800,
pause: 5000,
nextId: "next2",
prevId: "prev2"
});
$(".filler-img").easySlider({
auto: true,
continuous: true,
speed: 1800,
pause: 5000,
nextId: "next2",
prevId: "prev2"
});
});
</script>
.
Надеясь, что кто-то может помочь.
Решение
Добавление эффекта слайдера к тексту наполнителя устанавливает свои свойства jQuery
Это результат вашего LI внутри наполнителя-текста, не принимая его высоту.Таким образом, первое решение - сделать Li взять его высоту, добавив Clearfix заранее или простой:
<div style="clear: both;"></div>
.
После каждого
<span class="filler-text-left">WaterTiger</span>
<span class="filler-text-right">Project watertiger is a test project whilst we get all the site together, call it a filler if you must, there is no project watertiger your only dreaming.</span>
.
Так выглядит как:
<span class="filler-text-left">WaterTiger</span>
<span class="filler-text-right">Project watertiger is a test project whilst we get all the site together, call it a filler if you must, there is no project watertiger your only dreaming.</span>
<div style="clear: both;"></div>
.
и, наконец, управлять верхней позицией вашего наполнителя-текста