The HTML markup for blank templates must follow the following format to render it correctly:

<div id="headerSlides" class=" headerSlides headerSlidesLoading">
	<ul class="headerSlidesList">
		{* Slide 1 *}
		<li class="headerSlidesItem">
			<div class="layoutBoundary">
				<h2 class="headerSlidesItemTitle">Slide 1 Title</h2>
				<div class="headerSlidesItemContent">
					Slide 1 Content
				</div>
				<div class="headerSlidesItemAction">
					<a href="#" class="button">Slide 1 Action Button</a>
				</div>
			</div>
			<img src="PATH_TO_OPTIONAL_BACKGROUND_IMAGE" alt="" class="heroSlidesItemImage" />
		</li>
		{* Slide 2*}
		<li class="headerSlidesItem">
			<div class="layoutBoundary">
				<h2 class="headerSlidesItemTitle">Slide 2 Title</h2>
				<div class="headerSlidesItemContent">
					Slide 2 Content
				</div>
			</div>
		</li>
		{* Slide 3 and so on... *}
	</ul>
</div>

There maybe instances where you want to show the slider in other pages such as in the Articles list, Members list and among others. The following steps below will guide you on how to achieve that:

1. Determined and take note the Page Identifier where you want to show the slider. For example, if we want to show the slider in the Articles list, its Page Identifier is com.woltlab.wcf.ArticleList. Each pages has unique Page Idetifier.
2. Create a new slider template under the Radiant Template Group (ACP → Customization → Templates → Add Template). Let us call this template pageHeaderSlidesArticles. The code for this template should look like this:

   <div id="headerSlides" class=" headerSlides headerSlidesLoading">
   	<ul class="headerSlidesList">
   		{* Slide 1 *}
   		<li class="headerSlidesItem">
   			<div class="layoutBoundary">
   				<h2 class="headerSlidesItemTitle">Slide 1 Title</h2>
   				<div class="headerSlidesItemContent">
   					Slide 1 Content
   				</div>
   				<div class="headerSlidesItemAction">
   					<a href="#" class="button">Slide 1 Action Button</a>
   				</div>
   			</div>
   			<img src="PATH_TO_OPTIONAL_BACKGROUND_IMAGE" alt="" class="heroSlidesItemImage" />
   		</li>
   		{* Slide 2*}
   		<li class="headerSlidesItem">
   			<div class="layoutBoundary">
   				<h2 class="headerSlidesItemTitle">Slide 2 Title</h2>
   				<div class="headerSlidesItemContent">
   					Slide 2 Content
   				</div>
   			</div>
   		</li>
   		{* Slide 3 and so on... *}
   	</ul>
   </div>
   

   You just need to modify the content of the code above to suit your needs.
3. Go to ACP → Customization → Templates → Radiant and click on the pageHeader template.
4. On the pageHeader template, find this code around LINE 43:

   {if RADIANT_SLIDER}

   Below it, add these lines of code which includes the new slider template (Step 2) on a specific page (Step 1):

   {if $__wcf->getActivePage() != null && $__wcf->getActivePage()->identifier == 'com.woltlab.wcf.ArticleList'}
       {include file='pageHeaderSlidesArticles'}
   {/if}