猫头鹰旋转木马2 - 拖动方向

时间:2015-03-23 15:45:01

标签: javascript jquery owl-carousel

我正在尝试确定滑块的拖动方向,我该如何实现?我需要它,因为我正在同步2个滑块,所以我需要更改同步滑块,只要另一个滑块。到目前为止,只要您使用按钮进行导航,它就会起作用,如下所示:

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

这些事件都在sync1滑块上,所以每当你走一条或另一条路时,它也会以同样的方式移动sync2。我只需要在用户拖动滑块进行更改时执行此操作。我可以听到拖动的事件,但我无法确定它是左转还是右转?

在owl carousel 1中有一个dragDirection属性,但似乎已经消失了。

4 个答案:

答案 0 :(得分:3)

以下是我的解决方案,似乎可以正常使用以下代码 -

$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
    0:{
        items:1
    },
    600:{
        items:3
    },
    1000:{
        items:5
    }
 }
}).on("dragged.owl.carousel", function (event) {
console.log('event : ',event.relatedTarget['_drag']['direction'])
});

JS fiddle

答案 1 :(得分:0)

这是我使用% Begin initialization code - DO NOT EDIT gui_Singleton = 1; gui_State = struct('gui_Name', mfilename, ... 'gui_Singleton', gui_Singleton, ... 'gui_OpeningFcn', @skripsi_OpeningFcn, ... 'gui_OutputFcn', @skripsi_OutputFcn, ... 'gui_LayoutFcn', [] , ... 'gui_Callback', []); if nargin && ischar(varargin{1}) gui_State.gui_Callback = str2func(varargin{1}); end if nargout [varargout{1:nargout}] = gui_mainfcn(gui_State, varargin{:}); else gui_mainfcn(gui_State, varargin{:}); end % End initialization code - DO NOT EDIT % --- Executes just before skripsi is made visible. function skripsi_OpeningFcn(hObject, eventdata, handles, varargin) % This function has no output args, see OutputFcn. % hObject handle to figure % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) % varargin command line arguments to skripsi (see VARARGIN) % Choose default command line output for skripsi handles.output = hObject; % Update handles structure guidata(hObject, handles); % UIWAIT makes skripsi wait for user response (see UIRESUME) % uiwait(handles.figure1); conmysql = database('skripsi_mysql','root','') fetch(conmysql,'select * from data') % --- Outputs from this function are returned to the command line. function varargout = skripsi_OutputFcn(hObject, eventdata, handles) % varargout cell array for returning output args (see VARARGOUT); % hObject handle to figure % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) % Get default command line output from handles structure varargout{1} = handles.output; function code_Callback(hObject, eventdata, handles) % hObject handle to code (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) % Hints: get(hObject,'String') returns contents of code as text % str2double(get(hObject,'String')) returns contents of code as a double code = get(hObject,'String') handles.code = code guidata(hObject,handles) % --- Executes during object creation, after setting all properties. function code_CreateFcn(hObject, eventdata, handles) % hObject handle to code (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles empty - handles not created until after all CreateFcns called % Hint: edit controls usually have a white background on Windows. % See ISPC and COMPUTER. if ispc && isequal(get(hObject,'BackgroundColor'), get(0,'defaultUicontrolBackgroundColor')) set(hObject,'BackgroundColor','white'); end function in_Callback(hObject, eventdata, handles) % hObject handle to in (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) % Hints: get(hObject,'String') returns contents of in as text % str2double(get(hObject,'String')) returns contents of in as a double in = get(hObject,'String') handles.in = in guidata(hObject,handles) % --- Executes during object creation, after setting all properties. function in_CreateFcn(hObject, eventdata, handles) % hObject handle to in (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles empty - handles not created until after all CreateFcns called % Hint: edit controls usually have a white background on Windows. % See ISPC and COMPUTER. if ispc && isequal(get(hObject,'BackgroundColor'), get(0,'defaultUicontrolBackgroundColor')) set(hObject,'BackgroundColor','white'); end function out_Callback(hObject, eventdata, handles) % hObject handle to out (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) % Hints: get(hObject,'String') returns contents of out as text % str2double(get(hObject,'String')) returns contents of out as a double out = get(hObject,'String') handles.out = out guidata(hObject,handles) % --- Executes during object creation, after setting all properties. function out_CreateFcn(hObject, eventdata, handles) % hObject handle to out (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles empty - handles not created until after all CreateFcns called % Hint: edit controls usually have a white background on Windows. % See ISPC and COMPUTER. if ispc && isequal(get(hObject,'BackgroundColor'), get(0,'defaultUicontrolBackgroundColor')) set(hObject,'BackgroundColor','white'); end function fee_Callback(hObject, eventdata, handles) % hObject handle to fee (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) % Hints: get(hObject,'String') returns contents of fee as text % str2double(get(hObject,'String')) returns contents of fee as a double fee = str2double(get(hObject,'String')) handles.fee = fee guidata(hObject,handles) % --- Executes during object creation, after setting all properties. function fee_CreateFcn(hObject, eventdata, handles) % hObject handle to fee (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles empty - handles not created until after all CreateFcns called % Hint: edit controls usually have a white background on Windows. % See ISPC and COMPUTER. if ispc && isequal(get(hObject,'BackgroundColor'), get(0,'defaultUicontrolBackgroundColor')) set(hObject,'BackgroundColor','white'); end % --- Executes on button press in masuk. function masuk_Callback(hObject, eventdata, handles) % hObject handle to masuk (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) a = 'QWERTY'; t = datestr(datenum(now),'HH:MM'); conmysql = database('skripsi_mysql','root','') field = {'Code','In','Out','Fee'} databaru = {a,t,'',} insert(conmysql,'data',field,databaru) data = fetch(conmysql,'select * from data') % --- Executes on button press in camera. function camera_Callback(hObject, eventdata, handles) % hObject handle to camera (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) % --- Executes on button press in keluar. function keluar_Callback(hObject, eventdata, handles) % hObject handle to keluar (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) conmysql = database('skripsi_mysql','root','') sql = ['select * from data where PlatNomor =','''',handles.code,'''']; fetch(conmysql,'select *from data'); data = fetch(conmysql,sql) data.In t1 = datestr(datenum(now),'HH:MM'); t2 = datenum(t1); t3 = datenum(data.in); time_diff = t3 - t2; hours = ceil(time_diff * 24) fee = hours * 5; field = {'JamKeluar','Biaya'}; databaru = {t1,2000}; tablename = 'data'; whereclause = ['where PlatNomor =','''',handles.code,'''']; update(conmysql,tablename,field,databaru,whereclause); set(handles.in,'String',data.in) set(handles.out,'String',data.out) set(handles.fee,'String',data.fee) 获取方向的解决方案。

border-collapse: collapse;

请注意,我的轮播使用相同的relatedTarget.state类。

答案 2 :(得分:0)

这也可以通过比较猫头鹰载物台元素X位置的起始值和当前值来实现:

var owl = $(".owl-carousel").owlCarousel({
    items: 1,
    loop: true,
    autoplay: true
});
owl.on("change.owl.carousel", function (e) {
    if (e.relatedTarget._drag["stage"]["start"].x < e.relatedTarget._drag["stage"]["current"].x) {
       console.log("move right");
    } else {
        console.log("move left");
    }
});

答案 3 :(得分:0)

我必须使用猫头鹰传送带-owl1和owl2。当owl1发生问题时-owl2必须做同样的事情。 解决方案是:

owl1.on("change.owl.carousel", function(event){
    setTimeout(function(){
        if (event.relatedTarget['_drag']['direction'] == "right") {
           owl2.trigger('prev.owl.carousel');
           event.relatedTarget['_drag']['direction'] = null;
        } else {
            owl2.trigger('next.owl.carousel');
        }
    }, 0);
});

在setTimeout函数中检查event.relatedTarget ['_ drag'] ['direction']很重要,因为change.owl.carousel事件会在event.relatedTarget ['_ drag'] ['direction']更改之前触发