Web design trends are shifting towards “horizontal scrolling” sections, areas where content flows sideways rather than vertically. This mimics the natural swipe behavior of mobile devices but can feel clunky on desktop if users are forced to drag with a mouse. You want a smooth, intuitive horizontal scroll section that works with a mousewheel, just like a native OS window, without writing custom JavaScript code.

To create this effect, enable the “Free Mode” and “Mousewheel Control” options in Div Render Container Slider for Elementor. Instead of snapping rigidly from slide to slide, the content flows freely, and users can scroll through it using their vertical mouse scroll wheel. This creates a modern, high-end feel often seen on portfolio sites and Apple-style product pages.

Step 1: Preparing the Container for Horizontal Scrolling

  1. Create a Parent Container and add your content items (images, project cards, etc.) inside it.
  2. For a true horizontal scroll look, you often want items to go off-screen. Add enough items so that they exceed the width of the screen.

Step 2: Enabling Horizontal Slider Mode

  1. Select the Parent Container.
  2. In Layout > Slider Mode:
    • Enable Slider Mode: Yes.
    • Direction: Ensure this is set to Horizontal (default).
    • Slides Per View: Set this to Auto if available, or a specific number like `2.5` or `3.5`. Using a decimal (like .5) is key, it cuts the last visible item in half, visually signaling “there is more content here.”

Step 3: Activating Free Mode for Smooth Scrolling

Standard sliders “snap” to the nearest slide when you stop dragging. For a natural scroll feel, we want to disable this snapping.

  1. Go to the Advanced section (inside the Slider Mode area).
  2. Toggle Free Mode to Yes.
    • Effect: Now, when you drag the slider, it coasts to a stop based on momentum, rather than jerking to a specific slide position.

Step 4: Enabling Mousewheel Navigation

This is the critical step for desktop usability.

  1. Go to the Navigation section.
  2. Toggle Mousewheel Control to Yes.
    • Effect: When a user’s mouse is over this container, scrolling down on their mouse wheel will move the content right. Scrolling up moves it left. This transforms the vertical scroll energy into horizontal movement naturally.

Step 5: Adding a Visual Scrollbar Indicator

To give users a visual cue that this section is scrollable:

  1. In the Navigation section, toggle Scrollbar to Yes.
  2. A progress bar will appear at the bottom of the container, showing how far along the track the user has scrolled.

Pro Tips for Optimizing Horizontal Scrolling

  • Hide the Arrows: Since you are using Free Mode and Mousewheel, “Next/Prev” arrows often feel redundant and clunky. Go to Navigation and set Navigation Arrows to No.
  • Gap Management: In Slider Mode > Space Between, set a consistent gap (e.g., 30px). This empty space is crucial for the “horizontal gallery” aesthetic.
  • Touchpads: This setup works natively with laptop trackpads (two-finger swipe), providing an exceptionally smooth experience for MacBook and Windows laptop users.