Slider Widgets Category Slider Estimated reading: 7 minutes 11 views Make your website categories clear and easy to navigate with a fully customizable Category Slider. In just a few clicks, you can select a layout that matches your style. Choose exactly what to display and arrange your categories in the perfect order. Every setting is in your control. From icons and titles to counters and slogans, your slider works exactly the way you want. Visitors will experience smooth and organized browsing. Your content will be showcased clearly and professionally. Requirement Elementor (Page Builder) Animations Addons (Our Plugin) Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start. How To Activate Category Slider Go to your WordPress Dashboard. Click on Animation Addons. Head to the Widgets Tab. Under Slider, toggle on Category Slider. Note: Make sure your posts are already organized into categories in your WordPress dashboard. Step 1: Set Layout and What to Show “First, click the ‘+’ icon, type Category Slider in the search bar, and select it Once you click on the Category Slider, you will see three functions: Layout, Query, & Slider Settings. Let’s start with Layout. Layout Layout One and Two control how slider items are displayed. Layout One shows the default clean slider, while Layout Two gives an alternative design. For example, Layout One is selected here, but you can choose either option as you like. Category Content Category Content lets you choose what to show, like title, icon, number, description, or slogan, for each category in the slider. In this example, it shows the title first, then the icon, number, description, and slogan. However, you can customize it based on your choice. Article Text In the Article Text, you can choose what text to display on your category slider. For example, here it says ‘Post’. However, you can write any text you want to show in the category slider. Show Icon: It lets you choose whether to show your icon or not. Here, Show is selected, but you can also keep it hidden if you want. Show Counter: You can choose to show or hide your counter. It is currently set to Show, but you can also hide it. Show Slogan: You can show or hide your slogan. Here, Show is selected.Show Description: You can show or hide your Description. Here, Show is selected. Step 2: Filter and Arrange Categories Query controls which categories appear in the slider. You can choose all categories, specific ones, or filter them by ID, order, or number of items. Query Show Category: You can leave the category blank or add a category number if you wish. For example, here it is left blank. Order By: It controls how the slider items are arranged. You can choose from three options: Date, Title, or Random. Here, Date is selected, but any option can be chosen. Order: ASC and DESC decide the order of categories. ASC shows them from first to last, and DESC shows them from last to first. Here, DESC is selected, but you can pick either option. Show Empty Category: You can choose to show or hide the ‘Show Empty Category’ option. Here, ‘No’ is selected, but you can pick either option. Show Child Categories: You can show or hide your ‘Show Child Categories’. Here, ‘Hide’ is selected, but you can pick either option based on your choice. Step 3: Configure Slider Display Options Here you can adjust how the slider looks and moves. Control its speed, spacing, navigation, and pagination to match your design style. Slides Settings Slides to Show Slides to Show determines how many category items appear in the slider at once. For example, here it is set to 3, but you can choose any number. Autoplay Choose Yes to make the slider move automatically, or No to keep it static until manually navigated. Autoplay delay It defines how long (in milliseconds) each slide stays before moving to the next. For example, here it is set to 3000, but you can set any value you prefer. Autoplay Intersection “If you select Yes, autoplay pauses when the slider is not visible on the screen. If you select No, it keeps sliding even when hidden. Here, Yes is selected, but you can choose either option. Allow Touch Move Yes allows users to swipe on touch devices, while No disables swiping. Here, No is selected, but you can choose either option. Loop Yes makes the slider repeat endlessly, No stops it at the last slide. Here, ‘Yes’ is selecte,d but you can choose either option as per your choice. MouseWheel If you choose Show, users can scroll through slides using the mouse wheel. If you choose Hide, this feature is disabled. Here, Mousewheel is set to Hide, but you can change it to Show if you like. Animation Speed Animation speed controls how fast the slides move when sliding (in milliseconds). For example, here is set the value to 500, but you can set any value based on your choice. Space between Sets the gap (in pixels) between each slide. Here, the space is set to 20, but you can set any value as per your choice. Enable Grid If you choose Show, slides are organized into rows and columns. If you choose Hide, slides stay in a single row. For example, here ‘Hide’ is selected, but you can choose either option. Navigation If you choose Show, arrows appear. If you choose Hide, arrows disappear. For example, here is selected to ‘Show’. Previous Arrow Icon Let you choose the icon for the “previous” arrow. For example, here is to keep it default. However, you can upload any custom icon as per your choice. Next Arrow Icon Let you choose the icon for the “next” arrow. For example, it is also set to default. Pagination If you choose Show, pagination dots appear below the slider. If you choose Hide, the dots are removed. In this example, Show is selected, but you can choose either option. Pagination Type It lets you choose how pagination looks with a bullet as dots, a fraction as numbers, a progress bar as a loading line, or a fraction progress combining numbers and a progress line. For example, ‘Bullet’ is selected here, but you can choose either option. Left/ Right Direction Sets the slider’s direction, moving horizontally from left to right or right to left. In this example, ‘Left’ is selected. Lastly, customize the category and icon size in the Style section to suit your preference. Final Result You Did It Your Category Slider is ready and working on your website. You chose a layout, picked what to show, arranged your categories, and set the slider options. Now your visitors can see your content organized and easy to navigate. Check how it moves, try the arrows and pagination, and make sure everything looks just the way you want. You have full control to change layouts, icons, text, or slider settings anytime. Your website categories are now clear, organized, and easy for everyone to explore. Additionally, if you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help. View Live Demo
