Как поправить чтобы был такой ховер?

Question

[olya_097]

Как поправить чтобы был такой ховер?


https://codepen.io/anon/pen/NQxgJz

Answer 1

[Антон Усачев]

Правильный блок выбирать нужно:
.single-route .owl-carousel.owl-theme .owl-nav div -->

.single-route .owl-carousel.owl-theme .owl-nav button

Comments

[olya_097]

Антон Усачев, ага
увидела
но как сделать именно такой ховер?
https://codepen.io/anon/pen/ZgQJyY

[Антон Усачев]

[olya_097]

Антон Усачев, спасибо
но теперь клик не работает
в слайдере

[Антон Усачев]

olya_097, поправил.

[olya_097]

Антон Усачев, ага
спасибо
супер. Еще тут по клику на большую картинку должен показываться оверлей
но почему он не показываеться? не смотрели? джс скрипт вроде ж написала..

[Антон Усачев]

olya_097, скрипт есть, но он же должен к чему-то применяться. В верстке, например, нет блока .overlay, хотя стили его прописаны. Скрипт же вообще к .overlay никак не обращается... Так откуда же ему появится при клике? =)

[olya_097]

Антон Усачев, а можете объяснить зачем вам строка с 236 по 242?
если её убрать то всё будет также корректно работать

[Антон Усачев]

Я считаю неправильным подход, когда блок с нулевой высотой содержит блоки с ненулевой высотой. Плюс позиционирование выбрано таким образом, чтобы в любом случае занимать всю высоту слайдера. Это уже проф. привычка, так как в моей практике слайдеры зачастую сложнее по верстке, а данный подход к позиционированию позволяет верстать все нормально в 99% случаев.

[olya_097]

Антон Усачев, ага
спасибо
извините
хочу добить это))
не подскажете, пожалуйста?

насчет попапа
https://codepen.io/anon/pen/mNPJzZ
теперь он есть

но нужно чтобы после клика на большое изображение открывался попап, с изображением на весь экран ( это уже сделала) и побокам стрелочки слайдера были и листались картинки


тоесть чтобы была пародия на слайдер
но не слайдер
меняем картинки типа через путь

[Антон Усачев]

olya_097, предлагаю изучить код самостоятельно и понять логику, примененные ходы и закономерности. Можно, конечно, и просто скопипастить, но тогда ты ничему не научишься.

[olya_097]

Антон Усачев, спасибо огромное

[olya_097]

Антон Усачев, а что за to тут?
$owlR.trigger('to.owl.carousel', [itemIndex]);

[Антон Усачев]

olya_097, это взято из API owl carousel. У плагина есть свои методы и события для работы. Этот один из них, переводит карусель к выбранной позиции, в моем случае к активному слайду.

[olya_097]

Антон Усачев, Здравствуйте.
А сделать под картинками такое? только в моем случае 1/3
тоесть добавить 1/3 в тот код с которым Вы уже раньше помогли мне
и именно чтобы это было при листании в попапе
подскажете?

пожалуйста

Answer 2

[Дмитрий]

Поправить что? У вас по ссылке даже элементов не хватает для этого

Comments

[olya_097]

Дмитрий, почему не хватает?
на 242 строке стрелка

[olya_097]

olya_097, а если так?
https://codepen.io/anon/pen/ZgQJyY