How can I change the width and height of slides on Slick Carousel

Question

http   kenwheeler github io slick   A friend suggested that I use Ken Wheeler s Slick carousel and I decided to give it a try   I am having a couple of problems with it   The first is that the slides don t load  on top of each other  like they should   They are stacked vertically   When the first slide fades in  it is in the correct spot  however  when the second slide fades in  it is below where the first slide was   Also notice that on the first slide the right border is cut off and on the second slide everything besides the left border is cut off   The second problem is that I can t seem to change the width or height of the slides   They would all be the same dimensions    They are set in my css file in the  featured  class    What am I doing wrong    lt  xml version  1 0  encoding  UTF-8   gt   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN   http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en  gt   lt head gt       lt title gt BaseCMD    Home lt  title gt       lt meta name  description  content  If it s related to video games  you can find it here     gt   lt meta name  keywords  content  video games  microsoft  xbox  xbox 360  xbox one  sony  playstation  nintendo  wii  wii u  ds  league  console  platform  reviews  resources  players  teams  forums  servers  blog  base command  basecmd    gt        lt link href  http   localhost basecommand css 960 css  rel  stylesheet  type  text css    gt       lt link href  http   localhost basecommand css style css  rel  stylesheet  type  text css    gt       lt link href  http   localhost basecommand css foundation-icons css  rel  stylesheet  type  text css    gt       lt link href  http   localhost basecommand css slick css  rel  stylesheet  type  text css    gt       lt script type  text javascript  src    code jquery com jquery-1 11 0 min js  gt  lt  script gt       lt script type  text javascript  src    code jquery com jquery-migrate-1 2 1 min js  gt  lt  script gt       lt script src  http   localhost basecommand js global js  gt  lt  script gt       lt script src  http   localhost basecommand js slick min js  gt  lt  script gt    lt  head gt     lt body gt     lt h1 gt Top Stories lt  h1 gt    lt script gt     document  ready function        featured-articles   slick     arrows  true    autoplay  true    autoplaySpeed  3000    dots  true    draggable  false    fade  true    infinite  false    responsive            breakpoint  620      settings            arrows  true                    breakpoint  345      settings            arrows  true                         lt  script gt                lt div id  featured-articles  gt                    lt div class  featured  style  background  url attachments 56da367f9e7a66952fd1ed2e79b4b317 jpg    gt                       lt h1 gt Another Test Article lt  h1 gt                       lt p class  info  gt https   www bungie net pubassets 1319 Destiny 31 png  Lorem ipsum dolor sit amet  inani accusata et duo  ad sit veniam interpretaris  Sea scripta nostrum ex  liber fastidii ea duo  Id vim nobis option contentiones  mea probatus praesent ut  Sea ex libri    lt  p gt                        lt h2 gt  lt a href  http   localhost basecommand index php articles Another-Test-Article 5  gt Read More lt  a gt  lt  h2 gt                        lt  div gt                    lt div class  featured  style  background  url attachments 4e683defc6aba497f347b08ac05edb14 jpg    gt                       lt h1 gt This Is a Test Article lt  h1 gt                       lt p class  info  gt https   www bungie net pubassets 1319 Destiny 31 png  Lorem ipsum dolor sit amet  inani accusata et duo  ad sit veniam interpretaris  Sea scripta nostrum ex  liber fastidii ea duo  Id vim nobis option contentiones  mea probatus praesent ut  Sea ex libri    lt  p gt                       lt h2 gt  lt a href  http   localhost basecommand index php articles This-Is-a-Test-Article 1  gt Read More lt  a gt  lt  h2 gt                          lt  div gt                lt  div gt

User · Answer

I initialised the slider with one of the properties as  variableWidth  true   then i could set the width of the slides to anything i wanted in CSS with    slick-slide       width  200px

User · Answer

You could also use this        slider   slick        other settings                     respondTo   slider     makes the slider to change width depending on the container it is in    adaptiveHeight  true   makes the height change depending on the height of the element inside

User · Answer

I made this plugin  There is some css interference taking place   It s your border on the slider itself  Either use   box-sizing  border-box    to absorb the border width  or put the border on the content inside the slide

User · Answer

Basically you need to edit the JS and add  in this case  inside     featured-articles   slick      this   variableWidth  true    This will allow you to edit the width in your CSS where you can  generically use    slick-slide       width  100       or in this case    featured       width  100

User · Answer

I know there is already an answer to this but I just found a better solution using the variableWidth parameter  just set it to true in the settings of each breakpoint  like this       featured-articles   slick     arrows  true    autoplay  true    autoplaySpeed  3000    dots  true    draggable  false    fade  true    infinite  false    responsive            breakpoint  620      settings            arrows  true          variableWidth  true                    breakpoint  345      settings            arrows  true          variableWidth  true

User · Answer

I found good solution myself  Since slick slider is still used nowadays i ll post my approach    RuivBoas answer is partly correct  - It can change the width of the slide but it can break the slider  Why      Slick slider may exceed browser width  Actual container width is set   to value that can accomodate all it s slides    The best solution for setting slide width is to use width of the actual browser window  It works best with responsive design   For example 2 slides with absorbed width  CSS   slick-slide       width  50vw         for absorbing width from  Ken Wheeler answer     box-sizing  border-box      JS    document  on  ready   function                      container   slick                   variableWidth  true                  slidesToShow  2                  slidesToScroll  2                               HTML markup   lt div id  container  gt       lt div gt  lt img  gt  lt  div gt       lt div gt  lt img  gt  lt  div gt       lt div gt  lt img  gt  lt  div gt   lt  div gt

[jquery] How can I change the width and height of slides on Slick Carousel?

Examples related to jquery

Examples related to carousel

Examples related to slick.js