1

Использую на сайте слайдер fotorama.

Помогите разобраться, что я делаю не так. Мне нужно при каждом активном слайде показать плавно текст, например, - первый через 1,5 секунды, а второй через 2 секунды. Изначально текст скрыт.

Вот пример.

if($('.fotorama__stage__frame').hasClass('fotorama__active')){ $(this).children('#kkk').delay(1500).show(1000); $(this).children('#kkk2').delay(2000).show(1000); }

Если у Вас есть предложения, как сделать по другому, буду рад рассмотреть.

1 ответ 1

2

Jquery считаю использовать нет необходимости в Вашем случае. У fotorama к активному слайду добавляется class="fotorama__active", а к не активному class="fotorama__fade-front".

Если говорить простым языком, когда слайд еще не активен, у div в котором лежит Ваша картинка, установлен класс fotorama__fade-front, после того, как наступило время показа кого-то слайда, класс fotorama__fade-front удаляется и вместо него добавляется fotorama__active. Исходя их этого, Вы можете воспользоваться этим случаем.

Насколько помню в документации указано, для того, чтобы добавить текст, необходимо написать следующее:

<div data-img="images/75bdec4a063c.jpg"><p class="zoom-fotorama">Текст</p></div>

Добавляете к тегу <p> класс, например, zoom-fotorama. Далее возьму пример стилей из Animate.css:

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 0;
  }
}

Далее прописываем следующие правила для текста:

p.zoom-fotorama{
    opacity: 0;
}

Это позволит нам в дальнейшем показать текст плавно, так как, если текст будет по-умолчанию виден, то он сначала покажется, а только потом на него сработает далее описанные стили, что очень не красиво. Стили:

.fotorama__active .fotorama__html p.zoom-fotorama {
    opacity: 1;
    animation-name: zoomIn;  
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;                    
}

Теперь опишем стили для текста в момент переключения слайда на следующий:

.fotorama__fade-front .fotorama__html p.zoom-fotorama {
    opacity: 1;
    animation-name: zoomOut;
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;                  
}

Теперь Ваш текст при активном слайде будет плавно появляться и плавно исчезать при переключении слайда на следующий.

Я показал лишь пример реализации для плавного появления и плавного исчезновения текста. Вы можете, конечно, всё сделать под себя индивидуально:)

1
  • Супер! Спасибо!:)
    – Дима
    12 июн 2017 в 8:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.