Developer forum

Forum » Templates » slideshow nav in xslt

slideshow nav in xslt

Lise T. Pedersen
Reply

I need to output a "button menu" for a slideshow with various number of slides - guess I have to create a variation of a navigation XSLT template for this - and hopes anyone can point me in the right direction? The code below is the original programming for the buttons, which I have to implement on some way in XSLT-file.

 

        <nav class="nav  nav--dots  nav--slideshow" data-slideshow="#slideshow-1">
          <button class="nav__item  nav__item--active  jquery__slideshowNav" data-slideshow-target="0"></button>
          <button class="nav__item  jquery__slideshowNav" data-slideshow-target="1"></button>
        </nav>

//Lise


Replies

 
Nicolai Høeg Pedersen
Reply

Where does the images in the slideshow come from? Which template do you use for those?

I'm almost sure you do not need a Navigation XML....

 
Lise T. Pedersen
Reply

Here is all my original code - without dwtags - each slide is of course a separate paragraph in dynamicweb, this is working, I only need the buttons:

<!-- 
          START SLIDESHOW
        -->
        <header class="slideshow  jquery__slideshow" id="slideshow-1">

          <div class="slideshow__item  slideshow__item--collapsed" style="background-image:url('images/slide-dummy.jpg');">
            <div class="slideshow__body">
              <h1>Slideshow med baggrunds billede og tekst boks 1</h1>
              <p>Vi kan sætte lige hvad vi har lyst til ind i dette slideshow!</p>
              <p><a href="#underside.html" class="button">Læs mere</a></p>
            </div>
            <button class="slideshow__button  jquery__slideshow--expand">Læs mere</button>
          </div>

          <div class="slideshow__item" style="background-image:url('images/slide-dummy.jpg');">
            <div class="slideshow__body">
              <h1>Slideshow med baggrunds billede og tekst boks 2</h1>
              <p>Vi kan sætte lige hvad vi har lyst til ind i dette slideshow!</p>
            </div>
          </div>

        </header>

        <!--
          NOTE: Output a <button> for each slide and start from 0 in the slideshow target attribute and remember the id for which slideshow needs to manipulated aswell.
        -->
        <nav class="nav  nav--dots  nav--slideshow" data-slideshow="#slideshow-1">
          <button class="nav__item  nav__item--active  jquery__slideshowNav" data-slideshow-target="0"></button>
          <button class="nav__item  jquery__slideshowNav" data-slideshow-target="1"></button>
        </nav>

        <!-- END SLIDESHOW -->

 

 
Nicolai Høeg Pedersen
Reply

ok, then you should just add a paragraph template with your navigation markup and add it to the list of image paragraphs as the last one.

 
Lise T. Pedersen
Reply

Hmmm ... but I would very much like it to be dynamic, depending on how many slides we have in the slideshow - the different slides is to be managed by the customer, and they are not supposed to be able to change the code.

In this way, it will be static, as I see it?

Have tried to use the ParagraphContainerSort tag in the template for identifying the number of slides, but not with much luck. 

Any suggestions?

/Lise

 

 
Nicolai Høeg Pedersen
Reply

You should really use an item instead - a Gallery item with list of Gallery images (item type 2). It would support all of this.

Using navigation will not help you either because you do not navigate paragraphs...

 
Lise T. Pedersen
Reply

I have now created items for the gallery instead, as you suggested, and it works fine.

But I can't figure out how to make the nav output dynamic in relation to the number of active slides, so that the number of "dots" fits the number of slides. Can I loop them in some way?

 

 

You must be logged in to post in the forum