Анимация слайдера Owl Carusel 2
Доброго всем дня. Подскажите пожалуйста, как сменить анимацию при прокрутке слайдера. Сейчас это выглядит так:
одна картинка сменяет другую листанием влево (меняется текст и картинка). Хочу сделать чтобы было не листание а одна картинка как-бы растворялась и на ее месте плавно появлялась другая, тоже самое с текстом. <div class="s_6_slider"> <div id="demo"> <div class="slide"> <div id="owl-demo" class="owl-carousel"> <div class="o_item"><img src="img/p1.png"> <div class="item_text"> <p>Загородный дом №1</p> <span>Использовалась керамическая черепица. Наличие в конструкции чердака определяет теплоизоляцию, за счет воздушного пространства, образуемого поверхностью крыши, наружными стенами и перекрытием верхнего этажа. Он защищает здание от холода, обеспечивает проветривание. </span> </div> </div> <div class="o_item"><img src="img/p2.png"> <div class="item_text"> <p>Загородный дом №2</p> <span>Использовалась керамическая черепица. Наличие в конструкции чердака определяет теплоизоляцию, за счет воздушного пространства, образуемого поверхностью крыши, наружными стенами и перекрытием верхнего этажа. Он защищает здание от холода, обеспечивает проветривание. </span> </div> </div> <div class="o_item"><img src="img/p3.png"> <div class="item_text"> <p>Загородный дом №3</p> <span>Использовалась керамическая черепица. Наличие в конструкции чердака определяет теплоизоляцию, за счет воздушного пространства, образуемого поверхностью крыши, наружными стенами и перекрытием верхнего этажа. Он защищает здание от холода, обеспечивает проветривание. </span> </div> </div> </div> <div class="sl_form"></div> </div> </div> </div> <script> $(document).ready(function() { $("#owl-demo").owlCarousel({ navigation : true, slideSpeed : 1000, singleItem : true, }); }); </script> |
Kirilbl4,
прочитать документацию, скачать css, выбрать нужный эффект и прописать в инициализацию http://www.owlcarousel.owlgraphic.co...s/animate.html |
Рони, там я уже все пролазил. Может что то не так делаю?
В js прописал вроде все, animate.css подключен, а не работает все равно. $(document).ready(function() { $("#owl-demo").owlCarousel({ navigation : true, slideSpeed : 1000, singleItem : true, animateOut: 'slideOutDown' , animateIn: 'slideOutDown' , items: 1 , margin: 30 , stagePadding: 30 , smartSpeed: 450 }); }); |
Kirilbl4, версия 2? у вас owlCarousel и либо пишите классы как они прописаны в animate.css или сами такой класс 'slideOutDown' в сss добавляйте. как примере по ссылке
|
Часовой пояс GMT +3, время: 02:23. |