In this tutorial we will show you how to embed PgwSlider on your crowdfunding website in your custom html block or on your custom pages.
PgwSlider is a responsive slider plugin supported by all browsers, you can check out the documentation at http://pgwjs.com/pgwslider/.
You can simply embed PgwSlider via directive called “webui-pgwslider”. For example, if you want to replace our banner on the home page with a slider, you can follow these steps.
1. Go to Admin Dashboard -> Portal Settings -> Theme Settings, find the home page content section and open the main banner settings.
2. Select HTML Block, and change to the html mode, then you can insert html code for the slider.
3. Insert the html code into the editor, add the directive “webui-pgwslider” into the editor and save the change. The html is basically a list of images, where src is the link to the images.
RECOMMENDED IMAGE DIMENSIONS: 1920x500px
<ul class="pgwSlider" webui-pgwslider>
<li>
<img src="http://placehold.it/1920x500" class="fr-dib" >
</li>
<li>
<img src="http://placehold.it/1920x500" class="fr-dib" >
</li>
<li>
<a href="https://google.ca" target="_blank" >
<img src="http://placehold.it/1920x500" class="fr-dib" >
</a>
</li>
</ul>
NOTE: You can link your image slides to any other link by wrapping the <img> in an <a href=></a> tag, as seen above.
4. Now the slider should be working on your home page, you can also change the default settings of the slider, by adding a “options” attribute to the <ul> tag. For example
<ul class="pgwSlider" webui-pgwslider options="{displayControls:true, displayList:false}">
By default, the custom slider’s controls are disabled. This option will enable them.
You can check the pgwslider documentation to see more options and what can you do with them, under Plugin options.
5. You can also use the slider directive wherever custom html block is allowed.