[owlCarosel] ver 1.2.1 mouse event detect! 마우스 이벤트 감지

회사에서 그지 같은 오래된 코드를 줬다.

문제는 레퍼런스도 적용이 안될만큼 오래된 코드...

공식문서 봐도 이벤트가 안 먹힌다.

 

https://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/

Owl Carousel

How To Use

1. Load jQuery and include Owl Carousel plugin files

To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included.

<!-- Basic stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
 
<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
 
<!-- You can use latest version of jQuery -->
<script src="jquery-1.9.1.min.js"></script>
 
<!-- Include js plugin -->
<script src="assets/owl-carousel/owl.carousel.js"></script>

2. Set up your HTML

You don't need any special markup. All you need is to wrap your divs inside the container element <div class="owl-carousel">. Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file.

<div class="owl-carousel owl-theme">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
...
</div>

3. Call the plugin

Now call the Owl initializer function and your carousel is ready.

$(document).ready(function() {
 
	$(".owl-carousel").owlCarousel();
 
});

Customizing

1. Options

All of the options below are available to customize Owl Carousel.

VariableDefaultDescription

slideSpeed	200	Slide speed in milliseconds
paginationSpeed	false	Pagination speed in milliseconds
autoPlay	false	Auto play per slide. Change to any integrer for example "paginationSpeed : 8000" to play every 8 seconds
goToFirst	true	Slide to first item if autoPlay reach end
goToFirstSpeed	1000	Slide speed of goToFirst option in milliseconds
navigation	false	Display "next" and "prev" buttons. Fully customizable. Note that for better control over navigation the div with arrows and pagination is outside your carousel wrapper
navigationText	["prev","next"]	You can cusomize your own text for navigation. To get empty buttons use false : "navigationText : false"
pagination	true	Show pagination.
paginationNumbers	false	Show numbers inside pagination buttons
responsive	true	You can use Owl Carousel on desktop-only websites too! Just change that to "false" to disable resposive capabilities
items	5	This variable allows you to set the maximum amount of items displayed at a time with the widest browser width
itemsDesktop	[1199,4]	This allows you to preset the number of slides visible with a particular browser width. The format is [x,y] whereby x=browser width and y=number of slides displayed. For example [1199,4] means that if(window<=1199){ show 4 slides per page} Alternatively use "itemsDesktop: false" to override these settings. To fully understand how it works check my Custom Demo
itemsDesktopSmall	[979,3]	As above.
itemsTablet	[768,2]	As above.
itemsMobile	[479,1]	As above

2. Defaults

Carousel default settings

$(".owl-carousel").owlCarousel({
 
    //Basic Speeds
    slideSpeed : 200,
    paginationSpeed : 800,

    //Autoplay
    autoPlay : false,
    goToFirst : true,
    goToFirstSpeed : 1000,

    // Navigation
    navigation : false,
    navigationText : ["prev","next"],
    pagination : true,
    paginationNumbers: true,

    // Responsive
    responsive: true,
    items : 5,
    itemsDesktop : [1199,4],
    itemsDesktopSmall : [980,3],
    itemsTablet: [768,2],
    itemsMobile : [479,1]
 
})

3. API

To use Owl Carousel API use delegate function, as carousel initializes after 200 milliseconds.

//Initialize Plugin
$(".owl-carousel").owlCarousel()
 
//get carousel instance data and store it in variable owl
var owl = $(".owl-carousel").data('owlCarousel');
 
//Public methods
owl.next() // Go to next slide
owl.prev() // Go to previous slide
owl.goTo(x) // Go to x slide
 
owl.update() // Update Slide
 
owl.buildControlls() // Build Controlls
owl.destroyControlls() // Remove Controlls
 
owl.play() // Autoplay
owl.stop() // Autoplay Stop
 
//more to come...

위 문서 보고 기본 뼈대를 잡았다.

 

하지만 이벤트는 안먹힌다...

원래는 이게 먹혀야한다.

var owl = $('.owl-carousel');
owl.owlCarousel();
// Listen to owl events:
owl.on('changed.owl.carousel', function(event) {
    ...
})

하지만 먹히지 않으니 위에 문서를 보고 이벤트를 감지해야했다.

여기서 중요한 게

1. var owl = $(".owl-carousel").data('owlCarousel'); <= 이부분이었다.

이부분을 console.log를 찍으니.

$elem: n.fn.init [div#owl-promo.owl-carousel.owl-theme, context: div#owl-promo.owl-carousel.owl-theme]
$owlItems: n.fn.init(4) [div.owl-item, div.owl-item, div.owl-item, div.owl-item, prevObject: n.fn.init(1), context: div#owl-promo.owl-carousel.owl-theme, selector: '.owl-item']
$owlWrapper: n.fn.init [div.owl-wrapper, prevObject: n.fn.init(1), context: div#owl-promo.owl-carousel.owl-theme, selector: '.owl-wrapper']
$userItems: n.fn.init(4) [div.item, div.item, div.item, div.item, prevObject: n.fn.init(1), context: div#owl-promo.owl-carousel.owl-theme]
apStatus: "play"
browser: {support3d: true, isTouch: undefined}
checkVisible: null
currentItem: 2 // 현재 위치
dragDirection: "left"
ev_types:
end: "touchend.owl touchcancel.owl mouseup.owl" // 이벤트 끝 부분
move: "touchmove.owl mousemove.owl" // 중간
start: "touchstart.owl mousedown.owl" // 시작
[[Prototype]]: Object
isCss3Finish: true
isCssFinish: true
itemWidth: 1903
itemsAmount: 4
maximumItem: 3
maximumPixels: -5709
newPosX: -2550
newPosY: -21
newRelativeX: -647
onstartup: false
options: {items: 1, itemsCustom: false, itemsDesktop: false, itemsDesktopSmall: false, itemsTablet: false, …}
orignalItems: 1
owl: {userOptions: {…}, baseElement: n.fn.init(1), userItems: n.fn.init(4), owlItems: n.fn.init(4), currentItem: 2, …}
pagesInArray: []
playDirection: "next"
positionsInArray: (5) [0, -1903, -3806, -5709, -7612]
prevArr: [2]
prevItem: 1
resizer: ƒ ()
userOptions: {slideSpeed: 300, pagination: false, paginationSpeed: 400, singleItem: true}
visibleItems: [2]
wrapperOuter: n.fn.init [div.owl-wrapper-outer, prevObject: n.fn.init(1), context: div#owl-promo.owl-carousel.owl-theme, selector: '.owl-wrapper-outer']
wrapperWidth: 0
[[Prototype]]: Object // 함수부분

이렇게 나오더라.

 

var owl = $('.owl-carousel');
owl.owlCarousel();
// Listen to owl events:
owl.on('touchend.owl touchcancel.owl mouseup.owl', function(event) {
    ...
})

이렇게 바꾸니 먹힌다.!!!

 

점점 공식문서가 없는 상태에서 라이브러리를 분석하면서 코딩하는 과정이 많아지는데,

정말 쓰레기같구나....