2013-08-07 1 views
-2

Я пытаюсь найти карусель, как в: http://whiteshoe.ferragamo.com, но проще. Все, что мне нужно, - это отзывчивая полноразмерная карусель с элементами, которые имеют описание и ссылку на «активный» режим, а остальные - только заголовок, а поскольку они неактивны, они выглядят темнее или серо.Ищете отзывчивый js carousel

Ive пробовал этот http://caroufredsel.dev7studios.com, но не знаю, как добавить неактивные/активные состояния, а отзывчивый: true не меняет размеры моих изображений. Спасибо :)

+1

_ «Я пытаюсь построить карусель» _ - Вы на самом деле пытаетесь построить его, или вы просите рекомендации существующей библиотеки, которая делает это за вас? – nnnnnn

+0

Я на самом деле не программист (я больше похож на css geek), поэтому ... Id, как библиотека, которая может облегчить ее ... Я мог бы сделать некоторые изменения, но не так много, хе. : 3 спасибо! –

+0

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

ответ

0

ИТАК ...

я обнаружил, что JS просто добавил свойства CSS АйЛайн, поэтому я добавил некоторые CSS, чтобы сделать его отзывчивым (без изменения размеров моих изображений, который работает теперь для моего необходимо). CaroFredSel добавляет некоторые классы в код, который вы пишете, поэтому все, что мне нужно было добавить, это ширина: 100%! Important property, чтобы заставить его работать.

Для Js части, я должен был добавить изюминку к текущей, так что я добавил этот код и он работает:

function highlight(items) { 
    items.filter(":eq(1)").css({ 
     opacity : 1 
    }); 
    return items; 
} 
function unhighlight(items) { 
    items.css({ 
     opacity : .3 
    }); 
    return items; 
} 

И затем, после того, как свойства по умолчанию размера и общие вещи:

scroll: { 
items:1, 
onBefore: function(data) { 
     unhighlight(data.items.old); 
    }, 
    onAfter : function(data) { 
     highlight(data.items.visible); 
    }, 
}, 

auto: false, 
prev: { 
    button: "#prev", 
    key: "left", 
    onBefore: function(data) { 
      unhighlight(data.items.old); 
     }, 
     onAfter : function(data) { 
      highlight(data.items.visible); 
     } 
}, 
next: { 
    button: "#next", 
    key: "right", 
    onBefore: function(data) { 
      unhighlight(data.items.old); 
     }, 
     onAfter : function(data) { 
      highlight(data.items.visible); 
     } 
}, 

И в конце:

highlight(unhighlight($j("#f-carousel > *"))); 

});

Я добавлю больше выделяющих вещи и тексты на «on-time», но я думаю, что это покрывает все это. Спасибо и надеюсь, что это поможет кому-то.

0

Это смешно, но кажется, что отзывчивый этот отзывчивый карусель не работает в моем браузере (на демонстрационной странице) ... В любом случае есть много отзывчивых jquery caroussel, вы будете найти его на google ...

+0

да .. но я начинаю замечать, что отзывчивость - это js, но она просто переопределяет css, поэтому я настраиваю и выполняю часть своей цели ... все еще хочу добавить меняющиеся состояния. .. –

+1

Так что удачи в caroufredsel. Если это немного сложно, напишите свой код, мы можем помочь, может быть. Если это действительно сложно, подумайте об использовании другой карусели ... – Pierre

 Смежные вопросы

  • Нет связанных вопросов^_^