Скачать или смотреть Mastering FullPage.js: Hide jQuery Slide Arrows on Desktop, Show on Mobile

Learn how to cleverly manage jQuery slide arrows in FullPage.js for an enhanced mobile experience while keeping them hidden on desktop.
---
This video is based on the question https://stackoverflow.com/q/71465752/ asked by the user 'Walkie_UA' ( https://stackoverflow.com/u/18420424/ ) and on the answer https://stackoverflow.com/a/71466273/ provided by the user 'mplungjan' ( https://stackoverflow.com/u/295783/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Hide jquery slide arrows and make appear in mobile version of website

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Mastering FullPage.js: Hide jQuery Slide Arrows on Desktop, Show on Mobile

Creating an engaging user experience across different devices can be challenging. One common question many web developers face is how to manage UI components effectively based on the device being used. In this post, we will address how to hide jQuery slide arrows on desktop while ensuring they are prominently displayed in the mobile version of your website. This solution primarily focuses on using FullPage.js, a popular jQuery plugin designed for creating full scrolling websites.

The Problem

As you may know, FullPage.js comes equipped with control arrows by default, which allow users to navigate through slides easily. However, in certain layouts, particularly those designed for desktop, these arrows may be unnecessary or disruptive. The challenge arises when you wish to:

Hide these control arrows on desktop devices.

Make sure they are visible on mobile devices where slide navigation is essential.

You might be familiar with the controlArrows: false option offered by FullPage.js, but this approach removes arrows from both desktop and mobile views. Thankfully, there are a couple of effective methods to manage this scenario.

Solution Overview

Method 1: Using CSS Media Queries

One straightforward way to control the visibility of the slide arrows is to leverage CSS Media Queries. This approach allows you to specify styles that apply only under certain conditions (like device width). Here’s how you can do it:

Steps:

Add a CSS Rule to hide control arrows for desktop devices. You can set a minimum width of your choice (in this case, 641 pixels).

[[See Video to Reveal this Text or Code Snippet]]

Place this CSS in your stylesheet to ensure it is applied on desktop views, while mobile devices displaying below 640 pixels will default to showing the arrows.

Method 2: Conditional JS Configuration

If you prefer a more dynamic solution, you could use JavaScript to programmatically determine whether to show or hide the arrows. This approach can help configure the arrows based on the viewport width.

Steps:

Use Media Queries in JavaScript as follows:

[[See Video to Reveal this Text or Code Snippet]]

Integrate this snippet into your FullPage.js configuration. This line checks whether the viewport width is 700 pixels or less; if it is, the arrows will be enabled. Otherwise, they will stay hidden.

Conclusion

By following either method outlined above, you can ensure your website provides a streamlined experience for users on different devices. Hiding jQuery slide arrows on desktop while making sure they appear on mobile not only enhances your site’s aesthetic but also its usability.

Final Thoughts

Implementing responsive design is vital for modern web applications. Understanding how to control UI elements dynamically based on the device makes a significant difference in user experience. Choose the method that best fits your development style and ensure your audience can navigate effortlessly, irrespective of the device they're using.

Thanks for reading! For more tips and tricks on web development, don't forget to subscribe to our blog!