1
Polymer를 사용하여 사용자 정의 웹 구성 요소에 Owl Carousel을 통합하려고합니다. Owl Carousel이 올바르게 작동하지는 않지만 성공적으로 관리했습니다.Polymer를 사용하여 Owl Carousel을 맞춤 요소로 사용하는 데 문제가 있습니다.
터치 또는 마우스 입력을 사용하여 캐 러셀을 끌면 처음으로 다시 설정됩니다. Polymer 맞춤 요소 외부에서 Owl Carousel을 사용하면 올바르게 작동합니다.
그래서 내가 그 다음 회전 목마가 하나가 어떤 아이디어 이유가 있습니까 항목 1.
으로 재설정 할 마우스 또는 터치를 통해 드래그 할 때, 내 회전 목마의 항목을 5,6,7 참조 탐색 버튼을 클릭 말 이 문제가 발생할 수 있습니까?
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-fab/paper-fab.html">
<link rel="import" href="../paper-shadow/paper-shadow.html">
<!-- jQuery 1.7+ -->
<script src="../../jquery-2.1.1.min.js"></script>
<!-- Include js plugin -->
<script src="../../owl-carousel/owl.carousel.js"></script>
<polymer-element name="my-element">
<template>
<style>
#owl .item{
background: #a1def8;
display: block;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
width: 170px;
height: 200px;
margin: 0 auto;
}
</style>
<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="../../owl-carousel/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet" href="../../owl-carousel/owl.theme.css">
<div id="owl" class="owl-carousel owl-theme"></div>
</template>
<script>
Polymer({
domReady: function() {
$(this.$.owl).owlCarousel({
jsonPath : "../../data.json",
navigation: true,
pagination: false
});
}
});
</script>
</polymer-element>