Step 1. Add your slideshow images
a) Open your theme tray, find the "I CON" theme icon.
b) Right click (or control + click) on the icon, then select "Reveal theme contents in Finder."
c) Follow the file path images > slideshow. Then drag and drop your images into the slideshow folder.
d) Close it up, you're done with this part.
b) Right click (or control + click) on the icon, then select "Reveal theme contents in Finder."
c) Follow the file path images > slideshow. Then drag and drop your images into the slideshow folder.
d) Close it up, you're done with this part.
Step 2. Add your html slideshow code
Copy and paste the code below into your content or sidebar. Fill in your actual image names.
<div class="slideshow">
<img src="%pathto(images/slideshow/your-image-1.jpg)%" alt="slide 1" />
<img src="%pathto(images/slideshow/your-image-2.jpg)%" alt="slide 2" />
<img src="%pathto(images/slideshow/your-image-3.jpg)%" alt="slide 3" />
</div>
** After pasting, be sure to highlight your code and select Format > Ignore Formatting
<div class="slideshow">
<img src="%pathto(images/slideshow/your-image-1.jpg)%" alt="slide 1" />
<img src="%pathto(images/slideshow/your-image-2.jpg)%" alt="slide 2" />
<img src="%pathto(images/slideshow/your-image-3.jpg)%" alt="slide 3" />
</div>
** After pasting, be sure to highlight your code and select Format > Ignore Formatting
Step 3. Add your slideshow dimensions
Open your page inspector, select your custom css box, then enter the dimensions of your slideshow images. For example:
.slideshow img{ width: 766px; height: 320px; }
After this step, your done! Check out your slideshow.
.slideshow img{ width: 766px; height: 320px; }
After this step, your done! Check out your slideshow.
Advanced - Customize Speed and Duration.
a) Open your theme tray, find the "I CON" theme icon.
b) Right click (or control + click) on the icon, then select "Reveal theme contents in Finder."
c) Open the "js" folder, then open the "function.js" file.
From here, make your adjustments to the "Slideshow Custom" code, not "Slideshow Stock", then save.
When you create your slideshow, change the div class from "slideshow" to "slideshowCustom" as shown below.
<div class="slideshowCustom">
<img src="%pathto(images/slideshow/your-image-1.jpg)%" alt="slide 1" />
<img src="%pathto(images/slideshow/your-image-2.jpg)%" alt="slide 2" />
<img src="%pathto(images/slideshow/your-image-3.jpg)%" alt="slide 3" />
</div>
** After pasting, be sure to highlight your code and select Format > Ignore Formatting Also be sure to change the class name in your custom css box as well.
b) Right click (or control + click) on the icon, then select "Reveal theme contents in Finder."
c) Open the "js" folder, then open the "function.js" file.
From here, make your adjustments to the "Slideshow Custom" code, not "Slideshow Stock", then save.
When you create your slideshow, change the div class from "slideshow" to "slideshowCustom" as shown below.
<div class="slideshowCustom">
<img src="%pathto(images/slideshow/your-image-1.jpg)%" alt="slide 1" />
<img src="%pathto(images/slideshow/your-image-2.jpg)%" alt="slide 2" />
<img src="%pathto(images/slideshow/your-image-3.jpg)%" alt="slide 3" />
</div>
** After pasting, be sure to highlight your code and select Format > Ignore Formatting Also be sure to change the class name in your custom css box as well.