Develop Reference

Add classes with JavaScript or Jquery to HTML Elements on touchscreen slide to the left or right (Mobile Screens)

I'm building a mobile friendly website that essentially has an events page were the user is able to see listed events in a slider container followed by the event description right underneath it. At the moment I have it functioning where the user must click the event image (As seen in the images labeled: 1 & 2) for the description to change to an event's specific description. The issue is when the user scrolls to the next event on a mobile screen, the previous event's description is still posted underneath as the user still hasn't clicked listed event #2.
Is there some sort of function or method in JavaScript or jQuery similar to:
var.addEventListener('click', () => {
var.classList.toggle('class');
});
where rather than a click, I can add or remove classes to an HTML element on a user's detected touch screen slide to the left or right? I've provided images to give you a sense of the UI on a mobile device.
Main Display w/ Main Description
Display swiped to the left w/ description of first event
Desired Output wanted for swipe to the left
Thanks! Much appreciated.
NOTE- Swiper JS is used for the Slider container.

Jquery UI draggable positioning problem inside Reveal.js slide

My jquery draggable is working fine in a plane html page (where reveal.js is not present).
In my reveal js presentation I use embed=true [means I didn't use the full page for each slide. I used only a part of the full page for each slide].
Inside any Reveal js slide the draggable item is not moving with the cursor. It's only accurate when the cursor and draggable item is in it's beginning position. But when I pick draggable item and move cursor, the draggable item moves far from cursor.

Finally I found the bug after three days of panic. The jQuery draggable is fetching problem inside auto scaled elements. And the Reveal.js slides are auto scaled by default. I just put the bellow code inside Reveal.initialize. This solved my problem.
minScale: 1,
maxScale: 1,
By the way, after solving the draggable issue, now all my slides contents changed their sizes and positions. Now I need to fix them.
Happy coding :)

Sliding parallax background images

I have recently worked on a site that is effectively a series of long scrolling pages. It has some large background images the make use of a parallax effect as well as some carousels and regular text content. I am using [slick] by ken wheeler for the carousels. 1 I Live demo site here
My question is, is anyone aware of a way to create a carousel of large images (like the one pictured below)that also makes use of a parallax effect? the effect is currently achieved using the Parallax.js plugin (http://pixelcog.github.io/parallax.js/) but I am open to other plugins/approaches. Thanks in advance for any ideas or pointers in the right direction.
Screenshot of current carousel that I wish to add parallax effect scrolling to:
*edit: I have tried creating multiple slides within the carousel using the parallax.js method to add a background image. However this just keeps the first image used as a constant background and does not slide off screen when the arrow is clicked

How to make skrollr.js works for scroll spy websites?

I Created a website with using scrollify. Can I integrate Skrollr.js with this project for achieving parallax kind of animation on scroll event.
Basically Skrollr js works based on pixel by pixel. While using scrollify js the section are positioned not by pixel.
NOTE:
- on page transition I need animation(page contents sliding from left to right) on the fly.
Please check the below link.
http://projects.lukehaas.me/scrollify/index.html
while scrolling using the above link when the second section appears contents from the second section should slide from left to right.
Thanks,
Gowri Shankar

Is there a way to disable slick slider from autoscrolling when clicked on navigation slider?

There's the slider syncing functionality that I need to use (can be seen here http://kenwheeler.github.io/slick/ when you scroll down a bit), but, as we can see, when you click on the navigation slide, the whole navigation autoslides further, I'd like to disable this functionality so that the main slide changes, but the navigation stays at the same level as it is until I click next or previous arrow.
Is there a setting for that or do I have to change the core to achieve this?
jsfiddle http://jsfiddle.net/9kp36e09/ - so now if you click on navigation, it scrolls, I want to disable that scrolling.

Well, it is not in the documentation, but I fixed it by add the accessibility to false. e.g:
$('#sliders').slick({
accessibility: false
});