Skip to contents

This is a demo of the function pixcarousel(). This creates a horizontal carousel/slider gallery. The mandatory input required is one or more paths/URLs to image(s).

Code
library(pixture)
paths <- c(
  "https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  "https://images.pexels.com/photos/7604425/pexels-photo-7604425.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  "https://images.pexels.com/photos/4666748/pexels-photo-4666748.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  "https://images.pexels.com/photos/4932184/pexels-photo-4932184.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  "https://images.pexels.com/photos/4210900/pexels-photo-4210900.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  "https://images.pexels.com/photos/3126574/pexels-photo-3126574.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  "https://images.pexels.com/photos/167699/pexels-photo-167699.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  "https://images.pexels.com/photos/1376201/pexels-photo-1376201.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  "https://images.pexels.com/photos/7919/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  "https://images.pexels.com/photos/2437291/pexels-photo-2437291.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  "https://images.pexels.com/photos/1679772/pexels-photo-1679772.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  "https://images.pexels.com/photos/1183099/pexels-photo-1183099.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  "https://images.pexels.com/photos/1813513/pexels-photo-1813513.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  "https://images.pexels.com/photos/931018/pexels-photo-931018.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  "https://images.pexels.com/photos/267074/pexels-photo-267074.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  "https://images.pexels.com/photos/4622893/pexels-photo-4622893.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
)

Clicking on the image opens up the full image in a lightbox. The whole gallery can be browsed through in the lightbox using left or right arrow keys. To customize the lightbox, see the lightbox vignette.

1 Captions

Optionally, captions can be added to the images which are visible when viewed in the lightbox.

Code
captions <- c(
  "A beautiful night sky filled with stars.",
  "A dense forest with tall trees.",
  "A shark swimming in the ocean.",
  "Coconut trees swaying in the breeze.",
  "A vibrant field of flowers in bloom.",
  "A vast field under a clear sky.",
  "A misty morning in the mountains.",
  "Close-up of green leaves on a tree.",
  "A stunning sunset over the horizon.",
  "Majestic mountains behind an idyllic landscape.",
  "A swamp with lush vegetation.",
  "A rainstorm with dark clouds and lightning.",
  "Raindrops on lush green tropical leaves.",
  "A sandy beach with crystal clear water.",
  "A leopard in snowy weather conditions.",
  "A close-up of a bright sunflower."
)
pixcarousel(paths, caption = captions)

Caution

Long captions may extend outside the image since image height is fixed!

Images without captions can be set as NA.

pixcarousel(paths[1:4], caption = c("night", "forest", NA, "coconut trees"))
pixcarousel(paths[1], caption = "night")

1.1 Caption parameters

Captions have further properties caption_valign and caption_halign which allows for captions to be displayed on the images.

caption_valign options are top, center, or bottom.

pixcarousel(paths[1:4], caption = captions[1:4], caption_valign = "top")
pixcarousel(paths[1:4], caption = captions[1:4], caption_valign = "center")
pixcarousel(paths[1:4], caption = captions[1:4], caption_valign = "bottom")

caption_halign options are left, center or right.

pixcarousel(
  paths[1:4],
  caption = captions[1:4],
  caption_valign = "center",
  caption_halign = "center"
)
pixcarousel(
  paths[1:4],
  caption = captions[1:4],
  caption_valign = "bottom",
  caption_halign = "center"
)

The default is TRUE, which means that clicking on the thumbnail opens the image in a lightbox. Setting this to FALSE turns off links.

pixcarousel(paths[1:4], link = FALSE)

By setting this to a character vector, you can add custom links.

pixcarousel(
  paths[1:4],
  link = c(
    "https://en.wikipedia.org/wiki/Milky_Way",
    "https://en.wikipedia.org/wiki/Rainforest",
    "https://en.wikipedia.org/wiki/Shark",
    "https://en.wikipedia.org/wiki/Hawaii"
  )
)

Custom links with captions.

pixcarousel(
  paths[1:4],
  caption = captions[1:4],
  link = c(
    "https://en.wikipedia.org/wiki/Milky_Way",
    "https://en.wikipedia.org/wiki/Rainforest",
    "https://en.wikipedia.org/wiki/Shark",
    "https://en.wikipedia.org/wiki/Hawaii"
  )
)

3 Border radius

Adjust the corner radius of the carousel.

pixcarousel(paths, border_radius = "10px")

4 Gap

The parameter gap is used to control spacing between images in the grid. This value is a string in any valid css unit.

pixcarousel(
  paths,
  gap = "4px"
)

5 Dimensions

Control the height of the image thumbnails using h (in valid CSS units). h defaults to “400px”. You can also set the width of the carousel using w.

pixcarousel(paths[1:4], h = "300px", height = "fit-content", width = "60%")

6 Shuffle

Randomly shuffle images around.

pixcarousel(paths, shuffle = TRUE)
pixcarousel(paths, caption = captions, shuffle = TRUE)

This widget uses the Glider.js library for carousel functionality. You can pass options to the carousel using the carousel parameter as a list. The available options for glider.js can be found under ‘Settings’ at Glider.js.

Note

Note that dots and arrows parameters are set internally and cannot be overridden.

7.1 Slides

Adjust the number of images displayed per slide using slidesToShow and the number of images to scroll when navigating using slidesToScroll.

pixcarousel(
  paths,
  carousel = list(
    slidesToShow = 3,
    slidesToScroll = 2
  )
)

7.2 Scroll lock and rewind

Do not lock to nearest image when scrolling using scrollLock = FALSE. ie; you can slide partially across images. Enable rewinding (rewind = TRUE) to jump to beginning or end at endpoints.

pixcarousel(
  paths[1:4],
  link = FALSE,
  carousel = list(scrollLock = FALSE, rewind = TRUE)
)

Similarly, other carousel options can be passed as a list to the carousel parameter.

8 Session

R version 4.5.1 (2025-06-13)
Platform: aarch64-apple-darwin20.0.0
Running under: macOS Sequoia 15.7.1

Matrix products: default
BLAS/LAPACK: /opt/homebrew/Caskroom/miniforge/envs/r-4.5-arm/lib/libopenblas.0.dylib;  LAPACK version 3.12.0

locale:
[1] C

time zone: Europe/Stockholm
tzcode source: system (macOS)

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base

other attached packages:
[1] pixture_0.2.0

loaded via a namespace (and not attached):
 [1] digest_0.6.37     later_1.4.4       R6_2.6.1          httpuv_1.6.16
 [5] fastmap_1.2.0     xfun_0.54         magrittr_2.0.4    shiny_1.11.1
 [9] knitr_1.50        htmltools_0.5.8.1 rmarkdown_2.30    lifecycle_1.0.4
[13] promises_1.4.0    cli_3.6.5         xtable_1.8-4      compiler_4.5.1
[17] tools_4.5.1       mime_0.13         evaluate_1.0.5    Rcpp_1.1.0
[21] yaml_2.3.10       otel_0.2.0        rlang_1.1.6       jsonlite_2.0.0
[25] htmlwidgets_1.6.4