Доброго времени, друзья. Есть задача, на поиск решения которой пошли уже вторые сутки, т.к. JS не знаю совершенно.
На странице будет n-ное количество небольших слайдеров, меняющих размер в зависимости от родителя. Страница на Twitter Bootstrap 3. Ни один из мне известных слайдеров не подойдет, т.к. страница отзывчивая, и div для слайдера постоянно меняет свой размер, а насколько мне известно, все слайдеры работают только с постоянной шириной либо высотой родителя (прячут через
overflow: hidden; все картинки, кроме одной, потом сдвигают).
Мне же нужно выстроить их одна за другой, абсолютно позиционировав, а потом менять им z-index.
Есть вот такой html/css:
CODE (
html):
скопировать код в буфер обмена
<style>
#items .hold{
visibility: hidden;
position: relative;
top: 0;
left: 0;
}
#items .display {
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
#prev, #next {
z-index: 102;
position: relative;
}
</style>
<div id="carousel">
<span id="prev">prev</span>
<span id="next">next</span>
<div id="items">
<img src="/img-001.jpg" class="img-responsive hold">
<img src="/img-001.jpg" class="img-responsive display" id="rowScroll">
<img src="/img-002.jpg" class="img-responsive display" id="rowScroll">
<img src="/img-003.jpg" class="img-responsive display" id="rowScroll">
</div>
</div>
(стр. 27) нужен для того, чтобы высота
div#carousel была равна высоте картинок (они одинакового размера), т.к. сами картинки
img.display абсолютно позиционированы, соответственно, они сами с задачей не справятся. Т.к. и
img.hold и
img.display у нас
img-responsive, эталонная
img.hold будет растягивать нам нашего родителя до размеров
img.display. Это уже работает (пусть и через ж..пу), т.к. я в инструментах разработчика руками меняю
img.display по очереди z-index и происходит то, что должно происходить по нажатию кнопочек.
Я вижу два алгоритма:
1)
1. По нажатию
#next проверяем, существует ли объект
$current. Если нет, переходим к п. 2, если есть - к п. 4
2. У родителя ищем первого потомка с
#rowScroll
3. Присваиваем объекту
$current то, что нашли
4. Устанавливаем объекту
$current z-index: 100;
5. Переходим к следующему элементу в дереве, ставим ему
z-index: 101;
6. Присваиваем объекту
$current найденный в п. 5 элемент
С
#prev то же самое, только нужно будет искать предыдущий элемент. И я не в курсе, сможет ли при таком алгоритме браузер хранить объект
$current, т.к. я совершенно не работал с JS. Думаю, что может, но если нет, то такой вариант не подходит.
2)
Все то же самое, только у родителя в потомках искать не элементы с
#rowScroll (п. 2), а элементы с
z-index:101. Естественно, первому
img.display нужно будет выставить
z-index:101 при любом варианте, но это не проблема.
Как мне кажется, здесь 10-20 строк на jQuery. Фреймворк не принципиален. Помогите, великие знатоки JS, иначе я сойду с ума
Спасибо!
