Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Owl Carousel увеличение при наведении (https://javascript.ru/forum/dom-window/74430-owl-carousel-uvelichenie-pri-navedenii.html)

Bloody 10.07.2018 18:20

Owl Carousel увеличение при наведении
 
Здравствуйте ув. форумчане, может кто подскажет как реализовать увеличение картинки при наведении на фото? Облазил всю документацию, не нашел упоминаний о такой плюшке, вот тут реализовано это:

Код:

http://kuhni-cherry.by/
Блок - наши проекты

рони 10.07.2018 18:38

Bloody,
смотрите css на сайте, а не документацию на слайдер

Bloody 10.07.2018 19:59

Цитата:

Сообщение от рони (Сообщение 489432)
Bloody,
смотрите css на сайте, а не документацию на слайдер

Да смотрел, вот только не могу понять как он увеличивает фото при наведении. Попробывал копию сделать, не работает, только прокрутка слайдов. Может есть какие варианты?

рони 10.07.2018 20:30

Bloody,
при наведении на блок, слайдеру и блоку присваиваются классы, согласно этим классам, остальные блоки становятся невидимыми, и обратно классы снимаются, когда курсор уходит с блока. вот весь вариант. при желании, наверное можно и без js.

laimas 10.07.2018 20:56

Bloody,
нет там никакого увеличения, есть показать/скрыть, ищите тут:

$('.slider-box .owl-carousel').owlCarousel({
    'nav': !0,
    'navText': [
    ],
    'dots': !1,
    'loop': !0,
    'onInitialized': function () {
      $('.slider-carousel .slider-item').hover(function () {
        var e = $(this).attr('data-item');
        $('.slider-active [data-item="' + e + '"]').addClass('visible'),
        $('.slider-carousel').addClass('hover')
      }, function () {
        var e = $(this).attr('data-item');
        $('.slider-active [data-item="' + e + '"]').removeClass('visible'),
        $('.slider-carousel').removeClass('hover')
      })
    },
.....


Часовой пояс GMT +3, время: 11:19.