slickR | slick carousel htmlwidget for R | Data Visualization library

I can successfully move the "next" button for slickR's carousel. However, when I use the similar method to move the "previous" button it does not work. The action and the mouseover no longer work. Why is this? How can I move the "prev" button and maintain full functionality?

The documentation refers to an element in settings called, appendArrows. But it is not clear to me how to use this.

Here is a link to a two slide slickR carousel that works well on a desktop but when viewed on an iphone, the image is cut off. ie it is not responsive.

How do I use slickR's carousel with images and have it work on both desktop and mobile without images being cutoff?

Do I need to add the responsive behaviour manually? The original JS page talks about it, but I'm not sure how to translate that to R.

R Script

Have been working through this slickR problem for a while. I would greatly appreciate any input or fresh perspectives on how to resolve this issue or different ways to approach a solution.

There are two issues I've been working through:

The first I think can be solved using CSS, which I am not super familiar with, slickR seems to be creating multiple divs when the 'obj' is updated through the use of input$series. This is undesirable since it relocates the most recent div lower on the page. I tried using javascript, which I am also not very familiar with, to destroy the old slick using an observe event. Bonus points for a simple solution for that issue.

The main issue I am working to resolve is that I would like to convert the dots to images and have them update dynamically as each series is selected. The goal here is that I would like to have a larger image displayed above and a series of 'thumbnails' displayed below so that the user can have some idea of what each photo looks like without having to scroll through every image in the carousel.

My app is much more complicated than this example, but I am using slickR since it has a convenient way to access the current, active, and center slides, which I am using to filter an additional dataframe to render the display of information regarding each active/centered image in the carousel.

Here is an example which demonstrates both issues:

Colleagues and I are building a website in R-Markdown (basic, not blogdown, distillR, etc.) and have a couple slide carousels created using the slickR package. The code looks like:

Using a Shiny app, I would like to implement a slider with slickR to switch from one image to the other.

I managed to implement the slider but I'm having trouble in displaying the images correctly because of their different sizes. In the following example, the stackexchange logo is way bigger than the stackoverflow logo. When displaying them with slickR(), the bigger logo makes inroads into the first one like this:

I would also like to have the size of the pictures relative to the size of the screen.

Here is a reproducible example of the Shiny app used to generate the above image:

I am making a Shiny app with tabPanels embedded in a navbarPage. In each tabPanel, I generate a serie of image. When switching from one panel to the other one, the image loaded in one of them disappear.

I have to "refresh" manually the page to see it again. The problem seems similar than the one posted here but I cannot really subset my tabPanels, even though I gave $id and value to them.

Here is a reproducible example:

I am trying to create a webpage where I have to show multiple slideshows. I found a way of using slickR package in R to display slideshow but i am unable to show multiple. Here is the code where I am trying to render two slickR, I dont know what i am doing wrong.Please help I am just a begginer.

Code: