BUILT-IN-SLIDESHOW
To utilize Epicon's built-in responsive slideshow for any page, please follow the instructions below.
1. Click and drag your images into the Resources area of the project file. The Resources area can be found on the left hand column of RapidWeaver just below your webpages. For proper display, please ensure slideshow images have a width of at least 960px. The height does not require a set measurement, however the height of the actual image will determine the height of the slideshow. All slideshow images should share the same dimensions for proper display).
(Please ensure that the name of your image is all lowercase and does not contain any spaces, characters, or symbols. Failure to do so may prevent the image from displaying upon publishing your site).
2. Please insert the following code in the sidebar area:
<div id="myExtraContent1">
<div class="flexslider">
<ul class="slides">
<li>
<img src="%resource(my-image.jpg)%" />
</li>
</ul>
</div>
</div>
3. Replace the word my-image within the code to the name of the image you would like to have as the first image for your slideshow. You have now just completed your slideshow with 1 image.
4. For each additional image you would like to add to your slideshow, you will need to add the following line of code for each image:
<li>
<img src="%resource(my-image.jpg)%" />
</li>
The code below shows the additional line of code should be placed after the first li sequence, and what your sidebar area should look for a slideshow with two images. You may continue to add images to your slideshow as needed. Please note that images will appear in corresponding order.
<div id="myExtraContent1">
<div class="flexslider">
<ul class="slides">
<li>
<img src="%resource(my-image.jpg)%" />
</li>
<li>
<img src="%resource(my-image.jpg)%" />
</li>
</ul>
</div>
</div>
5. Highlight the entire code in the sidebar area and click Clear Formatting, then Ignore Formatting under Format at the top left of your screen. If this is done correctly, the entire code will have a pink highlight.
6. Check the Display On under Built-In-Slideshow in the Styles section of RapidWeaver.
(There is also an option to choose between a slideshow that will transition images with a fade-in, fade-out feature, or slider effect under Slideshow Transition in the Style Options section)