How to add more slide in Infinite Slider

You add more slides when ever you need.

First log into your Weebly and click on “design” and then on “edit html/css” to open the code editor. Here click on “index” to open the HTML editing page for your plugin page.

 

Now open the HTML document of the infinite slider. Here look for the slide code like this:

<!– Slide 5 **********************************************************–>
<div id=”feature_5″>
<divil” style=”background-color: rgb(255, 255, 204);”>infinite-overlay”>{is_slide5:content}</div>
{is_img5:image max-width:”980″ max-height=”400″}
</div>
<!– Slide 6 **********************************************************–>
<div id=”feature_6″>
<divil” style=”background-color: rgb(255, 255, 204);”>infinite-overlay”>{is_slide6:content}</div>
{is_img6:image max-width:”980″ max-height=”400″}
</div>
<!– Slide 7 **********************************************************–>
<div id=”feature_7″>
<divil” style=”background-color: rgb(255, 255, 204);”>infinite-overlay”>{is_slide7:content}</div>
{is_img7:image max-width:”980″ max-height=”400″}
</div>
<!– Slide 8 **********************************************************–>
<div id=”feature_8″>
<divil” style=”background-color: rgb(255, 255, 204);”>infinite-overlay”>{is_slide8:content}</div>
{is_img8:image max-width:”980″ max-height=”400″}
</div>
<!– Slide 9 **********************************************************–>
<div id=”feature_9″>
<divil” style=”background-color: rgb(255, 255, 204);”>infinite-overlay”>{is_slide9:content}</div>
{is_img9:image max-width:”980″ max-height=”400″}
</div>

Each slide is marked with a slide number. So you know what slide the correspond to.

Copy the number of slide section you need and paste directly under:

<!– Slide 4 **********************************************************–>
<div class=”feature regular” id=”feature_4″>
<div class=”infinite-overlay”>{is_slide4:content}</div>
{is_img4:image max-width:”980″ max-height=”400″}
</div>

 

For example, if I want to add 2 more slide, here is how the code will look like:

 

<!– Infinite Slider –>
<div id=”homepage_feature”>

<div class=”arrow arrow_left”><a href=”javascript:void(0);” class=”png”></a></div>
<div class=”arrow arrow_right”><a href=”javascript:void(0);” class=”png”></a></div>

<!– Slide 1 **********************************************************–>
<div class=”feature regular” id=”feature_1″>
<div class=”infinite-overlay”>{is_slide1:content}</div>
{is_img1:image max-width:”980″ max-height=”400″}
</div>

<!– Slide 2 **********************************************************–>
<div class=”feature regular” id=”feature_2″>
<div class=”infinite-overlay”>{is_slide2:content}</div>
{is_img2:image max-width:”980″ max-height=”400″}
</div>

<!– Slide 3 **********************************************************–>
<div class=”feature regular” id=”feature_3″>
<div class=”infinite-overlay”>{is_slide3:content}</div>
{is_img3:image max-width:”980″ max-height=”400″}
</div>

<!– Slide 4 **********************************************************–>
<div class=”feature regular” id=”feature_4″>
<div class=”infinite-overlay”>{is_slide4:content}</div>
{is_img4:image max-width:”980″ max-height=”400″}
</div>

<!– Slide 5 **********************************************************–>
<div class=”feature regular” id=”feature_5″>
<div class=”infinite-overlay”>{is_slide5:content}</div>
{is_img5:image max-width:”980″ max-height=”400″}
</div>

<!– Slide 6 **********************************************************–>
<div class=”feature regular” id=”feature_6″>
<div class=”infinite-overlay”>{is_slide6:content}</div>
{is_img6:image max-width:”980″ max-height=”400″}
</div>

</div>

<!– END Infinite Slider –>

 

Save your change and publish your site.

Tags: