Flickity slide show list

Question

I’m developing a page that contains 2 slides. 1 main and other related to it; but I need to create a pro slide navigation menu apart.

I built it as follows, generating 3 slides and using 1 of them for navigation:

html

<div class="nav">
    <ul class="carousel-navg">
        <li class="carousel-slideg" style="background-color: orange;"> DTexto1</li>
        <li class="carousel-slideg" style="background-color: blue;"> DTexto2</li>

    </ul>

    <div class="carousel-main">
        <div class="carousel-slide" style="background-color: orange;">DTexto1</div>
        <div class="carousel-slide" style="background-color: red;">DTexto2</div>
    </div>

    <div class="carousel-nav">
        <div class="carousel-slide" style="background-color: grey;"> "DTexto1"</div>
        <div class="carousel-slide" style="background-color: white;"> "DTexto2"</div>
    </div>
    </div>

And the jquery

$(document).ready(function(){
    $('.carousel-main').flickity({
    prevNextButtons: false,
    pageDots: false
    });
        $('.carousel-nav').flickity({
  asNavFor: document.querySelector('.carousel-main'),
  pageDots: false,
  prevNextButtons: false
});
    $('.carousel-navg').flickity({
  asNavFor: document.querySelector('.carousel-main'),
  contain: true,
  pageDots: false,
  prevNextButtons: false
});
});

I wonder if I can transform a navigation that were just buttons and not another slide. I tried to put them as Dots, but the same does not recognize.

I’m using Flickity for the same. flickity.metafizzy.co

Thank you.