0

hello m I am trying to apply some javascript function to the center element in my owl carousel, the function is working fine on the desktop website because the user can change the center item by clicking on another, but on the phone the user does not have to click on each item, he will prefer to drag the carousel. on drag, the center item is changing but the javascript function does not apply unless the user clicks on the centered item. here is my javascript code: 

$(document).ready(function() { 
var MyDiv1 = document.querySelector('.center> .small-container-Elections');
//some code applied here
});

Shouldnt the center element be automatically selected when changed? why would the user have to tap on it to be reselected?

farah el agha
  • 77
  • 9
  • can you add your code on codepen to see the behaviour – Yasir Mar 01 '18 at 10:28
  • Hi Yasir, well the code has a lot of unnecessary details that does not relate to my issue, my question has nothing to do with the functions inside javascript, I just want to know why the javascript code is not changing the center item on drag, but only on click. – farah el agha Mar 01 '18 at 11:38
  • It can be an event binding issue or something might be breaking the script , it would be easy to identify the issue if it’s available somewhere. – Yasir Mar 01 '18 at 11:41
  • Farah, you are using document.ready event, which only gets triggered when the page is fully loaded. So most likely your code is not being triggered on drag at all. The thing you need, is a owlCarousel onDrag event(not sure about the name). – enf0rcer Mar 01 '18 at 12:29
  • the carousel does not seem to respond to this event, I tested it on logging to the console but the document does not trigger the drag event, here is what I wrote: $(document).on('drag', '.owl-carousel-election>.owl-stage-outer>.owl-stage>.owl-item>div', function() {)); – farah el agha Mar 01 '18 at 12:49

0 Answers0