аргумент div позиция разбивает слайдер

Question

аргумент div позиция разбивает слайдер

0

Я пытаюсь интегрировать простой слайдер в свой веб-сайт и нашел этот пример на jsfiddle

Я хочу разместить слайдер "родственник" на моем веб-сайте, но если я изменю css на position: relative; слайдер больше не работает должным образом, так как теперь он отображает затухающие изображения друг над другом, как это

Почему это происходит и как я могу позиционировать "относительный" ползунок-div на моем веб-сайте? Я попробовал обернуть его другим div-слоем, но безуспешно.

user2926577 20 март 2014, в 10:25

Источник

Теги:

javascript

jquery

html

2 ответа

1

Вам не нужна обертка. Вы устанавливаете position: relative по неправильному элементу. Установите его на #banner_area, а не #banner_area img. DEMO

fbbdev 20 март 2014, в 08:17

0

Спасибо за ваш ответ, но теперь слайдер не плавает на сайте. Например, я хотел бы, чтобы это было между aaaa и bbbb: jsfiddle.net/AtFeF/86
user2926577 21 март 2014, в 02:05

Ещё вопросы

Спасибо за ваш ответ, но теперь слайдер не плавает на сайте. Например, я хотел бы, чтобы это было между aaaa и bbbb: jsfiddle.net/AtFeF/86

laaposto · Accepted Answer · 2014-03-20T07-08-00.000Z

Попробуйте оболочку div как вы говорите.

Вы должны поместить свой слайдер в другой div а затем поместить этот обертку div relative.

HTML:

<div id="wrap">//<--Add here tha wrapper div
<div id="banner_area">
    <img class="active" src="http://viewallpapers.com/wp-content/uploads/2013/06/Uluru-Australia.jpg" />
    <img src="http://www.wallpaperhi.com/thumbnails/detail/20130309/ocean%20beach%20rocks%20australia%201920x1200%20wallpaper_www.wallpaperhi.com_71.jpg" />
    <img src="http://www.star.com.au/star-event-centre/PublishingImages/about-sydney-800x500.jpg" />
    <img src="http://www.ytravelblog.com/wp-content/uploads/2013/06/Whitsunday-Islands-Queensland-Australia-6.jpg" />
</div>
</div>

CSS:

#wrap{
    position:relative;
    top:100px;
    left:100px;
}

DEMO

ОБНОВИТЬ

Чтобы плавать на веб-сайте, добавьте height в #wrap

#wrap{
    position:relative;
    top:0px;
    left:100px;
    height:250px;
}

demo2

Спасибо за ваш ответ! Но теперь слайдер не плавает внутри сайта. Например, я хотел бы, чтобы это было между asdf и jklo: jsfiddle.net/AtFeF/87
@ user2926577 Я обновил ответ. Это решение работает для вас?