Obsidian's presentation mode only shows one page, and you cannot go to the next page.
If you copy the following CSS snippet and put it in the .obsidian -> snippets -> obsidian.css file, a slide bar will appear on the right side where you can slide down for all slides.
▶ obsidian.css
/*
CSS snippet that adds scrollbars on Obsidian slideshow slides in cases where content
would normally overflow and be hidden
*/
/* Apply styles to containing divs for slides */
.slides {
/* Set overflows to allow for auto vertical scroll bar and no horizontal scroll bar */
overflow-x: hidden !important;
overflow-y: auto !important;
/* Enable pointer events so users can click and drag on scrollbars */
pointer-events: auto !important;
}
/* Apply styles that apply directly to slides */
.slides > section {
/* Create flex container to arrange auto-generated elements by Obsidian on each slide */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/*
Snippet to make slideshow slides take up full height of slides' container div
*/
.slides {
height: 100% !important;
}
/*
Snippet to make slideshow slides take up full height of slides' container div
*/
.slides {
height: 100% !important;
}
/*
Stylesheet to change the color of the slide controls to purple to better match the rest of the interface
*/
/* Change progress bar color to be purple */
.progress span {
background-color: var(--text-accent) !important;
}
/* Change default slide control button colors to purple */
.reveal .controls {
color: var(--text-accent)
}
/* Set control hover color to be a slightly lighter purple */
.reveal .controls:hover {
color: var(--text-accent-hover)
}
.slides-close-btn {
color: #48474494;
}
CSS snippet that adds scrollbars on Obsidian slideshow slides in cases where content
would normally overflow and be hidden
*/
/* Apply styles to containing divs for slides */
.slides {
/* Set overflows to allow for auto vertical scroll bar and no horizontal scroll bar */
overflow-x: hidden !important;
overflow-y: auto !important;
/* Enable pointer events so users can click and drag on scrollbars */
pointer-events: auto !important;
}
/* Apply styles that apply directly to slides */
.slides > section {
/* Create flex container to arrange auto-generated elements by Obsidian on each slide */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/*
Snippet to make slideshow slides take up full height of slides' container div
*/
.slides {
height: 100% !important;
}
/*
Snippet to make slideshow slides take up full height of slides' container div
*/
.slides {
height: 100% !important;
}
/*
Stylesheet to change the color of the slide controls to purple to better match the rest of the interface
*/
/* Change progress bar color to be purple */
.progress span {
background-color: var(--text-accent) !important;
}
/* Change default slide control button colors to purple */
.reveal .controls {
color: var(--text-accent)
}
/* Set control hover color to be a slightly lighter purple */
.reveal .controls:hover {
color: var(--text-accent-hover)
}
.slides-close-btn {
color: #48474494;
}
No comments:
Post a Comment