yonicd / slickR

slick carousel htmlwidget for R
https://yonicd.github.io/slickR/
Other
158 stars 14 forks source link

Synch 3 Carousels and Change Color of Text #58

Closed chriswoodward5 closed 3 years ago

chriswoodward5 commented 3 years ago

I am using the slickR package in R for a Shiny app and am looking to synch 3 carousels, as well as trying to change the color of the text (default is a blue, trying to change to black).

The three carousels to be synched are: Text above the image Image Text below the image

Creating a simple example, trying to use nested parentheses, but this doesn't work.

library(slickR)

df <- nba_player_logo[1:20, ]

df$Carousel_Position <- as.character(1:20)

# Photo Slides
photos_slides <- slickR(obj = df$uri,height = 100, width = "100%")

# Text Slides
carousel_positions_slides <- slickR(obj = df$Carousel_Position, slideType = 'p')
names_slides <- slickR(obj = df$name, slideType = 'p')

carousel_settings_arrows <- settings(initialSlide = 0,
                                     slidesToShow = 5, 
                                     slidesToScroll = 5, 
                                     focusOnSelect = TRUE,
                                     autoplay = FALSE,
                                     arrows = TRUE)

carousel_settings_no_arrows <- settings(initialSlide = 0,
                                        slidesToShow = 5, 
                                        slidesToScroll = 5, 
                                        focusOnSelect = TRUE,
                                        autoplay = FALSE,
                                        arrows = FALSE)

( (carousel_positions_slides + carousel_settings_no_arrows) %synch% (photos_slides + carousel_settings_arrows) ) %synch% (names_slides + carousel_settings_no_arrows)

When I try this, when clicking the left and right arrows, the images and player names update correctly, but the carousel positions (top text) do not. It just remains 1-5. Is there a way to synch 3 carousels?

Screen Shot 2021-05-25 at 9 04 20 PM Screen Shot 2021-05-25 at 9 15 56 PM

Also, as I mentioned, I am looking to change the color of the text from the default blue to black. Is there a way to do this? I am pretty well-versed in R, but do not know much CSS and Javascript.

Thanks a lot!

yonicd commented 3 years ago

Thanks for opening this issue. I’ll check this behavior when I return from vacation next week.

yonicd commented 3 years ago

To change the style of <p> use this syntax

names_slides_dom <- slick_list(lapply(df$name,function(x) htmltools::tags$p(x,style = htmltools::css(color='red','font-style' = 'italic'))))

names_slides <- slickR(names_slides_dom)

for the multiple synch try this new commit https://github.com/yonicd/slickR/commit/403bb7af15ac117265e9fc1a91b578a8d4135297

chriswoodward5 commented 3 years ago

Thank you so much! This works now!