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.
Caption
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"))
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"
)
Link
The default is TRUE, which means that clicking on the thumbnail opens the image in a lightbox. Setting this to FALSE turns off links.
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"
)
)
Lightbox caption
By default, captions are shown in the lightbox when images are clicked (caption_lightbox=TRUE). You can disable this by setting caption_lightbox = FALSE.
pixcarousel(
paths[1:4],
caption = captions[1:4],
caption_lightbox = FALSE
)
You can also provide a character vector of captions to be shown in the lightbox which can be different from the ones shown on the thumbnails.
pixcarousel(
paths[1:4],
caption = captions[1:4],
caption_valign = "bottom",
caption_lightbox = c(
"Milky Way Galaxy",
"Rainforest",
"Shark in the Ocean",
"Hawaii Beach"
)
)
You could also provide only the captions for the lightbox.
pixcarousel(
paths[1:4],
caption_lightbox = c(
"Milky Way Galaxy",
"Rainforest",
"Shark in the Ocean",
"Hawaii Beach"
)
)
Border radius
Adjust the corner radius of the carousel.
Gap
The parameter gap is used to control spacing between images in the grid. This value is a string in any valid css unit.
With captions.
pixcarousel(
paths,
caption = captions,
caption_valign = "bottom",
gap = "4px",
)
Fit
The argument fit is used to control css property object-fit. The differences between these options are easily visible when handling images with mixed dimensions and aspect ratios.
It is set to cover by default in which case, the image scales within it’s frame rather than shrink. Now, let’s try fit="contain" for example. This will ensure the whole image is visible within the frame.
Explore css property object-fit for more details, for example, on w3schools.
Position
The argument position determines how the image is positioned within the frame. This controls css property object-position.
Here is a youtube video that discusses fit and position.
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%")
Shuffle
Randomly shuffle images around.
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"
),
shuffle = TRUE
)
pixcarousel(
paths[1:4],
caption = captions[1:4],
caption_valign = "bottom",
caption_lightbox = c(
"Milky Way Galaxy",
"Rainforest",
"Shark in the Ocean",
"Hawaii Beach"
),
shuffle = TRUE
)
Carousel options
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.
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
)
)
With gap and captions.
pixcarousel(
paths,
caption = captions,
caption_valign = "bottom",
gap = "4px",
carousel = list(
slidesToShow = 3,
slidesToScroll = 2
)
)
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.
Session
R version 4.5.2 (2025-10-31)
Platform: x86_64-pc-linux-gnu
Running under: Ubuntu 24.04.3 LTS
Matrix products: default
BLAS: /usr/lib/x86_64-linux-gnu/openblas-pthread/libblas.so.3
LAPACK: /usr/lib/x86_64-linux-gnu/openblas-pthread/libopenblasp-r0.3.26.so; LAPACK version 3.12.0
locale:
[1] LC_CTYPE=C.UTF-8 LC_NUMERIC=C LC_TIME=C.UTF-8
[4] LC_COLLATE=C.UTF-8 LC_MONETARY=C.UTF-8 LC_MESSAGES=C.UTF-8
[7] LC_PAPER=C.UTF-8 LC_NAME=C LC_ADDRESS=C
[10] LC_TELEPHONE=C LC_MEASUREMENT=C.UTF-8 LC_IDENTIFICATION=C
time zone: UTC
tzcode source: system (glibc)
attached base packages:
[1] stats graphics grDevices utils datasets methods base
other attached packages:
[1] pixture_0.2.1
loaded via a namespace (and not attached):
[1] digest_0.6.39 later_1.4.4 R6_2.6.1 httpuv_1.6.16
[5] fastmap_1.2.0 xfun_0.55 magrittr_2.0.4 shiny_1.12.1
[9] knitr_1.50 htmltools_0.5.9 rmarkdown_2.30 lifecycle_1.0.4
[13] promises_1.5.0 cli_3.6.5 xtable_1.8-4 compiler_4.5.2
[17] tools_4.5.2 mime_0.13 evaluate_1.0.5 Rcpp_1.1.0
[21] yaml_2.3.12 otel_0.2.0 rlang_1.1.6 jsonlite_2.0.0
[25] htmlwidgets_1.6.4