CODEWITHSUNDEEP
javascriptjquerycssslick.js
Cray
Cray

Reputation: 5483

Position dots between buttons in slick slider

I want to position the dots of the slick slider between the prev and next button. Slick provides settings to let you position the dots/buttons. But they will show after each other.

This is my code:

$('.slider').slick({
    arrows: true,
    prevArrow: '<button type="button" class="slick-prev"> <- </button>',
    nextArrow: '<button type="button" class="slick-next"> -> </button>',
    appendArrows:$('.slider-controls'),
    dots: true,
    appendDots:$('.slider-controls'),
});

It generates the controls like this:

<div class="slider-controls d-flex align-items-center justify-content-center">
    <button type="button" class="slick-prev slick-arrow" style=""> &lt;- </button>
    <button type="button" class="slick-next slick-arrow" style=""> -&gt; </button>
    <ul class="slick-dots" style="" role="tablist">
        <li class="slick-active" role="presentation"><button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 3" tabindex="0" aria-selected="true">1</button></li>
        <li role="presentation" class=""><button type="button" role="tab" id="slick-slide-control01" aria-controls="slick-slide01" aria-label="2 of 3" tabindex="-1">2</button></li>
        <li role="presentation" class=""><button type="button" role="tab" id="slick-slide-control02" aria-controls="slick-slide02" aria-label="3 of 3" tabindex="-1">3</button></li>
    </ul>
</div>

But I want/need it like this:

<div class="slider-controls d-flex align-items-center justify-content-center">
    <button type="button" class="slick-prev slick-arrow" style=""> &lt;- </button>

    <ul class="slick-dots" style="" role="tablist">
        <li class="slick-active" role="presentation"><button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 3" tabindex="0" aria-selected="true">1</button></li>
        <li role="presentation" class=""><button type="button" role="tab" id="slick-slide-control01" aria-controls="slick-slide01" aria-label="2 of 3" tabindex="-1">2</button></li>
        <li role="presentation" class=""><button type="button" role="tab" id="slick-slide-control02" aria-controls="slick-slide02" aria-label="3 of 3" tabindex="-1">3</button></li>
    </ul>

    <button type="button" class="slick-next slick-arrow" style=""> -&gt; </button>
</div>

I know I could position the buttons with CSS but there are a few reasons, that I need the HTML like this.

Is there any way?

Upvotes: 1

Views: 5455

Answers (1)

Cray
Cray

Reputation: 5483

I found a solution. You could add the following code to use a specific button as lin

nextArrow: $('#next')

And then add your custom button with the ID:

<button type="button" class="slick-next" id="next"> <- </button>

Full code:

$('.slider').slick({
    arrows: true,
    prevArrow: $('#prev'),
    nextArrow: $('#next'),
    dots: true,
});

    <button type="button" class="slick-prev" id="prev"> -> </button>

    <div class="slider">
            <div>your content</div>
            <div>your content</div>
            <div>your content</div>
    </div>

    <button type="button" class="slick-next" id="next"> -> </button>

Upvotes: 2

Related Questions