Very similar to this SO question, I would like to move the previous/next arrow buttons. I want to move them so that they inline with dots, and the result should look like this:
Default placement for the arrows in slickR are to the sides of the carousel (code to produce is below):
According to the linked SO question, in settings function there is an argument called appendArrows which allows us to specify which div should the arrows appear in.
If I inspect the following shiny app, the slickR dots appear in a class called slick-dots. When I add appendArrows = ".slick-dots" the existing arrows completely disappear.
Info related to the original, JavaScript-based slick, (of which 'slickR' is based on, seem to suggest creating a new class and then assigning appendRows to the new class. However I am trying to add to existing dots class.
My JavaScript/HTML is very limited but I found some helpful resources:
- Create a new class called 'slick-pager' and wrap
slick-arrowandslick-dotswithin - An old thread in JavaScript-based
slick
Shiny app code:
library(shiny)
library(slickR)
ui <- fluidPage(
slickROutput("slickr_test", width = "95%")
)
server <- function(input, output) {
output$slickr_test <- renderSlickR({
slickR(
obj = c(
".svg",
".svg",
".svg"
)
) +
settings(
dots = TRUE
# ,appendArrows = ".slick-dots"
)
})
}
shinyApp(ui = ui, server = server)
UPD following @Tim's answer.
Using Tim's normal arrow code, and with the inclusion of a DT Datatable, there seems to be multiple arrows introduced:
library(shiny)
library(slickR)
ui <- fluidPage(
tags$head(
tags$style(HTML("
.slick-pager {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.slick-prev, .slick-next {
position: relative;
display: inline-block;
margin: 0px 30px; /* adjust distance between buttons and dots in second margin*/
}
.slick-dots {
bottom: 9px; /* slight height adjust to make dots align with buttons*/
}
ul.slick-dots { /* this is the div that wraps the dots, we need to paint it black */
background: black;
width: 160px;
}
.slick-dots li button:before {
color: white; /* Inactive dots */
opacity: 1;
font-size: 12px; /* change dot size! */
}
.slick-dots li.slick-active button:before {
color: orange; /* Active dot */
opacity: 1;
font-size: 12px; /* change dot size! */
}
/* Style the previous and next buttons */
.slick-prev, .slick-next {
background-color: black; /* Black background */
color: white; /* White arrow */
}
.slick-next:before, .slick-prev:before{
color:white !important;
opacity: 1;
}
"))
),
slickROutput("slickr_test", width = "95%"),
tags$script(HTML("
$(document).on('shiny:value', function(event) {
setTimeout(function() {
$('.slick-dots').wrap('<div class=\"slick-pager\"></div>');
$('.slick-prev, .slick-next').appendTo('.slick-pager');
}, 10);
});
")),
DTOutput("iris_dt")
)
server <- function(input, output) {
output$slickr_test <- renderSlickR({
slickR(
obj = c(
".svg",
".svg",
".svg"
)
) +
settings(
dots = TRUE
)
})
output$iris_dt <- renderDT({iris})
}
shinyApp(ui = ui, server = server)
It seems like when there is a DTOutput, the slick-pager HTML code gets nested inside another slick-pager. And while the arrows are floating over DT for this example - preventing the arrows from being clicked, in my own they are between images and DT. In my own code (since I can click on the arrows), there are even more arrows as the carousel is swiped forward.
In my own code, the arrows look like this before carousel is swiped:
And arrows look like this when swiped once:
Very similar to this SO question, I would like to move the previous/next arrow buttons. I want to move them so that they inline with dots, and the result should look like this:
Default placement for the arrows in slickR are to the sides of the carousel (code to produce is below):
According to the linked SO question, in settings function there is an argument called appendArrows which allows us to specify which div should the arrows appear in.
If I inspect the following shiny app, the slickR dots appear in a class called slick-dots. When I add appendArrows = ".slick-dots" the existing arrows completely disappear.
Info related to the original, JavaScript-based slick, (of which 'slickR' is based on, seem to suggest creating a new class and then assigning appendRows to the new class. However I am trying to add to existing dots class.
My JavaScript/HTML is very limited but I found some helpful resources:
- Create a new class called 'slick-pager' and wrap
slick-arrowandslick-dotswithin - An old thread in JavaScript-based
slick
Shiny app code:
library(shiny)
library(slickR)
ui <- fluidPage(
slickROutput("slickr_test", width = "95%")
)
server <- function(input, output) {
output$slickr_test <- renderSlickR({
slickR(
obj = c(
"https://upload.wikimedia./wikipedia/commons/9/9e/Flag_of_Japan.svg",
"https://upload.wikimedia./wikipedia/commons/0/09/Flag_of_South_Korea.svg",
"https://upload.wikimedia./wikipedia/commons/6/69/Flag_of_Monaco_%28state%29.svg"
)
) +
settings(
dots = TRUE
# ,appendArrows = ".slick-dots"
)
})
}
shinyApp(ui = ui, server = server)
UPD following @Tim's answer.
Using Tim's normal arrow code, and with the inclusion of a DT Datatable, there seems to be multiple arrows introduced:
library(shiny)
library(slickR)
ui <- fluidPage(
tags$head(
tags$style(HTML("
.slick-pager {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.slick-prev, .slick-next {
position: relative;
display: inline-block;
margin: 0px 30px; /* adjust distance between buttons and dots in second margin*/
}
.slick-dots {
bottom: 9px; /* slight height adjust to make dots align with buttons*/
}
ul.slick-dots { /* this is the div that wraps the dots, we need to paint it black */
background: black;
width: 160px;
}
.slick-dots li button:before {
color: white; /* Inactive dots */
opacity: 1;
font-size: 12px; /* change dot size! */
}
.slick-dots li.slick-active button:before {
color: orange; /* Active dot */
opacity: 1;
font-size: 12px; /* change dot size! */
}
/* Style the previous and next buttons */
.slick-prev, .slick-next {
background-color: black; /* Black background */
color: white; /* White arrow */
}
.slick-next:before, .slick-prev:before{
color:white !important;
opacity: 1;
}
"))
),
slickROutput("slickr_test", width = "95%"),
tags$script(HTML("
$(document).on('shiny:value', function(event) {
setTimeout(function() {
$('.slick-dots').wrap('<div class=\"slick-pager\"></div>');
$('.slick-prev, .slick-next').appendTo('.slick-pager');
}, 10);
});
")),
DTOutput("iris_dt")
)
server <- function(input, output) {
output$slickr_test <- renderSlickR({
slickR(
obj = c(
"https://upload.wikimedia./wikipedia/commons/9/9e/Flag_of_Japan.svg",
"https://upload.wikimedia./wikipedia/commons/0/09/Flag_of_South_Korea.svg",
"https://upload.wikimedia./wikipedia/commons/6/69/Flag_of_Monaco_%28state%29.svg"
)
) +
settings(
dots = TRUE
)
})
output$iris_dt <- renderDT({iris})
}
shinyApp(ui = ui, server = server)
It seems like when there is a DTOutput, the slick-pager HTML code gets nested inside another slick-pager. And while the arrows are floating over DT for this example - preventing the arrows from being clicked, in my own they are between images and DT. In my own code (since I can click on the arrows), there are even more arrows as the carousel is swiped forward.
In my own code, the arrows look like this before carousel is swiped:
And arrows look like this when swiped once:
Share Improve this question edited 4 hours ago sactyr asked yesterday sactyrsactyr 4251 gold badge3 silver badges15 bronze badges1 Answer
Reset to default 1This comes fairly close to your requirement.
- 10 miliseconds after load, wrap both before/after buttons and dots in another div
- Add loads of css to make it look different
Result
Code for replaced arrows > <
library(shiny)
library(slickR)
ui <- fluidPage(
tags$head(
tags$style(HTML("
.slick-pager {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.slick-prev, .slick-next {
position: relative;
display: inline-block;
margin: 0px 30px; /* adjust distance between buttons and dots in second margin*/
}
.slick-prev:before, .slick-next:before {
color: white; /* make before/after buttons appear white */
opacity: 1;
content: ''; /* Remove default content */
}
.slick-dots {
bottom: 9px; /* slight height adjust to make dots align with buttons*/
}
ul.slick-dots { /* this is the div that wraps the dots, we need to paint it black */
background: black;
width: 160px;
}
.slick-dots li button:before {
color: white; /* Inactive dots */
opacity: 1;
font-size: 12px; /* change dot size! */
}
.slick-dots li.slick-active button:before {
color: orange; /* Active dot */
opacity: 1;
font-size: 12px; /* change dot size! */
}
/* Style the previous and next buttons */
.slick-prev, .slick-next {
background-color: black; /* Black background */
color: white; /* White arrow */
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px; /* height of > < */
font-weight: bold;
transition: all 0.3s ease;
z-index: 1000;
}
"))
),
slickROutput("slickr_test", width = "95%"),
tags$script(HTML("
$(document).on('shiny:value', function(event) {
setTimeout(function() {
$('.slick-dots').wrap('<div class=\"slick-pager\"></div>');
$('.slick-prev, .slick-next').appendTo('.slick-pager');
$('.slick-prev').html('<');
$('.slick-next').html('>');
}, 10);
});
"))
)
server <- function(input, output) {
output$slickr_test <- renderSlickR({
slickR(
obj = c(
"https://upload.wikimedia./wikipedia/commons/9/9e/Flag_of_Japan.svg",
"https://upload.wikimedia./wikipedia/commons/0/09/Flag_of_South_Korea.svg",
"https://upload.wikimedia./wikipedia/commons/6/69/Flag_of_Monaco_%28state%29.svg"
)
) +
settings(
dots = TRUE
)
})
}
shinyApp(ui = ui, server = server)
Code for normal arrows
library(shiny)
library(slickR)
ui <- fluidPage(
tags$head(
tags$style(HTML("
.slick-pager {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.slick-prev, .slick-next {
position: relative;
display: inline-block;
margin: 0px 30px; /* adjust distance between buttons and dots in second margin*/
}
.slick-dots {
bottom: 9px; /* slight height adjust to make dots align with buttons*/
}
ul.slick-dots { /* this is the div that wraps the dots, we need to paint it black */
background: black;
width: 160px;
}
.slick-dots li button:before {
color: white; /* Inactive dots */
opacity: 1;
font-size: 12px; /* change dot size! */
}
.slick-dots li.slick-active button:before {
color: orange; /* Active dot */
opacity: 1;
font-size: 12px; /* change dot size! */
}
/* Style the previous and next buttons */
.slick-prev, .slick-next {
background-color: black; /* Black background */
color: white; /* White arrow */
}
.slick-next:before, .slick-prev:before{
color:white !important;
opacity: 1;
}
"))
),
slickROutput("slickr_test", width = "95%"),
tags$script(HTML("
$(document).on('shiny:value', function(event) {
setTimeout(function() {
$('.slick-dots').wrap('<div class=\"slick-pager\"></div>');
$('.slick-prev, .slick-next').appendTo('.slick-pager');
}, 10);
});
"))
)
server <- function(input, output) {
output$slickr_test <- renderSlickR({
slickR(
obj = c(
"https://upload.wikimedia./wikipedia/commons/9/9e/Flag_of_Japan.svg",
"https://upload.wikimedia./wikipedia/commons/0/09/Flag_of_South_Korea.svg",
"https://upload.wikimedia./wikipedia/commons/6/69/Flag_of_Monaco_%28state%29.svg"
)
) +
settings(
dots = TRUE
)
})
}
shinyApp(ui = ui, server = server)
How to adjust it
- Open the Shiny App in browser
- Press
F12to open the Developer console. CTRL+Shift+Cand then hover your mouse over div elements you want to inspect.- look at the css and make changes in realtime until it fits. Then copy the css into your app :)
- For example here I am adjusting the background of the dots-div