XS - Newsroom Hero Carousel Template | Communifire Documentation

The XS - Newsroom Hero 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 Hero Carousel template in the Template tab

Template HTML

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

<div class="xs-newsroom-hero-carousel" id="NewsroomHeroCarousel{{WidgetID}}">
{{#each Contents}}
<div class="xs-slide">
    <div class="xs-inner-slide">
        <div class="xs-media">
            <div class="xs-image" style="background-image:url({{ContentImageURL}});">
                <img src="{{ContentImageURL}}" alt="{{{Title}}}" />
            </div>
        </div>
        <div class="xs-info">
            <div class="xs-eyebrow">
                <div class="xs-space">{{{SpaceName}}}</div>
                <div class="xs-date">{{DatePublishedString}}</div>
            </div>
            <h4><a href="{{ContentURL}}" title="{{{Title}}}">{{{Title}}}</a></h4>
            <p class="hide">{{{Summary}}}</p>
            <p><a class="btn btn-success" href="{{ContentURL}}" title="{{{Title}}}">{{{../Resources.GlobalReadMoreText}}}</a></p>
        </div>
    </div>
</div>
{{/each}}
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#NewsroomHeroCarousel{{WidgetID}}").slick({
      autoplay: true,
      autoplaySpeed: 8000,
      adaptiveHeight:true,
      dots: true,
      infinite: true,
      speed: 300,
      slidesToShow: 1,
      arrows: false,
      fade: true,
      cssEase: 'linear',
    });
});
</script>