Documents Live, a web authoring and publishing system
If you see this, something is wrong
Table of contents
First published on Friday, Sep 12, 2025 and last modified on Sunday, Feb 22, 2026 by François Chaplais.
1 Introduction
A slider is a common widget in web pages. It is similar to slide shows and computer generated presentations. Let us start with an example (use the arrows to navigate between slides).
Summary 1
A Documents Live slider can have mixed content. It is a high level component, that can, for instance, contain theorems such as this one.
The slider is created by using a slider environment. Inside a slider, each slide is delimited by a slide environment. The Documents Live code editor has dedicated commands to create sliders easily.
This slider has three slides. Here is the slider outline.
- This first slide, which is a short summary of sliders abilities.
- A ChatGPT text that links traditional slide shows to computer generated presentations.
- A complex layout with two columns.
2 The example explained
Here is the code for the example.
\begin{slider}
\begin{slide}
\begin{summary}
A Documents Live slider can have mixed content. It is a high level component, that can, for instance, contain theorems such as this one.
The slider is created by using a slider environment. Inside a slider, each slide is delimited by a slide environment. The Documents Live code editor has dedicated commands to create sliders easily.
\end{summary}
This slider has three slides. Here is the slider outline.
\begin{list}
\item This first slide, which is a short summary of sliders abilities.
\item A ChatGPT text that links traditional slide shows to computer generated presentations.
\item A complex layout with two columns.
\end{list}
\begin{figure}
\caption{A presentation using computer sofware}
\includegraphics{shot-of-a-businesswoman-giving-a-presentation.png}
\end{figure}
\end{slide}
\begin{slide}
\Large{\bf{What ChatGPT says about sliders}}
... ChatGPT text ... \marginpar{The initial prompt was ``Explain the relation between a traditional slide show with classic photo slides and the web slider widget''. It was then enhanced by AI before submission to ChatGPT.}
... more ChatGPT text ...
\end{slide}
\begin{slide}
\begin{columns}
\begin{col}[8]
\begin{style}
\background{black}
\textcolor{white}
\padding{15}
\border{rounded}
\end{style}
... Lorem text ...
\end{col}
\begin{col}[4]
\begin{card}
\begin{header}
A complex layout in a Documents Live slide.
\end{header}
\begin{body}
This slide has two columns with proportions 2/3 - 1/3.
The first column is styled to have a white dummy text on a black background, and rounded corners. Some padding is also applied.
The second column contains a card widget, with a header and body.
\end{body}
\end{card}
\end{col}
\end{columns}
\end{slide}
\end{slider}3 Summary
Summary 2
A Documents Live slider can have mixed content. It is a high level component, that can, for instance, contain theorems such as this one.
The slider is created by using a slider environment. Inside a slider, each slide is delimited by a slide environment. The Documents Live code editor has dedicated commands to create sliders easily.