Featured Categories Widget Carousel - Vanilla Success
<main> <article class="userContent"> <p>The Carousel feature is a great way to add an element of action to your <strong>Higher Logic Vanilla</strong> (<strong>Vanilla</strong>) community. Instead of your Featured Categories displaying as a static row in the widget, you can configure them to horizontally scroll!</p><p>📝 <strong>NOTE</strong>: The automatic horizontal scroll will become user-controlled (via left and right arrows) when the number of display columns is exceeded. Refer to <em>Manual Scrolling</em>, below, to learn more.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://pb-files.s3.amazonaws.com/production/attachments/d3bcb197749a1cf056b22be9207a5a1ff553702a54d3966d4ef9d2f99f461eb7/bdhlpWudty.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://pb-files.s3.amazonaws.com/production/attachments/d3bcb197749a1cf056b22be9207a5a1ff553702a54d3966d4ef9d2f99f461eb7/bdhlpWudty.gif" alt="User: "User: "bdhlpWudty.gif""" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>📝 <strong>IMPORTANT NOTE</strong>: The Carousel feature is <strong>unique to the Featured Categories widget</strong> and <strong>must be enabled</strong>, as described in the next section.</p><p>✔️ <strong>TIP</strong>: Be sure to test the Carousel option on your staging site before committing it to your production site.</p><h2 data-id="enable-the-carousel-feature">Enable the Carousel Feature</h2><p>The Carousel feature is not enabled by default; you must enable it on the Featured Categories widget.</p><p>To enable the Carousel feature:</p><p>1. Navigate to <strong>Dashboard > Settings > Categories</strong>.</p><p>2. Edit the Featured Categories widget.</p><p>3. Scroll down to the <strong>As Carousel</strong> option and toggle it to the right (ON) to enable it.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/AM74ZI3BYHFU/as-carousel-option.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/AM74ZI3BYHFU/as-carousel-option.png" alt="User: "As Carousel option.png"" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>4. Click <strong>Save</strong>.</p><p>The option is enabled and your featured Categories will scroll as a carousel in the widget!</p><h2 data-id="manual-scrolling">Manual Scrolling</h2><p>If the Carousel option is enabled and the number of Featured Categories exceeds the <strong>Max Columns</strong> value, left and right arrows automatically display so that users can manually navigate through the Featured Categories widget tiles.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/V5UNPO2886Z1/carousel-arrows.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/V5UNPO2886Z1/carousel-arrows.png" alt="User: "Carousel arrows.png"" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>The arrows allow horizontal scrolling through the Featured Categories widget tiles.</p><p>📝 <strong>NOTE</strong>: This scrolling does <strong>not</strong> "cycle through" the tiles; when the left-most Featured Category tile is reached (as shown above), the left arrow is disabled. The user must use the right arrow and scroll in the opposite direction through the tiles.</p><h3 data-id="max-columns-setting">Max Columns setting</h3><p>Max Columns is the number of columns of widget tiles to display. When the number of widget tiles exceeds the <strong>Max Columns</strong> value, the widget tiles "line wrap" and display on additional rows.</p><p>⭐️ <strong>EXAMPLE</strong>: If there are five Featured Categories widget tiles and <strong>Max Columns</strong> is set to <strong>3</strong>, tiles 4 and 5 display on a second row.</p><p>📝 <strong>NOTE</strong>: If the Carousel option is enabled, line wrapping does <strong>not</strong> occur. Instead, the widget tiles adopt the horizontal scroll functionality.</p><p>The <strong>Max Columns</strong> value can be set in two places:</p><ul><li>as a "global default" for all Featured Categories widgets, in the <em>Widgets</em> section of the Theme Editor, and</li><li>"per widget" on the Add Pocket page (this setting overrides the global default value).</li></ul><h2 data-id="featured-categories-widget-on-mobile">Featured Categories Widget on Mobile</h2><p>When your Vanilla community is viewed on mobile devices (such as tablets and smartphones), the Featured Categories widget <em>automatically</em>:</p><ul><li>adjusts for the smaller screen widths and</li><li>becomes a carousel that responds to tap and swipe actions on touch screen-enabled devices.</li></ul><p>📝 <strong>NOTE</strong>: On mobile devices, the widget display is not dependent on the <strong>Max Columns</strong> value that influences the default "desktop" display mentioned above in <em>Manual Scrolling</em>.</p> </article> </main>