Set image width within the slide?

[tiernanmartin]

While the height and width parameters of slickR() control the dimensions of the slide, there doesn't appear to be any way to adjust the width of the image itself.

As you can see in the first example in your readme, the width of the logo image is 75%. This results in white buffers on either side of the image, which may not always be desirable.

I'd like my images to take up 100% of the slide - can you add a parameter that lets me do that?

[yonicd]

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.

[tiernanmartin]

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!

[yonicd]

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
  ) 
)