Остановите автовоспроизведение карусели с помощью R bsplus, Shiny и JavaScript

Используя предложение @YBS поместить «bs_carousel (...) внутри renderUI» Вот моя попытка. Сначала рендеринг слайдов и автовоспроизведение отключены. Однако нажмите правый шеврон, и начнется автоигра.

library("shiny")
library("shinyjs")
library("bsplus")

# Stop autoplay
# https://stackoverflow.com/questions/26133618/how-to-stop-bootstrap-carousel-from-autosliding

jscode <- "
shinyjs.init = function() {
  $('.carousel').carousel({ interval: false });
}"

ui <- fluidPage(
  
  shinyjs::useShinyjs(),
  extendShinyjs(text = jscode, functions = c()),
  
  # Application title
  titlePanel("Carousel Demo"),
  
  uiOutput("carousel")
)

server <- shinyServer(function(input, output) {
  output$carousel <- renderUI({
    bs_carousel(id = "images", use_indicators = TRUE) %>%
      bs_append(
        content = bs_carousel_image(src = "https://placehold.it/900x500/3c8dbc/ffffff&text=Merry")
      ) %>%
      bs_append(
        content = bs_carousel_image(src = "https://placehold.it/900x500/3c8dbc/ffffff&text=Christmas")
      ) %>%
      bs_append(
        content = bs_carousel_image(src = "https://placehold.it/900x500/3c8dbc/ffffff&text=To")
      ) %>%
      bs_append(
        content = bs_carousel_image(src = "https://placehold.it/900x500/3c8dbc/ffffff&text=All")
      ) 
  })
  
})

# Run the application
shinyApp(ui = ui, server = server)

Оригинальный вопрос

Я использую карусель из пакета R bsplus. Я хочу остановить автовоспроизведение. Различные решения были упомянуты здесь.

Я безуспешно пытаюсь реализовать один из них ниже.

library("shiny")
library("bsplus")

# Stop autoplay
# https://stackoverflow.com/questions/26133618/how-to-stop-bootstrap-carousel-from-autosliding

jscode <- "
shinyjs.init = function() {
  $('.carousel').carousel({ interval: false });
}"

ui <- shinyUI(fluidPage(
  
  shinyjs::useShinyjs(),
  extendShinyjs(text = jscode, functions = c()),

  # Application title
  titlePanel("Carousel Demo"),
),

bs_carousel(id = "images", use_indicators = TRUE) %>%
  bs_append(
    content = bs_carousel_image(src = "https://placehold.it/900x500/3c8dbc/ffffff&text=Merry")
  ) %>%
  bs_append(
    content = bs_carousel_image(src = "https://placehold.it/900x500/3c8dbc/ffffff&text=Christmas")
  ) %>%
  bs_append(
    content = bs_carousel_image(src = "https://placehold.it/900x500/3c8dbc/ffffff&text=To")
  ) %>%
  bs_append(
    content = bs_carousel_image(src = "https://placehold.it/900x500/3c8dbc/ffffff&text=All")
  ) 

)

server <- shinyServer(function(input, output) {
  
})

# Run the application
shinyApp(ui = ui, server = server)

Если вы поместите bs_carousel(...) внутри renderUI на стороне сервера, автозапуск не будет включен.

YBS 26.12.2020 03:22

Сначала это работает. Но автозапуск начинается, если вы нажмете «следующий» шеврон. См. новый код в исходном сообщении.

ixodid 26.12.2020 03:38

Похоже, это была ошибка, которая была исправлена ​​​​некоторое время назад. Я не уверен, что это все еще ошибка. Возможно, лучше всего поместить кнопку воспроизведения/паузы, чтобы пользователи могли щелкнуть, чтобы воспроизвести, и щелкнуть еще раз, чтобы приостановить.

YBS 26.12.2020 15:00

Как я могу добавить кнопку паузы, если я не знаю, как сделать паузу программно?

ixodid 26.12.2020 16:53
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
4
4
307
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Почему-то автовоспроизведение не останавливается в bs_carousel(), если только указатель мыши не наведен на активный слайд. Однако приведенный ниже код демонстрирует, что автозапуск можно отключить в пакете carousel() from shinydashboardPlus.

library(shiny)
library(shinydashboardPlus)
library(DT)

jscode <-"
$(document).ready(function(){
            $('#mycarousel').carousel( { interval:  false } );
});"

shinyApp(
  ui = dashboardPage(
    header = dashboardHeader(),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      tags$head(
        tags$style(HTML("
      #mycarousel {
        width:900px;
        height:600px;
      }
    .carousel-control{
      color:#FF0000;
    }
    "))
      ),
      tags$head(tags$script(HTML(jscode))),
      carousel(
        id = "mycarousel",
        carouselItem(
          DTOutput("show_iris_dt")
        ),
        carouselItem(
          caption = "An image file",
          tags$img(src = "YBS.png")
        ),
        carouselItem(
          caption = "Item 3",
          tags$img(src = "http://placehold.it/900x500/39CCCC/ffffff&text=Happy+New+Year")
        )
      )
    ),
    title = "Carousel Demo"
  ),
  server = function(input, output) {
    output$show_iris_dt <- renderDT({
      datatable(iris)
    })
  }
)

Пытаясь использовать ваш код, я получаю: «Ошибка в карусели (id = «mycarousel», carouselItem (DTOutput («show_iris_dt»)),: не удалось найти функцию «карусель»»

ixodid 27.12.2020 04:06

К сожалению, вам необходимо установить ShinyDashboardPlus.

YBS 27.12.2020 05:13

Так что это совершенно другое решение для карусели, чем bsplus?

ixodid 27.12.2020 05:16

Да. Я не мог остановить автозапуск в bsplus; это может быть ошибка.

YBS 27.12.2020 05:19

Другие вопросы по теме