Implementing a timeline slider in quarto

[ynap0lean]

Description

I am trying to implement a swiper slider for a set of images which automatically on slideshow and have buttons for navigation.

The images are not rendered properly, I think there is a mistake in the way that I define the swiper containers

Here is the code I use :

---
title: "John Doe"
subtitle: Engineer
image-alt: "Smiling, pensive man with dark eyes, glasses, and a short beard wearing a yellow sweater."
about:
  template: trestles
  image-width: 18em
  image-shape: rounded
  id: hero-heading
format: 
  html: 
    page-layout: full
    css: style.css
    include-after-body:
      - text: |
          <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
          <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
          <script>
            document.addEventListener('DOMContentLoaded', function () {
              var swiper = new Swiper('.swiper-container', {
                loop: true,
                autoplay: {
                  delay: 5000,
                  disableOnInteraction: false,
                },
                pagination: {
                  el: '.swiper-pagination',
                  clickable: true,
                },
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                },
                slidesPerView: 1,
                spaceBetween: 30,
              });
            });
          </script>
header-includes: >
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  <link rel="stylesheet" href="../assets/about.css">
  <link rel="stylesheet" href="../assets/profile.css">
resources:
  - ../assets/about.css
  - ../assets/profile.css
---

::: {#hero-heading}
<div class="h1">Hey, I'm happy you're here</div>

Thanks for stopping by!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum magna felis, bibendum congue mi tincidunt vel. Morbi non velit ipsum. Mauris ullamcorper mauris nec vestibulum rhoncus. Cras sed libero neque. Aenean libero felis, hendrerit sed sapien sed, imperdiet mattis lorem. Sed semper commodo venenatis. Aliquam ornare finibus nisi eu mollis. Quisque gravida ipsum vitae hendrerit tristique. Vivamus vitae porta neque.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam fringilla quis nunc suscipit ultrices. Quisque malesuada euismod purus eget rhoncus. Fusce odio libero, tempus id scelerisque sed, luctus sed tellus. Maecenas ante purus, malesuada sit amet mauris sed, vestibulum porta purus. Proin at faucibus elit. Vestibulum egestas hendrerit mauris ac mattis. Aenean ut enim commodo, egestas ante vulputate, bibendum nunc. Nam diam ligula, condimentum quis varius in, volutpat id orci. Aenean maximus massa quis nisl molestie posuere. Sed finibus metus sed nisi molestie maximus. Nam pulvinar nisl quis ornare aliquam. Integer eget ex accumsan arcu ultricies lacinia vel et neque.

Etiam interdum nibh et interdum tempor. Proin blandit lorem a elit rhoncus, ac cursus urna scelerisque. Curabitur vel sapien eu dolor gravida dictum vel et est. Suspendisse mattis sit amet est ut tincidunt. Pellentesque congue volutpat sapien et pellentesque. Duis bibendum, metus eu vulputate laoreet, elit ex lacinia risus, id facilisis sapien tellus id erat. In dictum nunc id libero sagittis, a porta lectus suscipit. Vivamus tortor metus, cursus quis maximus in, tincidunt eget elit. Mauris eget fringilla urna. Sed tellus risus, rhoncus ac tristique eget, facilisis sed metus. Etiam ornare bibendum ultricies.


:::

## About me

::: {.grid}

::: {.g-col-6 #about-me-1}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum magna felis, bibendum congue mi tincidunt vel. Morbi non velit ipsum. Mauris ullamcorper mauris nec vestibulum rhoncus. Cras sed libero neque. Aenean libero felis, hendrerit sed sapien sed, imperdiet mattis lorem. Sed semper commodo venenatis. Aliquam ornare finibus nisi eu mollis. Quisque gravida ipsum vitae hendrerit tristique. Vivamus vitae porta neque.



<ul class="fa-ul">
   <li><span class="fa-li"><i class="fa-solid fa-certificate"></i></span><a href="https://education.rstudio.com/trainers/people/canelon+silvia/">Tidyverse Instructor Certification</a> ∙ RStudio, PBC ∙ 2020</li>
</ul>

:::

::: {.g-col-6 #about-me-2}

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam fringilla quis nunc suscipit ultrices. Quisque malesuada euismod purus eget rhoncus. Fusce odio libero, tempus id scelerisque sed, luctus sed tellus. Maecenas ante purus, malesuada sit amet mauris sed, vestibulum porta purus. Proin at faucibus elit. Vestibulum egestas hendrerit mauris ac mattis. Aenean ut enim commodo, egestas ante vulputate, bibendum nunc. Nam diam ligula, condimentum quis varius in, volutpat id orci. Aenean maximus massa quis nisl molestie posuere. Sed finibus metus sed nisi molestie maximus. Nam pulvinar nisl quis ornare aliquam. Integer eget ex accumsan arcu ultricies lacinia vel et neque.

<ul class="fa-ul">
   <li><span class="fa-li"><i class="fa-solid fa-certificate"></i></span><a href="https://www.med.upenn.edu/mbmi/certificate.html">Certificate in Biomedical Informatics</a> ∙ University of Y ∙ 2019</li>
   <li><span class="fa-li"><i class="fa-solid fa-graduation-cap"></i></span>Ph.D. in Biomedical Engineering ∙ V University ∙ 2018</li>
   <li><span class="fa-li"><i class="fa-solid fa-graduation-cap"></i></span>B.S. in Biomedical Engineering ∙ University of X ∙ 2012</li>
</ul>

:::


:::
<!-- end grid -->

::: {.swiper-container}
<style>
  /* Swiper container styles */
  .swiper-container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .swiper-wrapper {
    display: flex;
  }

  .swiper-slide {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px; /* Adjust based on your design */
    background-color: #f0f0f0; /* Optional: Background color for better visibility */
  }

  /* Swiper button styles */
  .swiper-button-next,
  .swiper-button-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
  }

  .swiper-button-next {
    right: 10px;
  }

  .swiper-button-prev {
    left: 10px;
  }

  /* Pagination styles */
  .swiper-pagination {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
  }
</style>

::: {.image-gallery}

::: {.swiper-container}
:::: {.swiper-wrapper}

:::::: {.swiper-slide}
![Slide 1 Image](images/slide1.png){style="width: 100%; height: auto;"}
:::::

:::::: {.swiper-slide}
![Slide 2 Image](images/slide2.png){style="width: 100%; height: auto;"}
:::::

:::::: {.swiper-slide}
![Slide 3 Image](images/slide3.png){style="width: 100%; height: auto;"}
:::::

:::::: {.swiper-slide}
![Slide 4 Image](images/slide4.png){style="width: 100%; height: auto;"}
:::::

:::::: {.swiper-slide}
![Slide 5 Image](images/slide5.png){style="width: 100%; height: auto;"}
:::::

:::::: {.swiper-slide}
![Slide 6 Image](images/slide6.png){style="width: 100%; height: auto;"}
:::::

::::
<!-- Swiper Pagination -->
<div class="swiper-pagination"></div>

<!-- Swiper Navigation Buttons -->
<div class="swiper-button-next">&#9654;</div> <!-- Right arrow -->
<div class="swiper-button-prev">&#9664;</div> <!-- Left arrow -->
:::

<!-- Include Swiper JS and Initialize Swiper -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var swiper = new Swiper('.swiper-container', {
      loop: true,
      autoplay: {
        delay: 5000,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      slidesPerView: 1,
      spaceBetween: 30,
    });
  });
</script>

[mcanouil]

Unfortunately your post is not legible.
Please read the guidelines provided when opening issues or discussions.

Note that a title is not a post description, it's a title (and titles are supposed to be short and meaningful).
Please edit your post properly to make the code legible and make your overall post/request legible.

Unfortunately, as-is, it's very unlikely you are going to get any help.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

Additionally and if not already given, please share the output of quarto check within a code blocks (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[ynap0lean]

Apologies for the poor formatting. Here is the output of my quarto check

[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.4.553
      Path: C:\Users\Haga Device\AppData\Local\Programs\Quarto\bin
      CodePage: 1252

[>] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[>] Checking LaTeX....................OK
      Tex:  (not detected)

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....OK
      Version: 3.12.0
      Path: C:/Users/Haga Device/AppData/Local/Programs/Python/Python312/python.exe
      Jupyter: 5.7.2
      Kernels: python3

[>] Checking Jupyter engine render....OK

[>] Checking R installation...........(None)

      Unable to locate an installed version of R.
      Install R from https://cloud.r-project.org/

[ynap0lean]

---

This screenshot shows the issue I am facing. The images all render together rather than individually in each page of the slideshow

[mcanouil]

You need to check the HTML you are producing to figure out what is wrong.
You should avoid using raw HTML outside of raw code block, see https://quarto.org/docs/authoring/markdown-basics.html#raw-content.