Форум

alexscus · #1 (**permalink**) 16.01.2017, 18:39

Приветствую, Уважаемые!

Подскажите, как добавить эффект для фоновой картинки каждому активному слайду в плагине owl.carousel.js (слайдер 1-ой версии)
Намучался уже, никак не получается((

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

анимация:

var animBg = $('.carousel__frame .owl-item .slide__box').animate({
        'background-position-x': '-60px'
      }, 10000, 'linear');

var owl = $(".owl-carousel"),
      status = $(".owlStatus");
 
      owl.owlCarousel({ 
        navigation : false,
        singleItem : true,
        pagination: true,
        touchDrag: false,
        mouseDrag: false,
        afterAction : afterAction,
        transitionStyle : "fade",
        addClassActive: true,
        autoPlay : true,
        goToFirst : true,
        goToFirstSpeed : 100,
        slideSpeed:100,
 
        animBg
 
      });

Dilettante_Pro · #2 (**permalink**) 16.01.2017, 18:47

alexscus,
https://owlcarousel2.github.io/OwlCa...pi-events.html

alexscus · #3 (**permalink**) 16.01.2017, 19:16

Сообщение от Dilettante_Pro

alexscus,
https://owlcarousel2.github.io/OwlCa...pi-events.html

Спасибо, но у меня используется старая версия, ниже второй.
А нет способа на JQuery ?

рони · #4 (**permalink**) 16.01.2017, 20:33

alexscus,
какая версия ? номер

рони · #5 (**permalink**) 16.01.2017, 20:56

alexscus,
для версий 1.3.2 и выше достаточно добавить css
http://newtimes.ru/demos/transitions.html

alexscus · #6 (**permalink**) 16.01.2017, 20:57

Сообщение от рони

alexscus,
какая версия ? номер

owl.carousel.min.js
сейчас смотрел, версия не написана((
но просто пробовал добавлять из 2 версии зацикливание, не работало, почитал, что доступно только в версии 2, на этом основании и решил, что меньше..

alexscus · #7 (**permalink**) 16.01.2017, 21:02

Сообщение от рони

alexscus,
для версий 1.3.2 и выше достаточно добавить css
http://newtimes.ru/demos/transitions.html

пробовал уже, но там при переходе на др. слайд поддергивание происходит, т.к. при fade active переключается и это заметно((

поэтому на js ищу

такой вариант использовал:

@keyframes animatedBackground {
    from {
        background-position: 0 0
    }
    100% {
        background-position: -600px 0
    }
}
.owl-item.active .slide__box{
	width:100%;
	animation: animatedBackground 60s linear infinite;
	-moz-animation: animatedBackground 60s linear infinite;
	-webkit-animation: animatedBackground 60s linear infinite;
 	-o-animation: animatedBackground 60s linear infinite;

}

alexscus · #8 (**permalink**) 16.01.2017, 21:24

Сообщение от рони

alexscus,
для версий 1.3.2 и выше достаточно добавить css
http://newtimes.ru/demos/transitions.html

хотя сейчас небольшой костыль придумал, чтобы fade эффект не убивать )))

Спасибо за ссылку! =)

.owl-item.owl-fade-out .slide__box{
    background-position: -300px 0
}

рони · #9 (**permalink**) 16.01.2017, 22:50

alexscus,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>Owl Carousel - CSS3 Transitions</title>

    <!-- Owl Carousel Assets -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" rel="stylesheet">



  </head>
  <body>
<div id="owl-demo" class="owl-carousel">
                <div class="item" style="background-image: url(http://newtimes.ru/demos/assets/fullimage1.jpg)"></div>
                <div class="item" style="background-image: url(http://newtimes.ru/demos/assets/fullimage4.jpg)"></div>
                <div class="item" style="background-image: url(http://newtimes.ru/demos/assets/fullimage3.jpg)"></div>
                <div class="item" style="background-image: url(http://newtimes.ru/demos/assets/fullimage5.jpg)"></div>
              </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>

    <!-- Demo -->

    <style>


 .owl-test-out .item {

 -webkit-animation: testOut 7s both ease;
 -moz-animation: testOut 7s both ease;
 -o-animation: testOut 7s both ease;
 animation: testOut 7s both ease;
}
.owl-test-in .item {

  -webkit-animation: testIn 7s both ease;
  -moz-animation: testIn 7s both ease;
  -o-animation: testIn 7s both ease;
  animation: testIn 7s both ease;
}
@keyframes testOut {
  0% { background-position: 100% 0;  }
  100% { background-position: 300% 0; }
}
@keyframes testIn {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}
 .item {
   width: 500px;
   height: 300px ;
   background-size: 1000px 300px;
   background-repeat:  no-repeat;
   background-position: 100% 0;
 }
    </style>


    <script>
    $(document).ready(function() {

      var owl = $("#owl-demo");
      owl.owlCarousel({
        autoPlay: true ,
        navigation : false,
        singleItem : true,
        pagination: false,
        transitionStyle : "test"
      });

    });
    </script>

  </body>
</html>

alexscus · #10 (**permalink**) 17.01.2017, 08:40

Сообщение от рони

alexscus,

Спасибо за пример!
нужно было мне сразу на примере показать

после добавления следующего правила, стало норм:

.owl-item.owl-fade-out .item{ background-position: -50px 0}

если его убрать, происходит "дергание" при переходе слайдов
минус в том, что для адаптивной верстки придется дописывать новую позицию фона "background-position"
но пока вышло как-то так)

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>Owl Carousel - CSS3 Transitions</title>

    <!-- Owl Carousel Assets -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" rel="stylesheet">



  </head>
  <body>
<div id="owl-demo" class="owl-carousel">
                <div class="item" style="background-image: url(http://newtimes.ru/demos/assets/fullimage1.jpg)"></div>
                <div class="item" style="background-image: url(http://newtimes.ru/demos/assets/fullimage4.jpg)"></div>
                <div class="item" style="background-image: url(http://newtimes.ru/demos/assets/fullimage3.jpg)"></div>
                <div class="item" style="background-image: url(http://newtimes.ru/demos/assets/fullimage5.jpg)"></div>
              </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>

    <!-- Demo -->

    <style>
#owl-demo{
  width: 500px;
  height: 200px;
  border: 1px solid #333;
}
.owl-carousel, .sl-carousel {position: relative; height: 100%; z-index: 10;}
.owl-carousel div:not(.owl-controls),
.sl-carousel div:not(.owl-controls)
{height: 100%; z-index: 10;}
.owl-item .item{
  -moz-background-size: 120%; 
  -webkit-background-size: 120%; 
  -o-background-size: 120%;
  background-size: 120%;
  background-repeat: no-repeat;
}
.owl-item.active .item{
  animation: animatedBackground 60s linear infinite;
  -moz-animation: animatedBackground 60s linear infinite;
  -webkit-animation: animatedBackground 60s linear infinite;
  -o-animation: animatedBackground 60s linear infinite;
}

/*hack*/
.owl-item.owl-fade-out .item{
    background-position: -50px 0
}

 /* animatedBackground */
@keyframes animatedBackground {
    0 { background-position: 0 0 }
    100% { background-position: -600px 0 }
}
@-moz-keyframes animatedBackground {
    0 { background-position: 0 0 }
    100% { background-position: -600px 0 }
}
@-webkit-keyframes animatedBackground {
    0 { background-position: 0 0 }
    100% { background-position: -600px 0 }
}
@-o-keyframes animatedBackground {
    0 { background-position: 0 0 }
    100% { background-position: -600px 0 }
}

 /* fade */
.owl-fade-out {
  z-index: 10;
  -webkit-animation: fadeOut .7s both ease;
  -moz-animation: fadeOut .7s both ease;
  animation: fadeOut .7s both ease;
}
.owl-fade-in {
  -webkit-animation: fadeIn .7s both ease;
  -moz-animation: fadeIn .7s both ease;
  animation: fadeIn .7s both ease;
}
@keyframes fadeIn {
  0% { opacity:0; }
  100% { opacity:1; }
}
@keyframes fadeOut {
  0% { opacity:1; }
  100% { opacity:0; }
}

</style>


    <script>
    $(document).ready(function() {

      var owl = $("#owl-demo");
      owl.owlCarousel({
        autoPlay: true ,
        navigation : false,
        singleItem : true,
        pagination: false,
        addClassActive: true,
        transitionStyle : "fade"
      });

    });
    </script>

  </body>
</html>

Форум

Справочник

Discord чат

Курсы javascript