Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.02.2016, 12:44
Интересующийся
Отправить личное сообщение для Kirilbl4 Посмотреть профиль Найти все сообщения от Kirilbl4
 
Регистрация: 02.07.2015
Сообщений: 16

Анимация слайдера 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>
Ответить с цитированием
  #2 (permalink)  
Старый 19.02.2016, 13:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

Kirilbl4,
прочитать документацию, скачать css, выбрать нужный эффект и прописать в инициализацию
http://www.owlcarousel.owlgraphic.co...s/animate.html
Ответить с цитированием
  #3 (permalink)  
Старый 19.02.2016, 13:58
Интересующийся
Отправить личное сообщение для Kirilbl4 Посмотреть профиль Найти все сообщения от Kirilbl4
 
Регистрация: 02.07.2015
Сообщений: 16

Рони, там я уже все пролазил. Может что то не так делаю?
В 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 
      });
});
Ответить с цитированием
  #4 (permalink)  
Старый 19.02.2016, 15:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

Kirilbl4, версия 2? у вас owlCarousel и либо пишите классы как они прописаны в animate.css или сами такой класс 'slideOutDown' в сss добавляйте. как примере по ссылке
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как организовать два слайдера по принципу обложка-внутренние страницы? helgajijka jQuery 4 06.09.2015 13:52
Анимация с скрытием слайдера при прокрутки вверх+привязка к кукам mylifegod Events/DOM/Window 9 17.04.2015 10:55
Анимация после анимации Narahon Элементы интерфейса 12 02.04.2015 22:06
Два слайдера на странице ureech Элементы интерфейса 1 14.05.2014 15:56
Анимация. Помогите понять почему не работает. kadurban jQuery 4 08.07.2010 20:50