Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.07.2018, 18:20
Новичок на форуме
Отправить личное сообщение для Bloody Посмотреть профиль Найти все сообщения от Bloody
 
Регистрация: 10.07.2018
Сообщений: 4

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

Код:
http://kuhni-cherry.by/
Блок - наши проекты
Ответить с цитированием
  #2 (permalink)  
Старый 10.07.2018, 18:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Bloody,
смотрите css на сайте, а не документацию на слайдер
Ответить с цитированием
  #3 (permalink)  
Старый 10.07.2018, 19:59
Новичок на форуме
Отправить личное сообщение для Bloody Посмотреть профиль Найти все сообщения от Bloody
 
Регистрация: 10.07.2018
Сообщений: 4

Сообщение от рони Посмотреть сообщение
Bloody,
смотрите css на сайте, а не документацию на слайдер
Да смотрел, вот только не могу понять как он увеличивает фото при наведении. Попробывал копию сделать, не работает, только прокрутка слайдов. Может есть какие варианты?
Ответить с цитированием
  #4 (permalink)  
Старый 10.07.2018, 20:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Bloody,
при наведении на блок, слайдеру и блоку присваиваются классы, согласно этим классам, остальные блоки становятся невидимыми, и обратно классы снимаются, когда курсор уходит с блока. вот весь вариант. при желании, наверное можно и без js.
Ответить с цитированием
  #5 (permalink)  
Старый 10.07.2018, 20:56
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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')
      })
    },
.....
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение текста при наведении xformer jQuery 2 11.07.2014 10:09
Разделение на 3 картинки и их открытие при наведении курсора Михаил_Michail Элементы интерфейса 1 07.07.2014 12:11
Кратное увеличение при клике на кнопку vabus Элементы интерфейса 2 15.04.2013 20:42
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 09:06
изменения рисунка при наведении курсора Kenan Bek Events/DOM/Window 24 19.12.2010 20:48