<p>First, store your slides in a variable when you fetch them using <code>craft.entries</code>. Then, you can use the <code>length</code> property of that variable (which will be equal to the number of slides) to output your dots/navigation.</p>

<p>Full example:</p>

<pre><code>{# Get the slides, store in variable called "slides" #}
{% set slides = craft.entries.section( 'yourSlideSection' ).limit( 3 ) %}

{% if slides %}
&lt;ul class="slideshow"&gt;

    {# Output slides, using the same "slides" variable #}
    {% for slide in slides %}
    &lt;li class="slide"&gt;[Your slide content here]&lt;/li&gt;
    {% endfor %}

    {% if craft.entries.section('handle').lightswitchHandle('1') is defined %}
    {# Output navigation, check length of "slides" variable #}
    &lt;ul class="nav"&gt;
         {% for i in 0..slides | length - 1 %}
         &lt;li data-uk-slideshow-item="{{ i }}"&gt;
              &lt;a href=""&gt;&lt;/a&gt;
         &lt;/li&gt;
         {% endfor %}
    &lt;/ul&gt;
    {% endif %}

&lt;/ul&gt;
{% endif %}
</code></pre>

<p>What the inner navigation loop does here, is to increment the variable <code>i</code> by one, each time the loop runs, until <code>i</code> is equal to the number of slides (<code>slides | length</code>). This means you'll always have exactly the same number of dots as slides. Inside the loop, the variable <code>i</code> is also used for the data attribute.</p>

<p><a href="http://twig.sensiolabs.org/doc/tags/for.html" rel="nofollow">More on the Twig loop function here</a></p>

CC BY-SA 3.0
2015-03-08T20:30:52.133Z
I updated my question with implementation I have. Without `{% if slides.type == 'article %} {% include '_includes/components/food/news-article' %}` and so on, It works. But with it I get empty slides. There is something I did wrong.
Dominik Krulak
CC BY-SA 3.0
2015-03-08T20:36:43.607Z
When you loop through the slides, you do a check for ```slides.type```. Should that be ```slide.type```? Is the "type" property set to each slide, or the slideshow as a whole?
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2015-03-08T20:52:47.980Z
Also, what happens inside the templates you include is obviously not arbitrary – if you want to print any data from the individual slide, you'd have to target the "slide" (singular) variable inside those templates. If they however use another variable to output the data, e.g. "entry.title", you can either modify the templates, or just do ```{% include 'yourTemplate' with { 'entry' : slide } %}```
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2015-03-09T08:53:46.990Z
Those slides are entries with types. So I want each slide have any types of entry when the condition is met. One slide - one entry type. I'm thinking now, If I shouldn't filter them randomly, because If first condition will be true, than first entry type in first If statement will be print. And that may be quiet often. Hmmm. But anyway, I corrected from `slides` to `slide`, which I had that set previously and didn't work, because I skipped to update `slide` one `{% include 'file' %}` with. So from that reason I set it to `slides`. But **It is working GREAT!!** THANK YOU!
Dominik Krulak
CC BY-SA 3.0
2015-03-09T08:56:06.377Z
One thing to ask. Why did We put `slide` in singular, if that variable is not set in whole code?
Dominik Krulak
CC BY-SA 3.0
2015-03-09T09:17:02.050Z
Great that you got it working. As for your question - the "slides" variable contains all the slide entries (throughout the entire script), while the "slide" variable will refer to a single slide inside the loop.
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2015-03-09T09:33:31.143Z
So that Twig function that recognize plurars from singulars variables is predefined as a Twig's function?
Dominik Krulak
CC BY-SA 3.0
2015-03-09T10:51:44.850Z
I'm not sure I follow, but "slides" and "slide" are just semantic, but ultimately arbitrary, variable names that I chose for the array of entries and the single entry inside the loop, respectively. You could call them anything you want, it doesn't really have anything to do with Twig.
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2015-03-09T12:54:02.993Z
E.g What if We set variable in our code `potatoes` instead slides. Would looping `{% for potato in potatoes %}` still works?
Dominik Krulak
CC BY-SA 3.0
2015-03-09T13:07:03.897Z
Yes, as long as you had ```{% set potatoes =  craft.entries.section('food').news('1').limit(3) %}``` initially, of course. Also, the templates you include within the loop would need to look at "potato" to output data from the actual entries, i.e. ```{{ potato.title }}``` and not ```{{ slide.title }}``` – although you _can_ rename the variable when its passed to the template, e.g. ```{% include '_includes/components/food/news-recipe' with { 'slide' : potato %}```.
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2015-03-09T13:17:08.407Z
Again, I encourage you to take a look at [Twig's docs on the loop function](http://twig.sensiolabs.org/doc/tags/for.html). Looping is a fairly basic concept in programming and although Twig's implementation would differ a bit in syntax from other languages (e.g. PHP or Javascript), the concept is exactly the same: In this case iterating over an array of objects ("slides" or "potatoes"), and doing stuff to or with each of those objects ("slide" or "potato").
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2015-03-09T14:10:22.107Z
I quiet understand all that, except setting variable. Once we `{% set potatoes =  craft.entries.section('food').news('1').limit(3) %}` and than use in `{% for potato in potatoes %}`, therefor `potato` isn't set nowhere as our variable, but `potatoes`. This is What confuses me. But anyway, I got it understand your point, It's much easier looking at it now. THANK YOU
Dominik Krulak
CC BY-SA 3.0
2015-03-09T14:21:41.453Z
My pleasure. The ```potato``` variable is actually created within the ```for``` tag – which I guess can be a bit confusing, but it's very similar to how a PHP ```foreach``` loop works, i.e. ```foreach ( $potatoes as $potato ) {}```. You'll notice that PHP uses the "as" keyword instead of "in", and that the position of the array variable ("potatoes") and the iterated value ("potato") is reversed compared to Twig – but its the exact same thing.
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2015-03-08T15:27:34.987Z
2015-03-16T11:58:30.817Z
2015-03-16T11:58:30.817Z
Mats Mikkel Rummelhoff
<p>I came across this post while attempting to solve a similar problem myself. Here is my solution (I am sure it could be refactored some) using Bootstrap 4 Beta and a Matrix field. This includes the indicators and the next/prev button. I wanted to make sure if the client added more photos to the carousel, it would scale properly. I wouldn't suggest more than 5 slides, though.</p>

<pre><code>{% if entry.carousel | length %}
&lt;div class="container-fluid quotes p-0 hidden-sm-down"&gt;
  &lt;div id="quotesCarousel" class="carousel slide" data-ride="carousel" data-interval="6000" &gt;

  &lt;div class="carousel-inner" role="listbox"&gt;
    {% set carousel_count = 0 %}
    {% for block in entry.carousel %}
      {% set loopIndex = loop.index %}
      {% switch block.type %}
        {% case 'carouselSegment' %}
          {% set carousel_count = loopIndex %}
          {% set image = block.image.first %}
            &lt;div class="carousel-item {% if loopIndex == 1 %}active{% endif %}"&gt;
              &lt;div class="carousel-caption d-none d-md-block align-items-center"&gt;
                &lt;h3&gt;&lt;em&gt;{{block.mainContent}}&lt;/em&gt;&lt;/h3&gt;
                &lt;h2 class="py-3"&gt;{{block.subContent}}&lt;/h2&gt;
                &lt;h4&gt;{{block.contentSource}}&lt;/h4&gt;
              &lt;/div&gt;
              &lt;img class="d-block img-fluid" src="{{image.getUrl()}}" alt="{{image.title}}"&gt;
            &lt;/div&gt;
      {% endswitch %}
    {% endfor %}
  &lt;/div&gt;

  &lt;ol class="carousel-indicators"&gt;
    {% for i in 1..carousel_count %}
    &lt;li data-target="#quotesCarousel" data-slide-to="{{i}}" class="{% if i == 1 %}active{% endif %}"&gt;&lt;/li&gt;
    {% endfor %}
  &lt;/ol&gt;

  &lt;a class="carousel-control-prev" href="#quotesCarousel" role="button" data-slide="prev"&gt;
    &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class="carousel-control-next" href="#quotesCarousel" role="button" data-slide="next"&gt;
    &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;Next&lt;/span&gt;
  &lt;/a&gt;

  &lt;/div&gt;
&lt;/div&gt;
{% endif %}
</code></pre>

CC BY-SA 3.0
2017-08-26T13:48:58.090Z
2017-08-26T13:48:58.090Z
MiggityMac
<p>I have this <a href="http://getuikit.com/docs/slideshow.html" rel="nofollow">slideshow</a> implementing to entries, which works except Dot navigation.</p>

<p>A count of Dots in navigations depends on manually inputing attributes and assigning 
numbers from 0...∞ ascendingly like this.</p>

<pre><code>&lt;ul&gt;
    &lt;li data-uk-slideshow-item="0"&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li data-uk-slideshow-item="1"&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li data-uk-slideshow-item="2"&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Actually, I <code>limit(3)</code> count of entries, so I know that there will be a certain number of dots. However, If there aren't any entries defined or only 1 entry defined, than I always get all three dots appeared, which don't function. So there MUST to be the exact number of dots as entries. </p>

<ul>
<li>1 Entry: 1 Dot</li>
<li>2 Entires: 2 Dots</li>
<li>3 Entries: 3 Dots</li>
</ul>

<p>So I'm thinking to go with <code>if</code> condition or loop through entries, but with my attribute output with number increased by 1.</p>

<p>So far, I've started with <code>if</code>, because no need to loop ... and I don't know, if this is right way.</p>

<pre><code>{# Display navigation if the condition is true #}
{% if craft.entries.section('handle').lightswitchHandle('1') is defined %}

&lt;ul&gt;
{# This is where I end up ... some comparission filter maybe ? #}
{% if craft.entries.section('handle').lightswitchHandle('1') %}
  &lt;li data-uk-slideshow-item="0"&gt;
      &lt;a href=""&gt;&lt;/a&gt;
  &lt;/li&gt;    
{% elseif craft.entries.section('handle').lightswitchHandle('1') %}
  &lt;li data-uk-slideshow-item="1"&gt;
      &lt;a href=""&gt;&lt;/a&gt;
  &lt;/li&gt;    
{% endif %} 
&lt;/ul&gt;
{% endif %}
</code></pre>

<p><strong>Update</strong></p>

<pre><code>&lt;div id="food-slideshow" class="uk-switcher"&gt;
&lt;div data-uk-slideshow&gt;
    &lt;span&gt;&lt;a href="" data-uk-slideshow-item="previous"&gt;p&lt;/a&gt;&lt;/span&gt;
    &lt;span&gt;&lt;a href="" data-uk-slideshow-item="next"&gt;n&lt;/a&gt;&lt;/span&gt;

    {# Get the slides, store in variable called "slides" #}
    {% set slides = craft.entries.section('food').news('1').limit(3) %}

    {% if slides %}
        &lt;ul class="uk-slideshow"&gt;
        {# Output slides, using the same "slides" variable #}    
        {# Loop through "news" with lightswitch on #}
        {% for slide in slides %}
            {# Entry type - Article #}
            {% if slides.type == 'article' %}
                {% include '_includes/components/food/news-article' %}
            {# Entry type - Person #}   
            {% elseif slides.type == 'person' %}
                {% include '_includes/components/food/news-person' %}
            {# Entry type - Recipe #}
            {% elseif slides.type == 'recipe' %}
                {% include '_includes/components/food/news-recipe' %}
            {% endif %}
            {% else %}
                &lt;p&gt;Any Text&lt;/p&gt;
        {% endfor %}

        &lt;/ul&gt;
    {% endif %}

{% if craft.entries.section('food').news('1') is defined %}
{# Output navigation, check length of "slides" variable #}
&lt;ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-text-center"&gt;
     {% for i in 1..slides | length %}
         &lt;li data-uk-slideshow-item="{{ i }}"&gt;
            &lt;a href=""&gt;&lt;/a&gt;
         &lt;/li&gt;
     {% endfor %}
&lt;/ul&gt;
{% endif %}

&lt;/div&gt;
</code></pre>

<p>  </p>

CC BY-SA 3.0
2015-03-08T20:45:43.700Z
The second if statement (```{% if craft.entries.section('food').news('1') is defined %}```) is redundant. If the first statement evaluates to true, the second one will, as well – just have the ```{% if slides %}``` statement wrap all the markup (as in my example below) down to just before the final ```</div>``` tag, alternatively replace the second statement with an additional check for ```{% if slides %}```. Will save you a DB query.
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2015-03-08T20:47:06.140Z
Also, exactly what does the "news(1)" part of the query do?
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2015-03-09T08:43:00.767Z
It's the lightswitch handle.
Dominik Krulak
<entries>
Creating a slideshow with dots navigation
# Creating a slideshow with dots navigation

(Asked by: username_0 on 2015-03-08)

I have this slideshow implementing to entries, which works except Dot navigation.
A count of Dots in navigations depends on manually inputing attributes and assigning 
numbers from 0...∞ ascendingly like this.

    
    
    


Actually, I limit(3) count of entries, so I know that there will be a certain number of dots. However, If there aren't any entries defined or only 1 entry defined, than I always get all three dots appeared, which don't function. So there MUST to be the exact number of dots as entries. 

1 Entry: 1 Dot
2 Entires: 2 Dots
3 Entries: 3 Dots

So I'm thinking to go with if condition or loop through entries, but with my attribute output with number increased by 1.
So far, I've started with if, because no need to loop ... and I don't know, if this is right way.
{# Display navigation if the condition is true #}
{% if craft.entries.section('handle').lightswitchHandle('1') is defined %}


{# This is where I end up ... some comparission filter maybe ? #}
{% if craft.entries.section('handle').lightswitchHandle('1') %}
  
      
      
{% elseif craft.entries.section('handle').lightswitchHandle('1') %}
  
      
      
{% endif %} 

{% endif %}

Update


    p
    n

    {# Get the slides, store in variable called "slides" #}
    {% set slides = craft.entries.section('food').news('1').limit(3) %}

    {% if slides %}
        
        {# Output slides, using the same "slides" variable #}    
        {# Loop through "news" with lightswitch on #}
        {% for slide in slides %}
            {# Entry type - Article #}
            {% if slides.type == 'article' %}
                {% include '_includes/components/food/news-article' %}
            {# Entry type - Person #}   
            {% elseif slides.type == 'person' %}
                {% include '_includes/components/food/news-person' %}
            {# Entry type - Recipe #}
            {% elseif slides.type == 'recipe' %}
                {% include '_includes/components/food/news-recipe' %}
            {% endif %}
            {% else %}
                Any Text
        {% endfor %}

        
    {% endif %}

{% if craft.entries.section('food').news('1') is defined %}
{# Output navigation, check length of "slides" variable #}

     {% for i in 1..slides | length %}
         
            
         
     {% endfor %}

{% endif %}

**Tags:** entries

> **Comments:**
> **username_1**: The second if statement (```{% if craft.entries.section('food').news('1') is defined %}```) is redundant. If the first statement evaluates to true, the second one will, as well – just have the ```{% if slides %}``` statement wrap all the markup (as in my example below) down to just before the final ```</div>``` tag, alternatively replace the second statement with an additional check for ```{% if slides %}```. Will save you a DB query.  
> **username_1**: Also, exactly what does the "news(1)" part of the query do?  
> **username_0**: It's the lightswitch handle.  

---

## 2 answers

### Answer by username_1 on 2015-03-08. Score: 4 | Accepted answer

First, store your slides in a variable when you fetch them using craft.entries. Then, you can use the length property of that variable (which will be equal to the number of slides) to output your dots/navigation.
Full example:
{# Get the slides, store in variable called "slides" #}
{% set slides = craft.entries.section( 'yourSlideSection' ).limit( 3 ) %}

{% if slides %}


    {# Output slides, using the same "slides" variable #}
    {% for slide in slides %}
    [Your slide content here]
    {% endfor %}

    {% if craft.entries.section('handle').lightswitchHandle('1') is defined %}
    {# Output navigation, check length of "slides" variable #}
    
         {% for i in 0..slides | length - 1 %}
         
              
         
         {% endfor %}
    
    {% endif %}


{% endif %}

What the inner navigation loop does here, is to increment the variable i by one, each time the loop runs, until i is equal to the number of slides (slides | length). This means you'll always have exactly the same number of dots as slides. Inside the loop, the variable i is also used for the data attribute.
More on the Twig loop function here

> **Comments:**
> **username_0**: I updated my question with implementation I have. Without `{% if slides.type == 'article %} {% include '_includes/components/food/news-article' %}` and so on, It works. But with it I get empty slides. There is something I did wrong.  
> **username_1**: When you loop through the slides, you do a check for ```slides.type```. Should that be ```slide.type```? Is the "type" property set to each slide, or the slideshow as a whole?  
> **username_1**: Also, what happens inside the templates you include is obviously not arbitrary – if you want to print any data from the individual slide, you'd have to target the "slide" (singular) variable inside those templates. If they however use another variable to output the data, e.g. "entry.title", you can either modify the templates, or just do ```{% include 'yourTemplate' with { 'entry' : slide } %}```  
> **username_0**: Those slides are entries with types. So I want each slide have any types of entry when the condition is met. One slide - one entry type. I'm thinking now, If I shouldn't filter them randomly, because If first condition will be true, than first entry type in first If statement will be print. And that may be quiet often. Hmmm. But anyway, I corrected from `slides` to `slide`, which I had that set previously and didn't work, because I skipped to update `slide` one `{% include 'file' %}` with. So from that reason I set it to `slides`. But **It is working GREAT!!** THANK YOU!  
> **username_0**: One thing to ask. Why did We put `slide` in singular, if that variable is not set in whole code?  
> **username_1**: Great that you got it working. As for your question - the "slides" variable contains all the slide entries (throughout the entire script), while the "slide" variable will refer to a single slide inside the loop.  
> **username_0**: So that Twig function that recognize plurars from singulars variables is predefined as a Twig's function?  
> **username_1**: I'm not sure I follow, but "slides" and "slide" are just semantic, but ultimately arbitrary, variable names that I chose for the array of entries and the single entry inside the loop, respectively. You could call them anything you want, it doesn't really have anything to do with Twig.  
> **username_0**: E.g What if We set variable in our code `potatoes` instead slides. Would looping `{% for potato in potatoes %}` still works?  
> **username_1**: Yes, as long as you had ```{% set potatoes =  craft.entries.section('food').news('1').limit(3) %}``` initially, of course. Also, the templates you include within the loop would need to look at "potato" to output data from the actual entries, i.e. ```{{ potato.title }}``` and not ```{{ slide.title }}``` – although you _can_ rename the variable when its passed to the template, e.g. ```{% include '_includes/components/food/news-recipe' with { 'slide' : potato %}```.  
> **username_1**: Again, I encourage you to take a look at [Twig's docs on the loop function](http://twig.sensiolabs.org/doc/tags/for.html). Looping is a fairly basic concept in programming and although Twig's implementation would differ a bit in syntax from other languages (e.g. PHP or Javascript), the concept is exactly the same: In this case iterating over an array of objects ("slides" or "potatoes"), and doing stuff to or with each of those objects ("slide" or "potato").  
> **username_0**: I quiet understand all that, except setting variable. Once we `{% set potatoes =  craft.entries.section('food').news('1').limit(3) %}` and than use in `{% for potato in potatoes %}`, therefor `potato` isn't set nowhere as our variable, but `potatoes`. This is What confuses me. But anyway, I got it understand your point, It's much easier looking at it now. THANK YOU  
> **username_1**: My pleasure. The ```potato``` variable is actually created within the ```for``` tag – which I guess can be a bit confusing, but it's very similar to how a PHP ```foreach``` loop works, i.e. ```foreach ( $potatoes as $potato ) {}```. You'll notice that PHP uses the "as" keyword instead of "in", and that the position of the array variable ("potatoes") and the iterated value ("potato") is reversed compared to Twig – but its the exact same thing.  

---

### Answer by username_2 on 2017-08-26. Score: 2

I came across this post while attempting to solve a similar problem myself. Here is my solution (I am sure it could be refactored some) using Bootstrap 4 Beta and a Matrix field. This includes the indicators and the next/prev button. I wanted to make sure if the client added more photos to the carousel, it would scale properly. I wouldn't suggest more than 5 slides, though.
{% if entry.carousel | length %}

  

  
    {% set carousel_count = 0 %}
    {% for block in entry.carousel %}
      {% set loopIndex = loop.index %}
      {% switch block.type %}
        {% case 'carouselSegment' %}
          {% set carousel_count = loopIndex %}
          {% set image = block.image.first %}
            
              
                {{block.mainContent}}
                {{block.subContent}}
                {{block.contentSource}}
              
              
            
      {% endswitch %}
    {% endfor %}
  

  
    {% for i in 1..carousel_count %}
    
    {% endfor %}
  

  
    
    Previous
  
  
    
    Next
  

  

{% endif %}


---

