CODEWITHSUNDEEP
css
Seven N
Seven N

Reputation: 35

How to append dots to slick carousel?

I would like to style my dots so that they are a smooth line (like this: https://i.sstatic.net/rQoJ4.jpg ) How do I got about this? Do I need to Append dots?

*I tried changing width, and height of button and adding border-radius:0, but that seems to not work...as the dots are controled by font sizes? 

.slick-dots 
 { position: absolute; bottom: -45px; 
list-style: none; display:      block; 
text-align: center; padding: 0; width: 100%; }

.slick-dots li 
 { position: relative; display: inline-block; 
height: 20px; width: 20px; margin: 0 5px; 
padding: 0; cursor: pointer; }

.slick-dots li button 
  { border: 0; background: transparent; 
display: block; height: 20px; width: 20px; 
outline: none; line-height: 0; font-size: 0; 
color: transparent; padding: 5px; cursor: pointer; }

.slick-dots li button:hover, .slick-dots li button:focus 
 { outline: none; }

.slick-dots li button:hover:before, 
.slick-dots li button:focus:before 
 { opacity: 1; }

.slick-dots li button:before 
 { position: absolute; top: 0; left: 0; 
content: "•"; width: 20px; height: 20px; 
font-family: "slick"; font-size: 6px; l
ine-height: 20px; text-align: center; 
color: black; opacity: 0.25; 
-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; }

.slick-dots li.slick-active button:before 
 { color: black; opacity: 0.75; }

Here is my html markup so far: 

<div id="container">

    <div class="one">

        <div class="main-gallery">

            <div class="gallery-cell"><img src="img/one/01.jpg"></div>
            <div class="gallery-cell"><img src="img/one/02.jpg"></div>
            <div class="gallery-cell"><img src="img/one/03.jpg"></div>
            <div class="gallery-cell"><img src="img/one/04.jpg"></div>
            <div class="gallery-cell"><img src="img/one/05.jpg"></div>
            <div class="gallery-cell"><img src="img/one/06.jpg"></div>
            <div class="gallery-cell"><img src="img/one/07.jpg"></div>
            <div class="gallery-cell"><img src="img/one/08.jpg"></div>
            <div class="gallery-cell"><img src="img/one/09.jpg"></div>
            <div class="gallery-cell"><img src="img/one/10.jpg"></div>
            <div class="gallery-cell"><img src="img/one/11.jpg"></div>
            <div class="gallery-cell"><img src="img/one/12.jpg"></div>
            <div class="gallery-cell"><img src="img/one/13.jpg"></div>
            <div class="gallery-cell"><img src="img/one/14.jpg"></div>
            <div class="gallery-cell"><img src="img/one/15.jpg"></div>
            <div class="gallery-cell"><img src="img/one/16.jpg"></div>
            <div class="gallery-cell"><img src="img/one/17.jpg"></div>
            <div class="gallery-cell"><img src="img/one/18.jpg"></div>
            <div class="gallery-cell"><img src="img/one/19.jpg"></div>
            <div class="gallery-cell"><img src="img/one/21.jpg"></div>
            <div class="gallery-cell"><img src="img/one/22.jpg"></div>
            <div class="gallery-cell"><img src="img/one/23.jpg"></div>
            <div class="gallery-cell"><img src="img/one/24.jpg"></div>
            <div class="gallery-cell"><img src="img/one/25.jpg"></div>
            <div class="gallery-cell"><img src="img/one/26.jpg"></div>
            <div class="gallery-cell"><img src="img/one/27.jpg"></div>
            <div class="gallery-cell"><img src="img/one/28.jpg"></div>
            <div class="gallery-cell"><img src="img/one/29.jpg"></div>
            <div class="gallery-cell"><img src="img/one/30.jpg"></div>
            <div class="gallery-cell"><img src="img/one/31.jpg"></div>

        </div>

    </div>

I tried adding a border radius and changing the height and width, but that seems to not work?

thanks!

Upvotes: 1

Views: 10945

Answers (2)

Stickers
Stickers

Reputation: 78676

The easiest way to do it based on your code is - to change the content: 'dot' to 'square/block' like below:

.slick-dots li button:before {
    content: "\2588\2588\2588\2588\2588";
}

Full demo - http://jsfiddle.net/0fpztffr/5/

Find more shapes - http://www.nice-entity.com/shapes-symbols (link not relevant -anymore?- )

Upvotes: 3

Johnrednex
Johnrednex

Reputation: 305

The solution of @Pangloss works but it displays many squares for each slide.

If you want only one square for each slide,

.slick-dots li button:before {
content: '█';
}

Upvotes: 0

Related Questions