Страница 3 из 6 < 12 3 45 > Последняя »
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Отслеживание второго активного слайда (https://javascript.ru/forum/misc/69573-otslezhivanie-vtorogo-aktivnogo-slajjda.html)

рони 04.07.2017 10:12
owlCarousel css для центрального блока
 
sergey24,
вариант без индекса
центральный блок красный, css строка 42 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css">
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.green.css" />
  <style type="text/css">
    .owl-carousel .item {
    height: 10rem;
    background-color: #4DC7A0;
    padding: 1rem;
    position:relative;
}
.owl-carousel .owl-prev{
   position:absolute;
   top:0; left:0;
   display:block;
   height:99%;
   width:90px;
  background-color: #FF00FF;
}
.owl-carousel .owl-next{
   position:absolute;
   top:0; right:0;
   display:block;
   height:99%;
   width:90px;
    background-color: #FF00FF;
}


.prev:after, .next:after{
  content: attr(class);
}

.prev,.next{
  display: inline-block;
}
.red .item{
   background-color:  #FF0000;
}
  </style>

  <title>Owl Carousel 2.1.0 Responsive by Geyan</title>
<script>

$(function() {
    $(".owl-carousel").owlCarousel({  loop: true,
        startPosition: -1,
        items: 3,
        nav: true,
        navText: ['<img src="/left.png" alt="" />', '<img src="/right.png" alt="" />'],
        dots: false
    }).on("translated.owl.carousel", setCls);

    function setCls() {
        $(".owl-item").removeClass("red").filter(".active").eq(1).addClass("red")
    }
    setCls()
});

</script>


</head>

<body>
  <div class="owl-carousel">
    <div class="item">
        <h4>1</h4>
    </div>
    <div class="item">
        <h4>2</h4>
    </div>
    <div class="item">
        <h4>3</h4>
    </div>
    <div class="item">
        <h4>4</h4>
    </div>
    <div class="item">
        <h4>5</h4>
    </div>
    <div class="item">
        <h4>6</h4>
    </div>
    <div class="item">
        <h4>7</h4>
    </div>
    <div class="item">
        <h4>8</h4>
    </div>
    <div class="item">
        <h4>9</h4>
    </div>
    <div class="item">
        <h4>10</h4>
    </div>
    <div class="item">
        <h4>11</h4>
    </div>
    <div class="item">
        <h4>12</h4>
    </div>
</div>

</body>

</html>

laimas 04.07.2017 10:13
Цитата:
Сообщение от рони
количество блоков всегда разное(клоны слева и справа про запас) , api говорит показываю блок 1 , а по порядку блок в этот момент или 3 или 7
Цитата:
Сообщение от рони
есть!!! всегда можно отследить какой блок показывается и вывести именно для него например описание

Три элемента в отображении:

Если верить первому утверждению, то индекс в данном случае бесполезен, как он будет бесполезен и для второго утверждения.

Если верить второму утверждению, то нет проблем, при этом не важно сколько слайдеров в отображении. То есть то, что первое в блоке, это текущий индекс. Кроме этого есть информация и о страницах, включая и о текущей, не думаю что этого мало и надо шарить фильтром по классу среди всех элементов.

рони 04.07.2017 10:25
Owl Carousel центральный блок и event.item.index
 
laimas,
ок! не очень понимаю ваши обьяснения, но был неправ,
event.item.index использовать можно.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css">
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.green.css" />
  <style type="text/css">
    .owl-carousel .item {
    height: 10rem;
    background-color: #4DC7A0;
    padding: 1rem;
    position:relative;
}
.owl-carousel .owl-prev{
   position:absolute;
   top:0; left:0;
   display:block;
   height:99%;
   width:90px;
  background-color: #FF00FF;
}
.owl-carousel .owl-next{
   position:absolute;
   top:0; right:0;
   display:block;
   height:99%;
   width:90px;
    background-color: #FF00FF;
}


.prev:after, .next:after{
  content: attr(class);
}

.prev,.next{
  display: inline-block;
}
.red .item{
   background-color:  #FF0000;
}
  </style>

  <title>Owl Carousel 2.1.0 Responsive by Geyan</title>
<script>

$(function() {
    $(".owl-carousel").owlCarousel({
        items: 3,
        nav: true,
        navText: ['<img src="/left.png" alt="" />', '<img src="/right.png" alt="" />'],
        dots: false
    }).on("translated.owl.carousel", setCls);

    function setCls(event) {
        var num = event && event.item ? event.item.index + 1 : 1 ;
        $(".owl-item").removeClass("red").eq(num).addClass("red")
    }
    setCls()
});

</script>


</head>

<body>
  <div class="owl-carousel">
    <div class="item">
        <h4>1</h4>
    </div>
    <div class="item">
        <h4>2</h4>
    </div>
    <div class="item">
        <h4>3</h4>
    </div>
    <div class="item">
        <h4>4</h4>
    </div>
    <div class="item">
        <h4>5</h4>
    </div>
    <div class="item">
        <h4>6</h4>
    </div>
    <div class="item">
        <h4>7</h4>
    </div>
    <div class="item">
        <h4>8</h4>
    </div>
    <div class="item">
        <h4>9</h4>
    </div>
    <div class="item">
        <h4>10</h4>
    </div>
    <div class="item">
        <h4>11</h4>
    </div>
    <div class="item">
        <h4>12</h4>
    </div>
</div>

</body>

</html>

laimas 04.07.2017 10:32
Цитата:
Сообщение от рони
не очень понимаю ваши обьяснения
тем не менее это то, о чем я так долго говорил. )

Следующий шаг - все это фигня, на повестке дня стоит слайдер, в котором, при изменении, активный слайд рассыпается на частицы спадающие вниз или рассыпается на частицы сторона противоположная движению с постепенным размытием, аки хвост за кометой. Пока идею не запатентовал можно предлагать решения, если конечно комп от такого слайдера не скиснет. :)

рони 04.07.2017 10:38
Цитата:
Сообщение от laimas
Следующий шаг - все это фигня, на повестке дня стоит слайдер, в котором, при изменении, активный слайд рассыпается на частицы спадающие вниз
пойду поищу на форуме у рони где-то было :lol:

laimas 04.07.2017 10:40
Цитата:
Сообщение от рони
пойду поищу на форуме
уже готово!!! Блин, думал патент продать да самолет купить, опоздал. :)

laimas 04.07.2017 10:44
рони,
кстати, надо обрабатывать событие начала трансляции, убирая класс у активного слайда, иначе "моргает", не кажется?

рони 04.07.2017 10:45
слайдер падающие блоки
 
Цитата:
Сообщение от laimas
на повестке дня стоит слайдер, в котором, при изменении, активный слайд рассыпается на частицы спадающие вниз
 
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    #slider{
      position: relative;
      width: 500px;
      height: 300px;
      background-color: #000000;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    #slider div{
      margin: 0;
      padding: 0;
      position: absolute;
      background-color: #0000FF;
      background-repeat: no-repeat;

    }

 </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
</script>
  <script>
$(function() {
    var slider = $("#slider");
    var height = slider.height();
    var width = slider.width();

    function load_img(next, src, x, y) {
        var w = width / x | 0;
        var h = height / y | 0;
        slider.height(height = h * y);
        slider.width(width = w * x);
        slider.css({
            backgroundSize: width + "px " + height + "px",
            backgroundImage: "url(" + next + ")"
        });
        var n = 0,
            arr = Array(x * y);
        $.each(arr, function(i, el) {
            !n && y--;
            arr[i] = $("<div>", {
                css: {
                    left: n * w,
                    top: y * h,
                    width: w,
                    height: h,
                    backgroundImage: "url(" + src + ")",
                    backgroundPosition: -n * w + "px " + -y * h + "px",
                    backgroundSize: width + "px " +
                        height + "px"
                }
            }).prependTo(slider);
            n = ++n % x
        });
        return arr
    }





    function show(arr) {

$.when.apply(null, arr.map(function(el) {
    var time =  Math.floor(Math.random() * 1000+800);
    return  el.css({
            "z-index": 100
        }).delay(time).animate({
            top: height
        }, {
            easing: "easeOutCirc",
            duration: 1200})
})

      ).done(function() {
         arr.forEach( function(el) {
                el.remove()
        });

      setTimeout(go, 1000);
        });



    }
  var arrSrc = ["http://wallpapershome.ru/images/pages/pic_h/7086.jpg", "http://wallpapershome.ru/images/pages/pic_h/8983.jpg", "http://www.kinomania.ru/images/wallpapers_film/w1920x1080_15585.jpg"];
  function preload(arr,foo)
  { var count = 0;
    function l() {
    if(++count == arr.length) foo();
  }
    return arr.map(function(src) {
    var img = new Image();
    img.onload = l;
    img.src = src;
    return img

})
  }



    function go() {

        var arr = load_img(arrSrc[1].src, arrSrc[0].src, 25, 15);
        show(arr);
         arrSrc.push(arrSrc.shift());
    }
    arrSrc = preload(arrSrc,go);

});
  </script>
</head>

<body>
<div id="slider"></div>

</body>
</html>

рони 04.07.2017 10:48
Цитата:
Сообщение от laimas
кстати, надо обрабатывать событие начала трансляции, убирая класс у активного слайда, иначе "моргает", не кажется?
что за кнопка у ТС неизвестно, display:block может моргать не будет.

laimas 04.07.2017 10:53
рони,
все таки есть надежда прикупить самолет. :D Это не частицы, физика частиц, это иное. Хотя, например, в 3D моделировании частицей может быть и объект. Я имел ввиду элементарные частицы, вплоть до пикселя. Неужто не наблюдали как комета рассыпается? :)

А это просто эффект, но тормоза уже наблюдаются. ;)


Часовой пояс GMT +3, время: 06:17.
Страница 3 из 6 < 12 3 45 > Последняя »
Показывать 40 сообщений этой темы на одной странице