Анимация слайдера Owl Carusel 2

@Kirilbl4 · Регистрация: 10.02.2016

Студворк — интернет-сервис помощи студентам

Доброго всем дня. Подскажите пожалуйста, как сменить анимацию при прокрутке слайдера. Сейчас это выглядит так:
одна картинка сменяет другую листанием влево (меняется текст и картинка). Хочу сделать чтобы было не листание а одна картинка как-бы растворялась и на ее месте плавно появлялась другая, тоже самое с текстом.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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>

@VLADInew · 20.02.2016, 15:44

Kirilbl4, Есть много примеров! Один из них.

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
<div class="slideshow">
        <img src="images/1.jpg" class="img">
        <img src="images/2.jpg" class="img">
        <img src="images/3.jpg" class="img">
        <img src="images/4.jpg" class="img">
       
      </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.slideshow {
    width: 262px;
    height: 100px;
    border: 3px solid red;
    margin: 50px auto;
    overflow: hidden;
    position: relative;
}
.img {
    position: absolute;
   width: 100%;
   height: 100%;
   animation: slide 20s infinite;
   opacity: 0;
}
@keyframes slide {
  10%  { opacity: 1 }
  50%  { opacity: 0 }
}
img:nth-child(0) {animation-delay: 0s}
img:nth-child(1) {animation-delay: 5s}
img:nth-child(2) {animation-delay: 10s}
img:nth-child(3) {animation-delay: 15s}

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .