I'm developing a page that contains 2 slides. 1 principal and other related to it; however I need to create a separate slide menu navigation.
I construct the same 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 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 turn a navigation that were just buttons and not another slide. I tried putting them as dots, but the same does not recognize.
I'm using Flickity for the same. flickity.metafizzy.co
Thank you.