109 lines
1.7 KiB
Handlebars
109 lines
1.7 KiB
Handlebars
---
|
|
title: Mousewheel Demo
|
|
subTitle: Mousewheel
|
|
nav: demos
|
|
description: Mousewheel usage demo
|
|
sort: 1
|
|
|
|
tags:
|
|
- demo
|
|
- external
|
|
---
|
|
|
|
<div class="owl-carousel owl-theme">
|
|
<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>
|
|
|
|
{{#markdown }}
|
|
### Overview
|
|
|
|
To add mouswheel scrolling just include the fantastic plugin jquery.mousewheel.js created by Brandon Aaron.
|
|
[Link to plugin GitHub page](https://github.com/brandonaaron/jquery-mousewheel)
|
|
|
|
|
|
|
|
### Setup
|
|
```
|
|
var owl = $('.owl-carousel');
|
|
|
|
owl.owlCarousel({
|
|
loop:true,
|
|
nav:true,
|
|
margin:10,
|
|
responsive:{
|
|
0:{
|
|
items:1
|
|
},
|
|
600:{
|
|
items:3
|
|
},
|
|
960:{
|
|
items:5
|
|
},
|
|
1200:{
|
|
items:6
|
|
}
|
|
}
|
|
});
|
|
|
|
owl.on('mousewheel', '.owl-stage', function (e) {
|
|
if (e.deltaY>0) {
|
|
owl.trigger('next.owl');
|
|
} else {
|
|
owl.trigger('prev.owl');
|
|
}
|
|
e.preventDefault();
|
|
});
|
|
|
|
```
|
|
|
|
{{/markdown }}
|
|
|
|
<script src="{{assets}}/vendors/jquery.mousewheel.min.js"></script>
|
|
<script>
|
|
$(document).ready(function(){
|
|
var owl = $('.owl-carousel');
|
|
|
|
owl.owlCarousel({
|
|
loop:true,
|
|
nav:true,
|
|
margin:10,
|
|
responsive:{
|
|
0:{
|
|
items:1
|
|
},
|
|
600:{
|
|
items:3
|
|
},
|
|
960:{
|
|
items:5
|
|
},
|
|
1200:{
|
|
items:6
|
|
}
|
|
}
|
|
});
|
|
|
|
owl.on('mousewheel', '.owl-stage', function (e) {
|
|
if (e.deltaY>0) {
|
|
owl.trigger('next.owl');
|
|
} else {
|
|
owl.trigger('prev.owl');
|
|
}
|
|
e.preventDefault();
|
|
});
|
|
})
|
|
|
|
|
|
</script> |