Set image width within the slide? about slickr HOT 3 CLOSED

i've been wondering how to get the arrows to show up. thanks for that (now it is part of the base css theme). i had my css set to 80% for the text align width.

I think it was to control the overlapping of the images, but padding takes care of that now.

now the padding is part of the margins that you see only when moving between images.

slickR::slickR(
  obj =  imgs,
  height=400, 
  width=600,
  slideId = 'ex1',
  slickOpts = list(
    dots = TRUE,
    arrows = TRUE,
    slidesToShow = 1,
    slidesToScroll = 1
  ) 
)

from slickr.

i added a padding parameter to control white space between images within the carousel.

imgs <- c('https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg',
          'http://wallpoop.com/wp-content/uploads/2012/07/persian-kittens-.jpg',
          'http://i0.kym-cdn.com/photos/images/original/000/068/576/kittycat.jpg')

slickR::slickR(
  obj =  imgs,
  slideId = 'ex1',
  padding='1%',
  slickOpts = list(
    slidesToShow=1,
    centerMode = TRUE,
    dots = TRUE
  ), height=400, width='100%'
)

you also have the slickjs option of setting variableWidth=TRUE which will allow each image to be a different with, but i find that hard to control.

from slickr.

The padding param is helpful - thanks for adding it so quickly!

Unfortunately it didn't get me the result I was looking for. I didn't specify very clearly, so that's my bad. When I run your reprex I see the three images separated by white bars, like this:

slickR::slickR(
  obj =  imgs,
  slideId = 'ex1',
  padding='1%',
  slickOpts = list(
    slidesToShow=1,
    centerMode = TRUE,
    dots = TRUE
  ), height=400, width=600
)

What I was hoping to achieve was a carousel that only shows the focus image. After some tinkering I managed to do it by attaching a style tag to the htmlwidget like so:

slickR::slickR(
  obj =  imgs,
  height=400, 
  width=600,
  slideId = 'ex1',
  padding=0,
  slickOpts = list(
    dots = TRUE,
    arrows = TRUE,
    slidesToShow = 1,
    slidesToScroll = 1
  ) 
) %>% htmlwidgets::prependContent(htmltools::tags$style(".slick-list {text-align: center; width: 100% !important;}
                                                        .slick-prev:before, .slick-next:before {opacity: .25; color: #404040}"))

I'll be the first to admit this is a pretty inelegant solution. I think I'm basically trying to recreate the Single Item mode shown here.

If you have a cleaner way of doing this I'd love to hear it.

Thanks for the package!

from slickr.