究竟是什么标识了网站访问者？

Question

Артём PeGaS

Asked:2020-09-09 00:03:06 +0000 UTC2020-09-09 00:03:06 +0000 UTC 2020-09-09 00:03:06 +0000 UTC

如何单击滚动按钮并滚动 2 个轮播？

772

这里有 2 个轮播：https ://jsfiddle.net/hhnq8a26/1/如何制作，以便当您单击其中一个的上一个按钮（红色背景）时，两个轮播同时滚动。两个轮播可以位于相距很远的不同街区。单击分页按钮并滚动 2 个轮播

		$(document).ready(function() {

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})
		});

.q1 .owl-prev {
  background: red;
}

<div class="owl-carousel q1">
    <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>
<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>

2 个回答

Voted

Denisoed · Answer 1 · 2020-09-09T00:53:17Z

你好 =)

$(document).ready(function() {
let owl = $('.owl-carousel').owlCarousel({
  loop: true
});

let carousel1 = $('.carousel1').owlCarousel({
  loop: true
});

let carousel2 = $('.carousel2').owlCarousel({
  loop: true
});

$(".nav-left-red").click(function () {
  owl.trigger('prev.owl.carousel');
});

$(".nav-left-carousel2").click(function () {
  carousel2.trigger('prev.owl.carousel');
});

$(".nav-right-carousel2").click(function () {
  carousel2.trigger('next.owl.carousel');
});

$(".nav-left-carousel1").click(function () {
  carousel1.trigger('prev.owl.carousel');
});

$(".nav-right-carousel1").click(function () {
  carousel1.trigger('next.owl.carousel');
});
});

第一个轮播：

<div class="owl-carousel q1">
  <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>
<button class=""nav-left-red owl-prev">prev</button>
<button class="nav-right-carousel1">next</button>

第二个轮播：

<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>
<button class="nav-left-carousel2">prev</button>
<button class="nav-right-carousel2">next</button>

款式：

.owl-prev {
  background: red;
}

这个想法应该如你所愿：https ://jsfiddle.net/hhnq8a26/15/

Cheg · Answer 2 · 2020-09-09T01:27:38Z

添加自定义按钮并将触发器绑定到它们就足够了：

var owl = $('.owl-carousel');

owl.owlCarousel({
  loop: true,
  margin: 10,
  nav: false,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
});

$('.go-prev').click(function() {
  owl.trigger('prev.owl.carousel');
});

$('.go-next').click(function() {
  owl.trigger('next.owl.carousel');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet" />
<div class="owl-carousel q1">
  <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>
<div class="owl-carousel q2">
  <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>

<div class="go-prev">prev</div>
<div class="go-next">next</div>

如果还需要同步滚动，例如 ondrag或mousewheel（如果有）事件，我可以推荐Owl Linked插件，它允许您将多个轮播链接在一起：

! function(e, t, o, i) {
  var n = function(t) {
    this._core = t, this._handlers = {
      "dragged.owl.carousel changed.owl.carousel": e.proxy(function(e) {
        e.namespace && this._core.settings.linked && this.update(e)
      }, this),
      "linked.to.owl.carousel": e.proxy(function(e, t, o, i, n) {
        e.namespace && this._core.settings.linked && this.toSlide(t, o, n)
      }, this)
    }, this._core.$element.on(this._handlers), this._core.options = e.extend({}, n.Defaults, this._core.options)
  };
  n.Defaults = {
    linked: !1
  }, n.prototype.update = function(e) {
    this.toSlide(e.relatedTarget.relative(e.item.index))
  }, n.prototype.toSlide = function(t, o, i) {
    var n = (this._core.$element.attr("id"), this._core.settings.linked.split(","));
    "undefined" == typeof i && (i = !0), t = t || 0, i ? e.each(n, function(o, i) {
      e(i).trigger("linked.to.owl.carousel", [t, 300, !0, !1])
    }) : (this._core.$element.trigger("to.owl.carousel", [t, 300, !0]), this._core.settings.current && this._core._plugins.current.switchTo(t))
  }, n.prototype.destroy = function() {
    var e, t;
    for (e in this._handlers) this.$element.off(e, this._handlers[e]);
    for (t in Object.getOwnPropertyNames(this)) "function" != typeof this[t] && (this[t] = null)
  }, e.fn.owlCarousel.Constructor.Plugins.linked = n
}(window.Zepto || window.jQuery, window, document);

var owl = $('.owl-carousel');

owl.owlCarousel({
  loop: true,
  margin: 10,
  nav: false,
  linked: '.q1, .q2',
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
});

$('.go-prev').click(function() {
  owl.trigger('prev.owl.carousel');
});

$('.go-next').click(function() {
  owl.trigger('next.owl.carousel');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet" />
<div class="owl-carousel q1">
  <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>
<div class="owl-carousel q2">
  <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>

<div class="go-prev">prev</div>
<div class="go-next">next</div>

如何单击滚动按钮并滚动 2 个轮播？

Python 3.6 - 安装 MySQL (Windows)

C++ 编写程序“计算单个岛屿”。填充一个二维数组 12x12 0 和 1

返回指针的函数

我使用 django 管理面板添加图像，但它没有显示

这些条目是什么意思，它们的完整等效项是什么样的

浏览器仍然缓存文件数据

在 Excel VBA 中激活工作表的问题

为什么内置类型中包含复数而小数不包含？

获得唯一途径

告诉我一个像幻灯片一样创建滚动的库

如何单击滚动按钮并滚动 2 个轮播？

2 个回答

相关问题