handlebar template does not display the a unislider

Question

I would like to use a handlebar template to reduce the amount of coding needed to render the news on the Bergen swamp web site. (bergenswamp.org) Currently each news item is hardcoded in html. Two news items are displayed at a time and the previous news articles can be view using the slider. I am using the unislider ( http://unslider.com/ ) to slide through the news.

When I add the handlebar template I break the slider. Below is my code. I do not get an error in the console. Can anyone help me figure out what is wrong? Thank you

I have created a news.js template

    var dataObject = {
    news_details:[
        {day2:28, month2:"February", year2:2016, title2:"Committee Meeting", news2:"Zurich Bog Committee Meeting", day1:16, month1:"February", year1:2016, title1:"Trustee Meeting", news1:"Held at Brighton Town Hall, 2300 Elmwood Avenue 7:30PM - 9:00PM"},
        {day2:8, month2:"February", year2:2016, title2:"<a class=\"tab-label\" href=\"http://geneseeorchid.org/geneseeorchid/\">Genessee Region Orchid Society</a>", news2:"President Steve Locke will be speaking at their monthly Meeting", day1:26, month1:"January", year1:2016, title1:"Eastern Massasauga Rattlesnake Conservation", news1:"Presented by John M. Adamski <br> Hosted by<a href=\"http://www.gvaudubon.org/\" class=\"jqmClose\"> Genesee Valley Audubon Society</a> 7:30PM - 9:00PM"},
        {day2:19, month2:"January", year2:2016, title2:"Trustee Meeting", news2:"Held at Brighton Town Hall, 2300 Elmwood Avenue 7:30PM - 9:00PM", day1:1, month1:"January", year1:2016, title1:"New website launched", news1:"The Bergen Swamp Preservation Society is excited to anounce it has a new website."}
    ]
}; // -> End of dataObject

var news = $("#news_list").html();
var h = Handlebars.compile(news);
var content = h(dataObject);

var news_results = document.getElementById("news_output");
news_results.innerHTML = content;

This is the HTML

     <!-- LATEST NEWS -->
     <div id="latest-news">
        <div class="line">
          <h2 class="section-title">Latest News</h2> 
          <div class="margin">
<div class="news-slider">
<ul>
                <div id="news_output">
                    output news here.
                </div>

                <script type="text/x-handlebars-template" id="news_list">
                    {{#news_details}}
                    <li>
                        <div class="s-12 m-6 l-6">
                            <div class="s-12 l-2">
                                <div class="news-date">
                                    <p class="day">{{{day2}}}</p><p class="month">{{{month2}}}</p><p class="year">{{{year2}}}</p>
                                </div>
                            </div>
                            <div class="s-12 l-10">
                                <div class="news-text">
                                    <h4>{{{title2}}}</h4>
                                    <p>{{{news2}}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="s-12 m-6 l-6">
                            <div class="s-12 l-2">
                                <div class="news-date">
                                    <p class="day">{{{day1}}}</p><p class="month">{{{month1}}}</p><p class="year">{{{year1}}}</p>
                                </div>
                            </div>
                            <div class="s-12 l-10">
                                <div class="news-text">
                                    <h4>{{{title1}}}</h4>
                                    <p>{{{news1}}}</p>
                                </div>
                            </div>
                        </div>
                    </li>
                    {{/news_details}}
                </script>
                <script type="text/javascript" src="js/news.js"></script>
            </ul>
            </div>
            <script src="lib/jquery-2.1.4.min.js"></script>
<script src="js/unslider-min.js"></script>

              <script>
                  jQuery(document).ready(function($) {
                      $('.news-slider').unslider();
                  });
              </script>

          </div><!--END Margin -->
        </div> <!--END line -->
     </div> <!--END LATEST NEWS -->

Answer 1

Your HTML markup is not quite right.

Try changing this:

<ul>
  <div id="news_output">
    output news here.
  </div>
  ...
</ul>

... to this:

<ul id="news_output">
  output news here.
</ul>
...

See Unslider docs > Installing & Setting Up > Set up your HTML.

http://unslider.com/

Working example:

http://codepen.io/david_i_smith/pen/YpMLeV?editors=1010#0