Comments (25)
@RLesur any ideas on how this can be solved?
from slickr.
Thanks a bunch @yonicd and @RLesur this great and I think solves an important issue. Also thanks for the css hack for the arrows; that is enough for me to work on as well!
thanks!
from slickr.
from slickr.
Thanks for opening the issue.
Can you please supply a fully reproducible example.
from slickr.
The sliders work for me on a tabset
---
title: "Untitled"
output: html_document
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
```{r}
library(slickR)
```
## tab1 {.tabset}
### My first slider
This is the first slider
```{r}
slickR::slickR(obj=nba_team_logo$uri,height = 100)
```
### tab2
This is the second slider
```{r}
slickR::slickR(obj=nba_team_logo$uri,height = 100)
```
The second slider gets activated for some reason if you click on it (try an arrow).
This doesn't seem to be a problem with slickR
or the underlying js
library, but the way that the tabs work with htmlwidgets.
craninfo
── Check Info (Sys.time: 2020-07-07 07:36:03) ─────────────────────────────────────────────────────────────────────────────────────────────────────────────
── Flavor: r-release-osx-x86_64 ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
package source date loaded cran_version release
1 ps CRAN (R 3.6.2) 2020-05-08 1.3.3 1.3.3 ERROR
2 viridisLite CRAN (R 3.6.0) 2018-02-01 0.3.0 0.3.0 ERROR
3 xml2 CRAN (R 3.6.2) 2020-04-01 1.3.0 1.3.2 WARN *
4 dplyr CRAN (R 3.6.2) 2020-05-29 1.0.0 1.0.0 NOTE
5 ggplot2 CRAN (R 3.6.0) 2020-03-05 3.3.0 3.3.2 NOTE *
6 ipaddress CRAN (R 3.6.2) 2020-05-12 0.3.0 0.3.0 NOTE
7 iptools CRAN (R 3.6.0) 2018-12-09 0.6.1 0.6.1 NOTE
8 matrixStats CRAN (R 3.6.0) 2018-07-23 0.54.0 0.56.0 NOTE *
9 Rcpp CRAN (R 3.6.3) 2020-04-09 1.0.4.6 1.0.4.6 NOTE
10 readr CRAN (R 3.6.0) 2018-12-21 1.3.1 1.3.1 NOTE
11 rmarkdown Github (rstudio/rmarkdown@18ba267) 2020-01-30 2.1.1 2.3 NOTE *
12 rstan CRAN (R 3.6.0) 2019-07-09 2.19.2 2.19.3 NOTE *
13 StanHeaders CRAN (R 3.6.0) 2019-06-14 2.18.1-10 2.21.0-5 NOTE *
14 stringi CRAN (R 3.6.1) 2020-02-17 1.4.6 1.4.6 NOTE
15 urltools CRAN (R 3.6.0) 2019-04-14 1.7.3 1.7.3 NOTE
16 viridis CRAN (R 3.6.0) 2018-03-29 0.5.1 0.5.1 NOTE
17 AsioHeaders CRAN (R 3.6.0) 2020-03-11 1.12.2-1 1.12.2-1 OK
18 assertthat CRAN (R 3.6.0) 2019-03-21 0.2.1 0.2.1 OK
19 backports CRAN (R 3.6.2) 2020-05-13 1.1.7 1.1.8 OK *
20 base64enc CRAN (R 3.6.0) 2015-07-28 0.1-3 0.1-3 OK
21 callr CRAN (R 3.6.2) 2020-03-28 3.4.3 3.4.3 OK
22 cli CRAN (R 3.6.0) 2020-02-28 2.0.2 2.0.2 OK
23 clipr CRAN (R 3.6.0) 2019-07-23 0.7.0 0.7.0 OK
24 colorspace CRAN (R 3.6.0) 2019-03-18 1.4-1 1.4-1 OK
25 crayon CRAN (R 3.6.0) 2017-09-16 1.3.4 1.3.4 OK
26 crul CRAN (R 3.6.0) 2019-11-06 0.9.0 0.9.0 OK
27 desc Github (r-lib/desc@da19501) 2020-04-03 1.2.0.9000 1.2.0 OK *
28 details local 2020-01-12 0.2.1 0.2.1 OK
29 digest CRAN (R 3.6.0) 2020-02-23 0.6.25 0.6.25 OK
30 ellipsis CRAN (R 3.6.2) 2020-05-15 0.3.1 0.3.1 OK
31 evaluate CRAN (R 3.6.0) 2019-05-28 0.14 0.14 OK
32 fansi CRAN (R 3.6.0) 2020-01-08 0.4.1 0.4.1 OK
33 generics CRAN (R 3.6.0) 2018-11-29 0.0.2 0.0.2 OK
34 ggrepel CRAN (R 3.6.0) 2019-05-07 0.8.1 0.8.2 OK *
35 glue CRAN (R 3.6.2) 2020-05-13 1.4.1 1.4.1 OK
36 gridExtra CRAN (R 3.6.0) 2017-09-09 2.3 2.3 OK
37 gtable CRAN (R 3.6.0) 2019-03-25 0.3.0 0.3.0 OK
38 hms CRAN (R 3.6.0) 2020-01-08 0.5.3 0.5.3 OK
39 htmltools CRAN (R 3.6.0) 2019-10-04 0.4.0 0.5.0 OK *
40 htmlwidgets CRAN (R 3.6.0) 2019-10-08 1.5.1 1.5.1 OK
41 httpcode CRAN (R 3.6.2) 2020-04-10 0.3.0 0.3.0 OK
42 httr CRAN (R 3.6.0) 2019-08-05 1.4.1 1.4.1 OK
43 inline CRAN (R 3.6.0) 2018-05-18 0.3.15 0.3.15 OK
44 jsonlite CRAN (R 3.6.0) 2020-02-02 1.6.1 1.7.0 OK *
45 knitr CRAN (R 3.6.0) 2020-02-06 1.28 1.29 OK *
46 lifecycle CRAN (R 3.6.0) 2020-03-06 0.2.0 0.2.0 OK
47 loo CRAN (R 3.6.0) 2019-03-13 2.1.0 2.2.0 OK *
48 magrittr CRAN (R 3.6.0) 2014-11-22 1.5 1.5 OK
49 munsell CRAN (R 3.6.0) 2018-06-12 0.5.0 0.5.0 OK
50 packrat CRAN (R 3.6.0) 2018-11-14 0.5.0 0.5.0 OK
51 pillar CRAN (R 3.6.2) 2020-05-05 1.4.4 1.4.4 OK
52 pingr CRAN (R 3.6.0) 2019-10-21 2.0.0 2.0.1 OK *
53 pkgbuild CRAN (R 3.6.1) 2019-10-09 1.0.6 1.0.8 OK *
54 pkgconfig CRAN (R 3.6.0) 2019-09-22 2.0.3 2.0.3 OK
55 png CRAN (R 3.6.0) 2013-12-03 0.1-7 0.1-7 OK
56 prettyunits CRAN (R 3.6.1) 2020-01-24 1.1.1 1.1.1 OK
57 purrr CRAN (R 3.6.0) 2019-10-18 0.3.3 0.3.4 OK *
58 R6 CRAN (R 3.6.0) 2019-11-12 2.4.1 2.4.1 OK
59 rematch CRAN (R 3.6.0) 2016-04-21 1.0.1 1.0.1 OK
60 rlang CRAN (R 3.6.2) 2020-05-02 0.4.6 0.4.6 OK
61 rprojroot CRAN (R 3.6.0) 2018-01-03 1.3-2 1.3-2 OK
62 rsconnect CRAN (R 3.6.0) 2019-07-22 0.8.15 0.8.16 OK *
63 rstudioapi CRAN (R 3.6.1) 2020-02-07 0.11 0.11 OK
64 scales CRAN (R 3.6.0) 2019-11-18 1.1.0 1.1.1 OK *
65 sessioninfo CRAN (R 3.6.0) 2018-11-05 1.1.1 1.1.1 OK
66 slickR local 2020-02-28 0.5.0001 0.4.9 OK *
67 tibble CRAN (R 3.6.2) 2020-04-20 3.0.1 3.0.1 OK
68 tidyselect CRAN (R 3.6.2) 2020-05-11 1.1.0 1.1.0 OK
69 triebeard CRAN (R 3.6.0) 2016-08-04 0.3.0 0.3.0 OK
70 utf8 CRAN (R 3.6.0) 2018-05-24 1.1.4 1.1.4 OK
71 vctrs Github (r-lib/vctrs@504ec96) 2020-06-02 0.3.1 0.3.1 OK
72 whoami CRAN (R 3.6.0) 2019-03-19 1.3.0 1.3.0 OK
73 withr CRAN (R 3.6.0) 2018-03-15 2.1.2 2.2.0 OK *
74 xfun CRAN (R 3.6.0) 2020-01-13 0.12 0.15 OK *
75 yaml CRAN (R 3.6.0) 2020-02-01 2.2.1 2.2.1 OK
76 addressable Github (ropenscilabs/addressable@d04bccf) 2020-06-02 0.0.1.91 <NA> <NA> *
77 cchecks Github (ropenscilabs/cchecks@df3c80c) 2020-06-02 0.1.8.94 <NA> <NA> *
78 craninfo local 2020-06-07 0.0.1 <NA> <NA> *
79 curl CRAN (R 3.6.0) 2019-12-02 4.3 <NA> <NA> *
80 processx CRAN (R 3.6.1) 2020-02-09 3.4.2 <NA> <NA> *
from slickr.
@yonicd thanks! Sorry I was a bit busy yesterday to post an example. However I would've done the same. Its showing up now. I think the issue was that I was not activating the arrows as you mentioned previously. But it works when the arrows are pushed. I'm wondering now if there is an option in the setting to activate the first slide? A side question. Is there anyway to make the arrows bigger or with different icon?
opts_dot_number <- settings(
initialSlide = 0,
slidesToShow = 1,
slidesToScroll = 1,
focusOnSelect = TRUE, # I wonder if there is an option for auto load?
arrows = T, ## bigger arrows or icon?
dots = TRUE
)
from slickr.
I am having the same issue. i have 3 caroussels behind tabsets, and they all appear empty. The only way to populate it with a first picture is to click on the right arrow. This is undesirable as most users won't understand it.
Is there a small piece of JS code that can be inserted into the .Rmd that would simulate that first click event?
The page is published here and the code is below:
---
title: "Locus of Centers of Ellipse-mounted Triangles "
author: Dan Reznik and Iverton Darlan
date: July, 2020
output:
bookdown::html_document2:
theme: cosmo
css: style.css
number_sections: no
link-citations: yes
bibliography: [elliptic_billiards_v2.bib,authors_rgk_v1.bib]
csl: computer.csl
---
```
```{r,echo=F}
knitr::opts_chunk$set(
cache=T,
collapse=T,
comment="#>",
dpi=300,
fig.align="center",
out.width='100%'
)
```
```{r,echo=F,message=F,cache=F,warning=F}
library(tidyverse)
library(fs)
library(slickR)
library(knitr)
source("util.R")
```
# Loci {.tabset}
Consider an ellipse with $a,b$ semi-axes. Now consider a triangle $T$ with vertices ${V_1}{V_2}{V_3}$ where ${V_1}{V_2}$ are held fixed on the ellipse's:
1. foci
1. left and right vertices
1. top and bottom vertices
1. left and top vertices
Shown below are the loci of triangle centers of $T$ ($X_1$=Incenter, $X_2$=Barycenters, etc., after Kimberling [@etc]) over all $V_3(t)=[a\cos(t),b\sin(t)]$ on the ellipse.
To view the pictures below, select a tab (for a particular ellipse aspect ratio $a/b$) and click on the caroussel's right arrow to initialize it.
```{r,eval=F,include=F}
dir_ls("locus_single_vtx_150") %>% as.character %>% length
```
## a=1.5 {-}
```{r,echo=F}
g_fnames <- as.character(dir_ls("locus_single_vtx_150")) %>% str_c(g_url,"/",.)
slickR(
g_fnames,
height=600,
# width = 800,
width='90%',
slideType = 'img-lazy') +
slickR::settings(fade=T,adaptiveHeight=T,
lazyLoad = 'ondemand',
speed=50)
```
## a=2.0 {-}
```{r,echo=F}
g_fnames <- as.character(dir_ls("locus_single_vtx_200")) %>% str_c(g_url,"/",.)
slickR(
g_fnames,
height=600,
# width = 800,
width='90%',
slideType = 'img-lazy') +
slickR::settings(fade=T,adaptiveHeight=T,
lazyLoad = 'ondemand',
speed=50)
```
## a=3.0 {-}
```{r,echo=F}
g_fnames <- as.character(dir_ls("locus_single_vtx_300")) %>% str_c(g_url,"/",.)
slickR(
g_fnames,
height=600,
#width = 800,
width='90%',
slideType = 'img-lazy') +
slickR::settings(fade=T,adaptiveHeight=T,
lazyLoad = 'ondemand',
speed=50)
```
# Conclusions
Go back to [main page](index.html).
`r if (is_html_output()) '# References'`
from slickr.
Thanks for adding the comment, I’ll dig into it to see what can be done
from slickr.
@dan-reznik that page you linked to initialized all the carousels for me (I didn’t see any tabs though)
from slickr.
from slickr.
i see it now. thanks for updating that.
from slickr.
from slickr.
from slickr.
javascript may be a bit tricky because you would need to know the slick sliders id up front and the way the id's are set up now by default the have a random stub to avoid conflicts in multiple slider outputs in the same html doc output.
from slickr.
from slickr.
one solution is this (@ahdee you were asking about this too):
```{r}
slickR::slickR(obj=nba_team_logo$uri,height = 100) +
slickR::settings(autoplay = TRUE,autoplaySpeed = 1000)
```
it will force the slider to start up. the defaults of the slider are set to pause the autoplay when the mouse is hovering over any part of the slider.
from slickr.
regarding the name. you can give unique stems for the id (ie instead of baseDiv) then use regex in the js to manipulate the slick
from slickr.
from slickr.
from slickr.
The very least I wonder if its possible to make the arrows BIGGER so that its very obvious. May be a solution is to just put put a default message - Something like please scroll right to see data?
from slickr.
from slickr.
@dan-reznik here are three tabs first is regular other ones have autoplay.
---
title: "Untitled"
output: html_document
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
```{r}
library(slickR)
```
## Results {.tabset}
### Plots
We show a scatter plot in this section.
```{r}
slickR::slickR(obj=nba_team_logo$uri,height = 100)
```
### Tables 1
We show the data in this tab.
```{r}
slickR::slickR(obj = nba_team_logo$uri,
height = 100) +
slickR::settings(autoplay = TRUE,
autoplaySpeed = 1000)
```
### Tables 2
We show the data in this tab.
```{r}
slickR::slickR(obj = nba_team_logo$uri,
height = 100) +
slickR::settings(autoplay = TRUE,
autoplaySpeed = 1000)
```
from slickr.
@ahdee to manipulate the arrows you have two arguments in the settings:
slickR::settings(prevArrow = '<button type="button" class="slick-prev">Previous</button>',
nextArrow = '<button type="button" class="slick-next">Next</button>')
you would need to have some css
knowledge to be able to use this, which is beyond the scope of this package.
from slickr.
@yonicd I would try to detect when a tab is activated to refresh the slick element. For instance,
---
title: "Untitled"
output: html_document
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
```{r}
library(slickR)
```
## tab1 {.tabset}
### My first slider
This is the first slider
```{r}
slickR::slickR(obj=nba_team_logo$uri,height = 100)
```
### tab2
This is the second slider
```{r}
slickR::slickR(obj=nba_team_logo$uri,height = 100)
```
```{js, echo=FALSE}
$('body').on('shown.bs.tab', function(e) {
$(e.target).parents('.tabset')
.find('.active .slick-slider')
.each(function() {
this.slick.setPosition();
});
});
```
I'm sure this can be improved.
from slickr.
thanks @RLesur that works! I like your find
a bit more than the one i hacked together :)
here is another example that @daattali helped me construct
---
title: "Untitled"
output: html_document
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
```{r}
library(slickR)
```
## Results {.tabset}
### Plots
We show a scatter plot in this section.
```{r}
slickR::slickR(obj=nba_team_logo$uri,height = 100)
```
### Tables
We show the data in this tab.
```{r}
slickR::slickR(obj = nba_team_logo$uri,height = 100)
```
### Tables 2
We show the data in this tab.
```{r}
slickR::slickR(obj = nba_team_logo$uri,height = 100)
```
```{js,echo = FALSE}
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (event) {
$.each($("[class^=baseDiv]"),function(key,value) {
value.slick.setPosition()
})
})
```
from slickr.
Related Issues (20)
- using slickR for mobile HOT 2
- slickR shiny vignette broken HOT 12
- shiny: Carousel "jumps" when re-rendered with numeric height HOT 3
- slickr_output_current$.center isn't providing data on shiny app startup HOT 3
- Synch 3 Carousels and Change Color of Text HOT 3
- Move previous next buttons HOT 4
- target = "_self" HOT 1
- Browser side linking to other chart HOT 4
- Replace a slide? HOT 1
- Shiny: carousel collapses / folds after clicking on different tab and returning to carousel page HOT 1
- SlickR always insert image into html
- Problem with slickR + shiny, when the xmlSVG-file becomes to large. HOT 2
- Change figure size according to browser window size
- SlickR and Shiny, duplicated carousels HOT 7
- how to continue the carousel after click the arrow? HOT 3
- Error in file.info(x, extra_cols = FALSE) : file name conversion problem -- name too long?
- How change style settings in multiple slider ?
- How does Slide Synchronization work with asNavFor
- Duplicated carousels in shiny HOT 1
- How to add line breaks to a caption?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from slickr.