Views Slideshow Menu

This module creates the illusion of associating a Views Slideshow slide with a menu item in a designated menu. At the display of each new slide, the class "activeSlideMenu" is removed from the last menu item and applied to the next. In addition, hovering over a menu item causes the slideshow to display the associated slide.

How to Use

1. Create a slideshow using the Views Slideshow module (version 2)
2. Make sure that you have the same number of slides in the show as you have menu items in the menu for the Views Slideshow Menu.
3. Make sure the slides are displayed in the same order as the order of the menu items.
4. Install and enable the Views Slideshow Menu module
5. Click on the gear icon next to "style: Slideshow" on your view edit screen.
6. Set "Slideshow mode" to "menu".
7. Determine whether the menu you want to use is appearing on the page via a menu block or some other way.
   • If it is via a block, then you simply choose which block menu from the drop-down, "Menu block." Make sure that the field "Menu selector" is blank when using this method.
   • But it's also possible that your desired menu got on the page by being put there directly in a template file. This is often the case with Primary links. In that case you need to determine the class or id used for that menu. Under "Menu block" you now choose, "Use selector" and under "Menu selector" you put the id or class of the menu (including the "#" or "."). For example it might be, ".primary-links." The "Menu block" setting must be set to "Use selector" for this setting to take effect.
8. Style the menu item associated with the active slide by applying styling to:

   .activeSlideMenu a

   For example, the snippet here would make the active menu item have a yellow background:

   .activeSlideMenu a {
background-color: yellow;
}

9. clear cache

This module is in development. Please remember to visit the issue queue.

Required Modules

• Views (Version 2)
• Views Slideshow (Version 2)

Please ping co-maintainer Shai Gluskin at Content2zero if you are using this module. We'll feature your web site on this page as an example site.

This module was sponsored by Content2zero.