Flickity slide show list

Asked

Viewed 60 times

0

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.

  • 1

    Can you explain better brother? I don’t understand your doubt.

  • Opa, good night Rafael. I need to create a navigation menu for 2 slides. In case; I am generating 3 slides and a this serving for navigation.

  • Bro I think I better draw pq I’m still not understanding kkkkkkkkkkkkkkkk, have some example of something similar?

  • Hahahahaha ended up developing a similar one; ta nessa link http://suziteresa.com.br/textos.html . When you press on one of the texts, for example Depression (blábláblá) it changes slide.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.