XS - Newsroom Carousel Template | Communifire Documentation

The XS - Newsroom Carousel template displays content in a modern and sleek carousel. The template is a built-in template and comes with your Communifire site. To use the template:

1. Add a Content List Widget on a Page Builder page
2. Edit the widget
3. Select the XS - Newsroom Carousel template in the Template tab

Template HTML

Below is the HTML of this template, for your reference.

<div class="xs-newsroom-carousel" id="NewsroomCarousel{{WidgetID}}">
{{#each Contents}}
<div>
    <div class="xs-slide">
        <div class="xs-media" style="background-image:url({{ContentImageURL}});"></div>
        <a class="xs-info" href="{{ContentURL}}" title="{{{Title}}}">
            <div class="xs-eyebrow">{{{SpaceName}}}</div>
            <h4>{{{Title}}}</h4>
            <p>{{{Summary}}}</p>
            <time>{{DatePublishedString}}</time>
        </a>
    </div>
</div>
{{/each}}
</div>
<script type="text/javascript">
$(document).ready(function(){
    $("#NewsroomCarousel{{WidgetID}}").slick({
      dots: true,
      infinite: true,
      speed: 300,
      slidesToShow: 1,
      adaptiveHeight: true,
      arrows: true
    });
});
</script>