Карусель Jquery Animation cloud9 добавить активный класс

Здесь я использую слайдер http://specious.github.io/cloud9carousel/, мне бы хотелось чтобы добавить активный класс, когда изображение вращается спереди.


animation jquery cloud9
person Mitul Patel    schedule 20.09.2016    source источник
comment
Не могли бы вы добавить пример того, что вы пробовали до сих пор?   -  person rudolf_franek    schedule 20.09.2016
comment
я использую этот плагин, но я не могу видеть активный класс, поэтому я хочу сделать css, изображение которого выходит на переднюю сторону,   -  person Mitul Patel    schedule 21.09.2016

Ответы (2)


arrow_upward
1
arrow_downward

По многочисленным просьбам, начиная с версии 2.2.0, предоставление имени класса по вашему выбору через свойство frontItemClass nofollow noreferrer">автоматически помечает самый передний элемент:

var carousel = $("#carousel")

carousel.Cloud9Carousel({
  // ...
  frontItemClass: "active"
})

Живая демонстрация в JS Bin.

person webninja    schedule 22.11.2017

arrow_upward
0
arrow_downward

вы можете добавить функцию обратного вызова «onRendered», я использовал ее и работал на меня

var showcase = $("#showcase")
var card = $("#showcase .card")
showcase.Cloud9Carousel( {
        yOrigin: 42,
        yRadius: 40,
        itemClass: "card",
        buttonLeft: $(".nav2.prev"),
        buttonRight: $(".nav2.next"),
        bringToFront: true,
        onRendered: showcaseUpdated,
        onLoaded: function() {
          showcase.css( 'visibility', 'visible' )
          showcase.css( 'display', 'none' )
          showcase.fadeIn( 1500 )
        }
      } )
      function showcaseUpdated( showcase ) {
        $(card).removeClass('active');
        var index = showcase.nearestIndex();
        $(showcase.items[index].element).addClass('active');
      }
person Iftikhar Ahmed    schedule 30.03.2017