Microsoft Sharepoint Web Parts

Sharepoint Image Menu Carousel Web Part

Image Menu Carousel Web Part

The Image Menu Carousel Web Part displays the pictures contained in a Sharepoint Picture Library arranged horizontally. The images scroll automatically (as a slide show), via buttons and/or via swipe. The Image Menu Carousel Web Part optionally displays the image title and/or the image description. Each image can optionally be linked in order to create an image menu. The Web Part can be used with Sharepoint 2010,  Sharepoint 2013,  Sharepoint 2016 and Sharepoint 2019 (both Server and Foundation). The following parameters can be configured: Number of images to be displayed can be used as an image carousel or a menu Custom CSS styles Number of words to be displayed per image Rotation speed Product Price      Image Menu Carousel Web Part for SP 2010 30 Day Evaluation Version (Release 1.0.4)  Free Image Menu Carousel Web Part for SP 2013 30 Day Evaluation Version (Release 1.0.4) Free Image Menu Carousel Web Part for SP 2016 30 Day Evaluation Version (Release 1.0.4) Free Image Menu Carousel Web Part for SP 2019 30 Day Evaluation Version (Release 1.0.4) Free Image Menu Carousel Web Part License Key per WFE Server License USD 150.00 Deployment Instructions for SP 2010 Deployment Instructions for SP 2013/2016 Image text displayed below the image ("bottom" layout option) Image text displayed on hover ("on hover" layout option)

Installation Instructions: download the Image Menu Carousel Web Part Installation Instructions (PDF file, see above)  either install the web part manually or deploy the feature to your server/farm as described in the instructions. Configure the following Web Part properties in the Web Part Editor "Miscellaneous" pane section as needed: Site Name: Enter the name of the site that contains the List or Library: - leave this field empty if the List is in the current site (eg. the Web Part is placed in the same site) - Enter a "/" character if the List is contained in the top site - Enter a path if the List in in a subsite of the current site (eg. in the form of "current site/subsite") List Name: Enter the name of the desired Sharepoint Picture Library Example: Menu Images If using the web part as a menu, add a column named "URL" of type "Hyperlink" to your picture library to define the menu links.  View Name: Optionally enter the desired List View of the list specified above. A List View allows you to specify specific data filtering and sorting. Leave this field empty if you want to use the List default view. Display Image Title: either display or hide the image title ("Title" column). Display Image Description: either display or hide the image description ("Description" column). Max. nbr. of words displayed: Enter the maximum number of words to be displayed (description text). Nbr. of Images displayed: Enter the desired maximum number of images to be displayed simultaneously (Default=3) Nbr. of Images to scroll: Enter the desired number of images to be scrolled (Default=1) Image Rotation speed: Enter the desired time in seconds to advance the items. Enter "0" to suppress the item rotation. Show Navigation Buttons: either show or hide the "previous' and 'next' navigation buttons Show Navigation Bullets: either show or hide the navigation bullets Text Layout: either choose to select the text below the image or when hovering over the image Title CSS Style: Enter the desired CSS styles to format the item titles. You can apply multiple CSS styles separated by semicolons. Example: font:11pt Segoe UI;font-weight:bold Description CSS Style: Enter the desired CSS styles to format the item description. You can apply multiple CSS styles separated by semicolons. Example: font:9pt Segoe UI Item Background Color: enter the desired item background color. Either use a HTML color name (as eg. silver) or an RGB value (as eg. #ffcc33) Image Width: enter the desired image width in pixels (Default=150). Image Height: enter the desired image height in pixels (Default=150). Item Height: enter the desired overall item height in pixels when using the "below" text layout to account for the additional space to be used by the text (Default=230). open Links in: select the appropritate method to open the links if the web part is used as a menu. License Key: enter your Product License Key (as supplied after purchase of the Image Menu Carousel Web Part license). Leave this field empty if you are using the evaluation version.

 

Please enter a comment below if you have problems with the installation, want to give feedback or have suggestions for improvements:

User Comments	Post a Comment
Tyler   12/5/2018 16:44  Hi Juerg, I am not seeing the following that is noted to be in the Miscellaneous pane section, it isn't showing up in my webpart edit and also not showing in the screenshot on this site: Web Part CSS Style: Enter the desired CSS styles to format the web part. You can apply multiple CSS styles separated by semicolons. Example: width:640px There is nothing between text layout and title css style... Juerg   12/5/2018 16:59  Tyler, sorry, the information on the page was incorrect (and now has been removed). If you need to style the web part container, please add the below to the web part’s “Options” setting as illustrated by the below example: css=.owl-carousel {background-color:orange;padding:10px} Elaine   1/2/2019 22:46  When adding two instances of the Image Menu Carousel web part to a site page, changing the Item Height on one instance changes it on the other instance as well. Is it not possible to have multiple instances on a single SharePoint site page? Juerg   1/3/2019 15:46  Elaine, we have now released an update (V1.0.4) which supports multiple instances per page. Please re-download the web part and then update the solution. Elaine   1/3/2019 20:36  Hi Juerg, I removed our version 1.0.2 and downloaded the new version. However upon installing, it says it is version 1.0.3 and not 1.0.4. We still have the same issue. We have two instances of the web part on the site and one web part is set to show the title/description on hover and the other web part is set to show the title/description below the web part. If we add to the item height field, to add additional space for the text below the image on web part 1, then web part 2, which is not set to have space below the image, suddenly will. Elaine   1/3/2019 20:36  Hi Juerg, I removed our version 1.0.2 and downloaded the new version. However upon installing, it says it is version 1.0.3 and not 1.0.4. We still have the same issue. We have two instances of the web part on the site and one web part is set to show the title/description on hover and the other web part is set to show the title/description below the web part. If we add to the item height field, to add additional space for the text below the image on web part 1, then web part 2, which is not set to have space below the image, suddenly will. Juerg   1/4/2019 10:12  Elaine, we unfortuantely forgot to update the WSP file in the download package for SP 2013. This has now been fixed, so please re-downlad and then update the web part. Nathan   4/9/2020 23:08  Hi Juerg, The webpart is a life saver! however, i currently have bootstrap installed and once i loaded the webpart on my page, the dropdown for the search isn't working. i'm assuming there's confilct with multiple instances. Secondly, is this by chance responsive? i'm using this to be displayed on mobile and have another AE component for the desktop. I'm currently on SP2010 Juerg   4/13/2020 17:45  Nathan, there might be a conflict because both Bootstrap and the web part are loading the jQuery library. You can configure the web part to not load the jQuery library by adding the below to the web part’s “Options” setting: jquery=none To make the web part responsive, please add the below CSS to the “Options” setting: jquery=none|css=.owl-carousel {width:100% !important} Nathan   4/13/2020 17:54  Hi Juerg, That solved the problem! Thank you so much! Sebastian   11/10/2020 10:07  Hi, is it possible to change the color of the bullets? Juerg   11/10/2020 12:13  Sebastian, yes, just edit the „owl.theme.default.min.css“ file in the folder indicated below:: SP 2016/2019: c:\Program Files\Common Files\microsoft shared\Web Server Extensions\16\TEMPLATE\IMAGES\AEImageCarouselWebpart SP 2013: c:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\IMAGES\AEImageCarouselWebpart Then search for the below string: .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;… and change the "background" color as needed. Sebastian   11/10/2020 15:03  Hi Juerg, do I have to import the changed CSS file somewhere? Juerg   11/10/2020 15:32  Sebastian, no, you can directly edit the CSS file on your Sharepoint web frontend server.