Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-03-08T20:30:52.133Z
Answers.Text: 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.
Answers.UserDisplayName: Dominik Krulak
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-03-08T20:36:43.607Z
Answers.Text: 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?
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-03-08T20:52:47.980Z
Answers.Text: 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 } %}```
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-03-09T08:53:46.990Z
Answers.Text: 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!
Answers.UserDisplayName: Dominik Krulak
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-03-09T08:56:06.377Z
Answers.Text: One thing to ask. Why did We put `slide` in singular, if that variable is not set in whole code?
Answers.UserDisplayName: Dominik Krulak
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-03-09T09:17:02.050Z
Answers.Text: 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.
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-03-09T09:33:31.143Z
Answers.Text: So that Twig function that recognize plurars from singulars variables is predefined as a Twig's function?
Answers.UserDisplayName: Dominik Krulak
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-03-09T10:51:44.850Z
Answers.Text: 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.
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-03-09T12:54:02.993Z
Answers.Text: E.g What if We set variable in our code `potatoes` instead slides. Would looping `{% for potato in potatoes %}` still works?
Answers.UserDisplayName: Dominik Krulak
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-03-09T13:07:03.897Z
Answers.Text: 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 %}```.
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-03-09T13:17:08.407Z
Answers.Text: 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").
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-03-09T14:10:22.107Z
Answers.Text: 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
Answers.UserDisplayName: Dominik Krulak
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-03-09T14:21:41.453Z
Answers.Text: 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.
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-03-08T15:27:34.987Z
Answers.LastActivityDate: 2015-03-16T11:58:30.817Z
Answers.LastEditDate: 2015-03-16T11:58:30.817Z
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-08-26T13:48:58.090Z
Answers.LastActivityDate: 2017-08-26T13:48:58.090Z
Answers.UserDisplayName: MiggityMac
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-03-08T20:45:43.700Z
Comments.Text: 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.
Comments.UserDisplayName: Mats Mikkel Rummelhoff
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-03-08T20:47:06.140Z
Comments.Text: Also, exactly what does the "news(1)" part of the query do?
Comments.UserDisplayName: Mats Mikkel Rummelhoff
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-03-09T08:43:00.767Z
Comments.Text: It's the lightswitch handle.
Comments.UserDisplayName: Dominik Krulak
Tags: <entries>
Title: Creating a slideshow with dots navigation
ThreadText: # Creating a slideshow with dots navigation
  
  (Asked by: username_0 on 2015-03-08)
  
  I have this [slideshow](http://getuikit.com/docs/slideshow.html) 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.
  
  ```
  <ul>
      <li data-uk-slideshow-item="0"><a href=""></a></li>
      <li data-uk-slideshow-item="1"><a href=""></a></li>
      <li data-uk-slideshow-item="2"><a href=""></a></li>
  </ul>
  
  ```
  
  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 %}
  
  <ul>
  {# This is where I end up ... some comparission filter maybe ? #}
  {% if craft.entries.section('handle').lightswitchHandle('1') %}
    <li data-uk-slideshow-item="0">
        <a href=""></a>
    </li>    
  {% elseif craft.entries.section('handle').lightswitchHandle('1') %}
    <li data-uk-slideshow-item="1">
        <a href=""></a>
    </li>    
  {% endif %} 
  </ul>
  {% endif %}
  
  ```
  
  **Update**
  
  ```
  <div id="food-slideshow" class="uk-switcher">
  <div data-uk-slideshow>
      <span><a href="" data-uk-slideshow-item="previous">p</a></span>
      <span><a href="" data-uk-slideshow-item="next">n</a></span>
  
      {# Get the slides, store in variable called "slides" #}
      {% set slides = craft.entries.section('food').news('1').limit(3) %}
  
      {% if slides %}
          <ul class="uk-slideshow">
          {# 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 %}
                  <p>Any Text</p>
          {% endfor %}
  
          </ul>
      {% endif %}
  
  {% if craft.entries.section('food').news('1') is defined %}
  {# Output navigation, check length of "slides" variable #}
  <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-text-center">
       {% for i in 1..slides | length %}
           <li data-uk-slideshow-item="{{ i }}">
              <a href=""></a>
           </li>
       {% endfor %}
  </ul>
  {% endif %}
  
  </div>
  
  ```
  
  **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 %}
  <ul class="slideshow">
  
      {# Output slides, using the same "slides" variable #}
      {% for slide in slides %}
      <li class="slide">[Your slide content here]</li>
      {% endfor %}
  
      {% if craft.entries.section('handle').lightswitchHandle('1') is defined %}
      {# Output navigation, check length of "slides" variable #}
      <ul class="nav">
           {% for i in 0..slides | length - 1 %}
           <li data-uk-slideshow-item="{{ i }}">
                <a href=""></a>
           </li>
           {% endfor %}
      </ul>
      {% endif %}
  
  </ul>
  {% 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](http://twig.sensiolabs.org/doc/tags/for.html)
  
  > **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 %}
  <div class="container-fluid quotes p-0 hidden-sm-down">
    <div id="quotesCarousel" class="carousel slide" data-ride="carousel" data-interval="6000" >
  
    <div class="carousel-inner" role="listbox">
      {% 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 %}
              <div class="carousel-item {% if loopIndex == 1 %}active{% endif %}">
                <div class="carousel-caption d-none d-md-block align-items-center">
                  <h3><em>{{block.mainContent}}</em></h3>
                  <h2 class="py-3">{{block.subContent}}</h2>
                  <h4>{{block.contentSource}}</h4>
                </div>
                <img class="d-block img-fluid" src="{{image.getUrl()}}" alt="{{image.title}}">
              </div>
        {% endswitch %}
      {% endfor %}
    </div>
  
    <ol class="carousel-indicators">
      {% for i in 1..carousel_count %}
      <li data-target="#quotesCarousel" data-slide-to="{{i}}" class="{% if i == 1 %}active{% endif %}"></li>
      {% endfor %}
    </ol>
  
    <a class="carousel-control-prev" href="#quotesCarousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#quotesCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  
    </div>
  </div>
  {% endif %}
  
  ```
  
  
  ---
  
  