Help editing JS slider

Jfit

New Member
I'm working off a template (http://www.templatemonster.com/free-templates/free-website-template-jquery-slider-fitness-club.php) using Kompozer and was wondering if anyone could help with an issue I'm having. On the home page, if I try to edit the text in the slider, I lose the buttons that switch between the slides.

The images and text do not actually appear in the visual part of Kompozer, so I go into the html to edit the text. Whenever I change the text, the entire code gets changed and I lose the buttons. This is the code before I edit:

<section id="content">
<div class="container_12">
<div class="grid_12">
<div class="slider">
<ul class="items">
<li><img src="images/slider-1.jpg" alt="">
<div class="banner">
<p class="font-1">Special<span>Program</span></p>
<p class="font-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.</p>
<a href="#">Read More</a>
</div>
</li>
<li><img src="images/slider-2.jpg" alt="">
<div class="banner">
<p class="font-1">Get Free<span>Training</span></p>
<p class="font-2">Liquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
<a href="#">Read More</a>
</div>
</li>
<li><img src="images/slider-3.jpg" alt="">
<div class="banner">
<p class="font-1">Join<span>our team</span></p>
<p class="font-2">Liquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
<a href="#">Read More</a>
</div>
</li>
</ul>
<div class="pagination">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
</div>

After I edit the text, like "Special Program" or any of the Lorem Ipsum, I lose the <a href="#"></a> tags under <div class="pagination"> and the buttons disappear. Help?
 
Top