$('.slides-arrow').owlCarousel({
  loop: true,
  autoplay: true,
  autoplayTimeout: 3000,
  autoplayHoverPause: true,
  nav: true,
  margin: 0,
  dots: true,
  mouseDrag: true,
  animateOut: 'fadeOut',
  slideSpeed: 800,
  navText: [
    "<i class='fa fa-angle-left'></i>",
    "<i class='fa fa-angle-right'></i>",
  ],
  items: 1,
});
$('.history').owlCarousel({
  loop: false,
  autoplay: true,
  autoplayTimeout: 4000,
  autoplayHoverPause: true,
  nav: true,
  margin: 30,
  dots: false,
  mouseDrag: true,
  slideSpeed: 500,
  navText: [
    "<i class='fa fa-angle-left'></i>",
    "<i class='fa fa-angle-right'></i>",
  ],
  items: 1,
  responsive: {
    0: {
      items: 1,
      margin: 10,
    },
    480: {
      items: 1,
      margin: 10,
    },
    768: {
      items: 2,
      margin: 20,
    },
    1000: {
      items: 4,
      margin: 40,
    },
  },
});

$('.honour').owlCarousel({
  loop: false,
  autoplay: true,
  autoplayTimeout: 4000,
  autoplayHoverPause: true,
  nav: true,
  margin: 30,
  dots: true,
  mouseDrag: true,
  slideSpeed: 500,
  navText: [
    "<i class='fa fa-angle-left'></i>",
    "<i class='fa fa-angle-right'></i>",
  ],
  items: 1,
  responsive: {
    0: {
      items: 2,
      margin: 10,
    },
    480: {
      items: 2,
      margin: 10,
    },
    768: {
      items: 3,
      margin: 20,
    },
    1000: {
      items: 4,
      margin: 30,
    },
  },
});
$('.owl-album').owlCarousel({
  loop: false,
  autoplay: true,
  autoplayTimeout: 3000,
  autoplayHoverPause: true,
  nav: true,
  margin: 0,
  dots: true,
  mouseDrag: true,
  slideSpeed: 500,
  navText: [
    "<i class='fa fa-angle-left'></i>",
    "<i class='fa fa-angle-right'></i>",
  ],
  items: 1,
  responsive: {
    0: {
      items: 1,
    },
    480: {
      items: 1,
    },
    768: {
      items: 1,
      mouseDrag: true,
    },
  },
});
$('.carousel-news').owlCarousel({
  loop: false,
  autoplay: true,
  autoplayTimeout: 3000,
  autoplayHoverPause: true,
  nav: true,
  margin: 30,
  dots: true,
  mouseDrag: true,
  slideSpeed: 800,
  navText: [
    "<i class='fa fa-angle-left'></i>",
    "<i class='fa fa-angle-right'></i>",
  ],
  items: 2,
  responsive: {
    0: {
      items: 1,
      margin: 10,
    },
    480: {
      items: 2,
      margin: 10,
    },
    768: {
      items: 3,
      margin: 20,
    },
    1000: {
      items: 3,
      margin: 30,
    },
  },
});
$('.carousel-pro').owlCarousel({
  loop: false,
  autoplay: true,
  autoplayTimeout: 5000,
  autoplayHoverPause: true,
  nav: false,
  margin: 20,
  dots: true,
  mouseDrag: true,
  slideSpeed: 800,
  navText: [
    "<i class='fa fa-angle-left'></i>",
    "<i class='fa fa-angle-right'></i>",
  ],
  items: 2,
  responsive: {
    0: {
      items: 2,
      margin: 10,
    },
    480: {
      items: 2,
      margin: 10,
    },
    768: {
      items: 3,
      margin: 20,
    },
  },
});
$('.carousel-pro2').owlCarousel({
  loop: true,
  autoplay: true,
  autoplayTimeout: 2000,
  autoplayHoverPause: true,
  nav: false,
  margin: 20,
  dots: true,
  mouseDrag: true,
  slideSpeed: 800,
  navText: [
    "<i class='fa fa-angle-left'></i>",
    "<i class='fa fa-angle-right'></i>",
  ],
  items: 5,
  center: true,
  responsive: {
    0: {
      items: 2,
      //   margin: 10,
    },
    480: {
      items: 3,
      //   margin: 10,
    },
    768: {
      items: 2,
      //   margin: 20,
    },
  },
});
$('.product-list').owlCarousel({
  loop: false,
  autoplay: true,
  autoplayTimeout: 4000,
  autoplayHoverPause: true,
  nav: true,
  margin: 30,
  dots: true,
  mouseDrag: true,
  slideSpeed: 800,
  navText: [
    "<i class='fa fa-angle-left'></i>",
    "<i class='fa fa-angle-right'></i>",
  ],
  items: 2,
  responsive: {
    0: {
      items: 2,
      margin: 10,
    },
    480: {
      items: 2,
      margin: 10,
    },
    768: {
      items: 3,
      margin: 10,
    },
    1000: {
      items: 3,
      margin: 20,
    },
  },
});
$('.pro-thumb').owlCarousel({
  loop: false,
  autoplay: true,
  autoplayTimeout: 3000,
  autoplayHoverPause: true,
  nav: true,
  margin: 10,
  dots: false,
  mouseDrag: true,
  slideSpeed: 800,
  navText: [
    "<i class='fa fa-angle-left'></i>",
    "<i class='fa fa-angle-right'></i>",
  ],
  items: 2,
  responsive: {
    0: {
      items: 3,
    },
    480: {
      items: 2,
    },
    768: {
      items: 3,
    },
    1000: {
      items: 4,
    },
  },
});
function runCycle(div, duration) {
  var destination = div.width();

  var pos = 0; // 初始位置
  var interval = setInterval(function () {
    pos -= 1; // 每次移动1px
    if (pos < -destination) {
      // 循环点，200px为div的总宽度
      pos = 0;
    }
    div.css('transform', 'translateX(' + pos + 'px)');
  }, duration); // 1毫秒更新一次位置
}
runCycle($('.slides-wrapper'), 20);

$('.carousel-post').owlCarousel({
  loop: false,
  autoplay: true,
  autoplayTimeout: 3000,
  autoplayHoverPause: true,
  nav: false,
  margin: 20,
  dots: true,
  mouseDrag: true,
  slideSpeed: 800,
  navText: [
    "<i class='fa fa-angle-left'></i>",
    "<i class='fa fa-angle-right'></i>",
  ],
  items: 2,
  responsive: {
    0: {
      items: 2,
      margin: 10,
    },
    480: {
      items: 2,
      margin: 10,
    },
    768: {
      items: 3,
      margin: 20,
    },
    1000: {
      items: 4,
      margin: 20,
    },
  },
});

$('.colorful-life').owlCarousel({
  loop: true,
  autoplay: true,
  autoplayTimeout: 3000,
  autoplayHoverPause: false,
  nav: false,
  margin: 20,
  dots: true,
  mouseDrag: true,
  slideSpeed: 800,
  navText: [
    "<i class='fa fa-angle-left'></i>",
    "<i class='fa fa-angle-right'></i>",
  ],
  items: 8,
  responsive: {
    0: {
      items: 1,
      margin: 10,
    },
    480: {
      items: 1,
      margin: 10,
    },
    768: {
      items: 1,
      margin: 20,
    },
  },
});