This tutorial provides the steps to apply CSS-Trick’s Scroll Page Horizontally With Mouse Wheel in Oxygen on a Section having the Gallery component.

Visitors can also scroll left and right using their trackpad or a supporting mouse

Note: Vertical scrolling does not continue past the Section once the horizontal scrolling of the content (the Gallery in this case) has reached the end. If that is needed, follow this tutorial (members-only) instead.

Step 1

Install and activate My Custom Functionality plugin.

Connect to your hosting account using a FTP client and navigate to site’s /wp-content/plugins/my-custom-functionality-master.

Upload jquery.mousewheel.min.js to the plugin’s assets/js directory.

Edit plugin.php and add the following inside the custom_enqueue_files() function:

if ( is_page( 'sample-page' ) ) {
    wp_enqueue_script( 'jquery-mousewheel', plugin_dir_url( __FILE__ ) . 'assets/js/jquery.mousewheel.min.js', [ 'jquery' ], '3.1.13', true );
}

Replace is_page( 'sample-page' ) depending on where you want to load the jQuery Mouse Wheel plugin.

Step 2

In the Oxygen editor and add a Section.

[Optional] Advanced > Size & Spacing > Section Container Width: full-width.

Advanced > Layout > Overflow: scroll.

Add your desired elements that wish to be scrolled horizontally with the mouse wheel inside the Section. In this example, let’s add a Gallery.

Add a Gallery component inside the Section. Browse and select your desired images.

Layout > Image Min Width: 300px (or any other width of your choice).

Advanced > Layout > Display: flex
Flex Wrap: nowrap

Add a Code Block below the Gallery inside the Section.

PHP & HTML:

<?php
	// echo "hello world!";
?>

JavaScript:

(function($) {

	$('#section-307-2').on('mousewheel', function(event, delta) {
		this.scrollLeft -= (delta);

		event.preventDefault();
	});

}(jQuery));

Replace section-307-2 with the ID of your Section.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
magnifiercross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: