Slick: Inline arrows

[martinkovac]

It is possible to have arrows and dots like on this picture?

The number of dots is dynamic.
It should behave like inline elements or inline-block and be centered to carousel area.
I don't know how both arrows and dots insert into one parent element and the functionality will remain the same.

[martinkovac]

OK I got this. appendArrows and appendDots options helps :)

[Critter]

Could you show an example of how you are using appendArrows? I am passing in a jquery element, but I cannot get it to work.

[Critter]

Thanks. That definitely points me in the right direction.

When I set my code up like that it gets returned as

<div class="slider-container">
<div class="slider-item">...</div>
<div class="slider-nav">
    <span class="slick-prev"></span>
    <span class="slick-next"></span>
    <ul class="slick-dots">...</ul>
</div>

Are you having to override the CSS selectors for the arrows and dots to get the dots between the arrows? While the arrows and dots are /in/ the slider-nav.. they are still showing up to the left and right of the slide item

[martinkovac]

Hi Critter, yes all I need to do is apply CSS rules so the arrows and dots will look like on the picture above.

The code was an example, but here is my whole code.

HTML:
almost the same but slider-nav element is inside slider-nav-container.
<div class="slider-container"> <div class="slider-item"> ... </div> <div class="slider-item"> ... </div> <div class="slider-item"> ... </div> <div class="slider-nav-container"><div class="slider-nav"></div></div> </div>

JS:
is the same as before.

CSS:
`
.slider-nav-container {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
z-index: 3;
text-align: center;

.slider-nav {
display: inline-block;
.slick-dots {
margin: 0 10px;
position: relative;
top: 4px;
bottom: auto;
width: auto;
height: 10px;
display: inline-block;
li {
position: relative;
top: -10px;
button {
background-color: #ffffff;
}
&.slick-active {
button {
background-color: #fcb813;
}
}
}
}
.slick-prev, .slick-next {
position: relative;
left: auto;
right: auto;
display: inline-block;
color: #ffffff;
&:hover:before {
color: #fcb813;
}
}
.slick-prev {
float: left;
}
.slick-next {
float: right;
}
}
}
`
Hope this help. Important is display: inline-block, text-align: center, and floating for slick-next and slick-prev.

[Critter]

That totally sorted me out. A thousand thank yous.

I really appreciate you taking the time. Thanks.

[julianxhokaxhiu]

This is working ONLY if we have one slider in the page. What if we have two or more?

I think that appendArrows should be also a callback that as arguments have the current slick istance so we can append something when we want (after the slick element have been initialized) RELATIVE to the current istance.

Otherwise you would get in the same container ( like .slider-nav )

(Nth time the arrows and dots) * (numbers of slick sliders in the page)

Practically because appendArrows is not having any "relative context", it will be appended to any slick slider visibile on the page.

An example of this bug here: http://jsbin.com/jufiliheci/1/

[martinkovac]

Just use
$('.slider-container').each(function() { ... })
for example.
Then you can point to specific element for example: appendArrows: $(this).find('.slider-nav')
Hope it helps

[martinkovac]

I have update your example: http://jsbin.com/dimozi/1/edit?html,js,output

[ccreusat]

Hi,
I was looking for this solution but it doesn't work anymore with slick 1.5 and slick 1.5.5.
It's ok with 1.4 but I need last version for my project... someone can help ?
regards

[gabrieldrummer]

Hi,
I know topic was closed long time ago, but I got problem with solution developed by martinkovac. Martinkovac would You make a working example on fiddle or codepen?

[itsshajad]

it is possible in react ??