CODEWITHSUNDEEP
htmlcssslick.js
DezUk
DezUk

Reputation: 25

Slick Slider Images Overlapping and Broken Buttons

I am in the process of trying to relearn some CSS after many many years away from coding. I am trying to recreate a wordpress template by hand and have an issue with an image slider.

I have tried a few and have settled on http://kenwheeler.github.io/slick/ but I am having issues with my images overlapping. They are all the same dimensions and I have had a search online but cannot find an answer.

The images for the left and right arrows are broken, as are the dots below the slider, any suggestions on this?

My site is here: http://rdoyle.info/temp/

Upvotes: 1

Views: 6331

Answers (1)

tao
tao

Reputation: 90013

The intended behavior is not exactly clear from your question. If you want to make the images as wide as the slides, you need to set their min-width. For example:

.slick-slide img {
   min-width: 100%;
}

If you want to increase the space between the slides, you can do it by setting margins. You could set them on slides or on their contents. I personally prefer slides glued to each other, it gives me better control over animation functions. The point here is slick will auto-adjust. For example:

.slick-slide img {
   margin: 0 50px;
}

To combine the two, you have to deduct the margins from the width, using calc:

.slick-slide img {
  min-width: calc(100% - 100px);
  margin: 0 50px;
}

Make sure you read slick documentation. If you don't want to be "surprised" by its redrawing process, you need to understand each feature and use it as intended. Otherwise it will work against you and, from experience, disabling internal slick behavior (without breaking its functionality) is not an easy task.

Tip: Set visual helpers that enable you to see elements you're interested in (I personally use red/white/black 1px borders on elements while I build animations, to be able to see them in action).

Upvotes: 1

Related Questions