Как получить управление навигацией поверх flexslider?

0

Я новичок в flexslider (http://www.woothemes.com/flexslider) и с трудом получаю контроль над навигацией над изображением слайдера. Я хотел бы, чтобы он находился в правом нижнем углу изображения. Но независимо от того, что я, по-видимому, делаю с стилем, он всегда по умолчанию находится под слайдером. Веб-сайт можно посмотреть здесь: http://dakar.bournemouth.ac.uk/~hmonaghan/

Поблагодарите любую помощь, ура!

HTML:

<div id="header" class="flexslider">
<ul class="slides">
<li>
    <div class="slidertext-holder">
    <div class="slidertext">
        <h1>"Donec auctor volutpat lorem, nec cursus augue congue ac. Curabitur malesuada lacinia lorem..."</h1>
        <h2>WARREN MOORE</h2>
    </div>
    </div>
    <img src="images/headerfootball.png">
</li>
<li>
    <div class="slidertext-holder">
    <div class="slidertext">
        <h1>"Duis non metus ipsum. Maecenas sit amet risus ut ligula tempus commodo a in justo."</h1>
        <h2>SOMEONE ELSE</h2>
    </div>
    </div>
  <img src="images/headerfootball.png">
</li>
<li>
    <div class="slidertext-holder">
    <div class="slidertext">
        <h1>"Luke, I am your father."</h1>
        <h2>DARTH VADER</h2>
    </div>
    </div>
  <img src="images/headerfootball.png">
</li>
</ul>
<ol class="flex-control-nav">
    <li><a class="active">1</a></li>|
    <li><a class="">2</a></li>|
    <li><a class="">3</a></li></ol>

CSS:

.ul slides {
margin-bottom:-0.5%;
}

.flex-control-nav {
color:#FFF;
margin-left:20%;
width:35%;
font-family: Proximanova Regular;
position:absolute;
}

.slidertext-holder {
margin-left: auto;
margin-right: auto;
}

.slidertext {
width:35%;
margin-left:55%;
position: absolute;
bottom: 10%;
}

Извините, обновился, чтобы добавить код.

  • 1
    у вас есть код для предоставления? Всегда предоставляйте с кодом того, что у вас есть.
  • 0
    Вы можете легко сделать это с помощью пользовательского скина [при условии, что вы используете Spark Slider]. Можете ли вы указать, какой компонент вы используете? HSilder? VSlider? Или слайдер MX?
Показать ещё 3 комментария
Теги:
slider
flexslider

3 ответа

5
Лучший ответ

Я думаю, что вы ищете:

.flex-control-nav {
  bottom: 20px;
  position: absolute;
  right: 20px;
  text-align: center;
  width: auto;
  z-index: 1000;
}
  • 0
    Спасибо, это сработало, но теперь оно сдвигает текст ползунка вверх и снимает его.
  • 0
    Это не на меня, когда я изменяю это от панели элемента проверки хрома.
Показать ещё 4 комментария
0

если вы работаете с отзывчивым дизайном, вы не можете использовать css для позиционирования элемента управления nav div, который отображается под слайдом... чтобы переместить элемент управления поверх слайда (например, цикл просмотра слайд-шоу), вам нужно выполнить настройки flexslider ( configuration> media> flexslider), отредактируйте набор параметров и перейдите на вкладки "Дополнительные параметры". Существует поле под названием "Controls container (Advanced)", где вы можете указать класс или идентификатор контейнера для получения элементов управления! Если у вас нет div для использования, добавьте один вручную в заголовок вашего представления ex: и просто укажите.flex-control в поле контейнера управления... Надеюсь, что мои объяснения понятны!

  • 0
    Здравствуй! Добро пожаловать в переполнение стека ! Вы можете попытаться улучшить читабельность своего ответа, структурировав его по абзацам и в конечном итоге использовать форматирование кода и так далее!
0

Вам нужно установить z-index .flex-control-nav на большое число, т.е. z-index: 1000; , Таким образом панель управления будет показана сверху слайдера.

Подробнее о z-index: http://www.w3schools.com/cssref/pr_pos_z-index.asp

  • 0
    На самом деле я попытался поиграться с z-index, но удалил его, когда, казалось, ничего не изменилось. Кажется, это работает только при загрузке на сервер по какой-то причине!
  • 0
    Я не знаю, почему на самом деле :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню