yonicd / slickR

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

using slickR for mobile #50

Closed deann88 closed 3 years ago

deann88 commented 3 years ago

I noticed here that there must be a way to set settings for the carousel to be responsive for mobile as well.

In the documentation for slickR::settings I read responsive - object, Object containing breakpoints and settings objects (see demo). Enables settings sets at given screen width. Set settings to "unslick" instead of an object to disable slick at a given breakpoint., Default: none

Unfortunately, I cannot find the demo. Could you please provide an example on how to set this up in R? Thanks for you work!

deann88 commented 3 years ago

Ok, I think I grasped how to do it by using V8::JS

settings(
  dots = TRUE,
  initialSlide = 0,
  slidesToShow = 3, 
  slidesToScroll = 3, 
  focusOnSelect = TRUE,
  responsive = V8::JS(
  "[
   {
    breakpoint: 1024,
  settings: {
    slidesToShow: 3,
    slidesToScroll: 3,
    infinite: true,
    dots: true
   }
  },
  {
   breakpoint: 600,
    settings: {
    slidesToShow: 2,
    slidesToScroll: 2,
    infinite: true,
    dots: true
  }
 },
 {
    breakpoint: 480,
    settings: {
    slidesToShow: 1,
     slidesToScroll: 1,
     infinite: true,
     dots: true
    }
   }
  ]"
   )
  )
yonicd commented 3 years ago

That looks right. You can also use htmlwidgets::JS too. Here is an example https://yonicd.github.io/slickR/articles/basics.html#replace-dots-with-text