To customize the image slider. Look at the web/interfaces/default/js/document_scripts.js If you want to customise things in here for just one collection, add a file eg js/custom-document.js into the collection. document_scripts is included in the page by the "javascriptForDocumentView" template, in transform/pages/document.xsl. If you look at this you can see that it calls a template "customJavascriptForDocumentView". Implement this template in your collection to add in your custom javascript file. Add transform/pages/document.xsl to the collection if not already there. Add the following template to it, substituting your collection name for niupepa in the example.

<xsl:template name="customJavascriptForDocumentView">
  <!-- add in the local customisations -->
  <script type="text/javascript" src="sites/{$site_name}/collect/niupepa/js/custom-document.js"><xsl:text> </xsl:text></script>
</xsl:template>

This adds your new javascript file into the page.

Note, you can do this for a site, or for a different interface. Just put the document.xsl and custom-document.js into the appropriate folders for site/interface, and modify the paths accordingly.

Image Slider has a filtering option where you can view just part of the pages. You can choose whether to provide filtering options on the section num or the title by adding the following to custom-document.js:

_filter_on_types = ["sectiontitle", "sectionnum"];

This tells which radio buttons to display. Can leave both there or just have one.

If titles are numeric, add in

_filter_title_numeric = true;

Then titles will be filtered numerically rather than alphabetically. ie 1 will just display page 1 rather than 1, 10, 11 etc. If you only want one filtering method, and you don't want to display the radio button, you can add

var _display_single_filter_on = false;

(gs3.11 nightly from 25.5.2021). This will hide the radio button.

The default display for each page in the slider is the section number followed by the title. To hide the section number you need to add the following to style/style.css in the collection

span.tocSectionNumber {
     display: none;
}

To hide the Title (and only display the number), change span.tocSectionNumber to span.tocSectionTitle in the above code.

You can include the style.css file in the page by overriding the additionalHeaderContent-collection template. Can add this in to a template file, eg into the document.xsl file mentioned above. Or it can be added in to the etc/collectionConfig.xml file. add

<link rel="stylesheet" href="sites/{$site_name}/collect/{$collName}/style/style.css"/>

See web/interfaces/default/transform/layouts/header.xsl for more details about additionalHeaderContent templates.