Back to Table of Contents

Working with Nop Anywhere Sliders

Working with Nop Anywhere Sliders information. General information on how to setup your banners and sliders and how to integrate them in your website for best look and feel.

1. Creating a slider

You can create as many sliders as you want and add each to a place where appropriate. You can have more than one slider on a page and each one of them will work independant from the other. Sliders can be used to change images that are used as links meaning that when clicked will redirect to a given url(page) or just use the plugin in order to add banners that are displayed on your website.

In order to create a new slider go to Plugins -> Nop Anywhere Sliders -> Manage Sliders. Click on the Add new slider button as shown on the image below.

When you click the "Add new slider" button the following page will be opened. You can choose from two main slider types - a Nivo slider, a normal carousel 2D slider or a new 3D carousel slider.

The view when the Nivo slider type is selected. It has its own specific settings. The recommended approach is to set Width and Height values to be as the resolution of the images that will be used in the Nivo slider.
One of the most important settings that you need to know is the theme setting. There are three predefined themes - navigation-inside , navigation-outside, navigation-thumbs.
By default the navigation-inside theme is selected and as the name implies it is styled in a way that the control navigation (1, 2, 3 ..) ,which alows changing the current picture and is styled to show oval buttons instead of numbering, will be shown inside the pictures that are sliding. This theme is appropriate for any sliders that are used as banners as no extra space will be shown below the slider image even if you enable the control navigation.
navigation-outside - this theme is styled to position the control navigation just below the sliding images and is appropriate for example for sliders on the home page.
navigation-thumbs - it is appropriate when instead of using oval buttons (or 1, 2, 3 .) for contol naviagtion you want to use thumbnails of the actual pictures. Note that if you chose this theme then you need to set Enable using thumbs for control navigation setting.

When you select Carousel2D slider the following settings will be displayed. These are the default settings for the carousel 2D slider that you can change to fit your needs.

The view when the Carousel2D slider type is selected. It has its own specific settings. The recommended approach is to set Width and Height values to be as the resolution of the images that will be used in the Carousel 2D slider.

When you select Carousel3D slider the following settings will be displayed. These are the default settings for the carousel 3D slider that you can change to fit your needs.

The view when the Carousel3D slider type is selected. It has its own settings. These are sample settings. If you choose to use the Carousel 3D slider the images that you upload will be automatically resized to the Picture Width and Picture Height set.

Here you can setup the slider you want. In the "Settings" tab you can choose the type of slider that best will suit your needs - a carousel 2D slider or a carousel 3D slider. When changing from Carousel2D and Carousel3D you will see that differenent set of settings will appear which are typical for the type of slider chosen. Choose carefully the System Name as this name will be used later if you plan to integrate manually the slider in your website. Once you have set the settings for your slider you can click the Save and Continue Edit button in order to proceed to the images upload and selecting a widget zone if necessary.

2. Adding and editing pictures of a slider

Once you have a new slider created you can upload images that will be used in the slider. There are two options of doing this.

a) If you plan to use the slider just as banners, meaning that the images will not be used as links and they will not redirect to other pages when clicked, but just sliding and attracting the customer attention to an information you want to emphasize on.

To quick add a picture just click the Upload button and choose the image you want. You can set a display order on which the images will be ordered when sliding (if more than one image). The click the Quick Add button and you will see the newly added image appearing on the list above. This will mean that your image is already a part of your slider.

b) Add a picture to the slider with additional data that will be used by the slider as url, display text, alternate text.

In order to do this click the Add a new slider image link on the top right corner and a new page with a detail information for the slider image will be opened.

The create or edit slider image page is shown below.

Here you can upload the image you want to include in your slider and populate the date needed. The Title, Url and Alt (alternate text) properties are localized which is very powerful if you have more than one languages enabled on your site. Thus for example the same image of the slider can redirect to different urls(pages) depending on the language. Once you have uploaded your picture and populate the data you should click the Save or Save and Continue Edit button on the top right corner. If you click the Save button you will be redirected back to the slider details page.

3. Adding a slider to a widget zone

You can add your slider to a widget zone by just a click. For that purpose click on the Widgets tab when editing or creating a slider. You will see the view above. If the slider had already been added to a widget zone you will see a list of all widget zones that the sliders is added on the top of the view. In order to add the slider to a new widget zone you should select the widget zone you want from the dropdown and click the Add new button on the bottom. You will see that the newly added widget zone will immediately be added to the list above. This will mean that the slider is added to the desired widget zone.

4. Editing a slider

Whenever you want you can edit an existing slider quickly and easily. Just go to Plugins -> Nop Anywhere Sliders -> Manage Sliders where you will see a list of all available sliders. In order to edit it just click on the link Edit on the right of the slider you want to edit. Please see the picture above.

5. Editing a picture of a given slider.

The pictures of a given slider can be easily edited anytime you want. When editing a given slider click on the Pictures tab where you will see a list of all pictures added to the given slider. You can easily delete the image by clicking the Delete button. For quick editing the Display Order and Visible properties of a picture click the Edit button next to the Delete one. Thus you can change inline the order of the image in the list of images or whether this image will be included in the slider or not. The property Visible is useful when you want a certain picture to excluded from the slider without the need to delete. Especially useful when you want to include the picture in the slider again at a later stage.
In order for more detailed editing of the picture including changing the url, display text, title, the image itself you will need to click the Edit link in the last column of the given picture. Then the detailed view for creating or editing a picture will be opened. The view is described in p.2 b) above in this document.

6. Manual integration of a slider

Any slider can be also manually integrated meaning that it will not be added to any widget zones but called from a given page directly. This can be especially useful when you want to display the slider on a specific page only i.e. only on the home page. For this purpose you will need to know the System Name of the slider you want to display. The System Name can be viewed in the list of all sliders in Plugins -> Nop Anywhere Sliders -> Manage Sliders page. It is created when the slider is created and can be edited anytime. If there are more than one sliders with a given System Name the first will be used. The manual integration is achieved in the following way. Please see the image below.

Sample #1

In this example a slider with a System Name HomePageSlider3D will be displayed on the home page only just before the HomePageText topic. If there is no slider with the given system name nothing will be displayed. This example will integrate the slider on top of the main column on the home page. For example please see the demo here.

Sample #2

In this sample we will integrate manually the Nop Anywhere Sliders on the home page only in a way that they are displayed above the three column(left, main and right) just before the header menu. You can see a demo here.

Open the _ColumnsThree.cshtml view and add the following section rendering. It is imprtant to add this to the layout that the Index.cshtml view uses which in the default case is the _ColumnsThree.cshtml view.

Open the Index.cshtml view and define the section as described in the image above. This will display the first slider found with a System Name HomePageSlider. Thus the slider will be displayed only on the home page, but above the contents of the home page.