All geek questions in one place

CSS Affected by Javascript for EasySlider 1.7

I am trying to get a nice overlay effect with a slider using EasySlider 1.7. This should not only include images, but also text representing the image. Now I am having problems aligning the text on the page where I need it.

http://intranet.streamflame.com

This is the home page. In the section where you see a black inscription on the main scrollable image, there is text on which the text should sit. Now, if I get rid of the code to scroll through the text, the text sits where it should. However, as soon as I add a script to scroll through the text at the same time, the text seems to disappear.

Here is my code.
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>

Note. I tried to put the script for text under the script for the image, this did not change its appearance.
Hope someone can help.

+4
source share
1 answer

Adding a slider effect to placeholder text sets its properties using jquery

This is the result of your li inside the filler text not reaching its height. so the first solution is to make the litas tall by adding clearfix in advance or simply:

 <div style="clear: both;"></div>

after each

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

It looks like this:

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

And finally, control the top position of your filler

+1
source

Source: https://habr.com/ru/post/1315176/

More articles:


All Articles