How to create slider/banner in Zymphonies Drupal 8 themes

We have used Nivo-slider module in most of the Drupal 7 Zymphonies Theme. Now, we are using Bootstrap Slider in all Drupal 8 Zymphonies Themes,

Not required to install any additional module to make Slider in Drupal 8 Zymphonies Themes.

Zymphonies Drupal 8 Themes has 'Slideshow' region to place the Bootstrap Slider.

1 Create Block

Navigate to Structure > Block layout > Place block > + Add custom block (admin/structure/block).
Copy and paste below HTML into Block description

<div class="carousel slide" data-ride="carousel" id="myCarousel">
   
   <!-- Indicators -->
   <ol class="carousel-indicators">
      <li class="active" data-slide-to="0" data-target="#myCarousel">&nbsp;</li>
      <li data-slide-to="1" data-target="#myCarousel">&nbsp;</li>
      <li data-slide-to="2" data-target="#myCarousel">&nbsp;</li>
   </ol>
   
   <!-- Wrapper for slides -->
   <div class="carousel-inner" role="listbox">
      <div class="item active">
         <img alt="Zymphonies Free Banner Image" src="http://demo.zymphonies.com/free-theme/common-files/demo-images/set01/img1.png" />
         <div class="carousel-caption">
            <h3>Slider Title</h3>
            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
         </div>
      </div>
      <div class="item">
         <img alt="Zymphonies Free Banner Image" src="http://demo.zymphonies.com/free-theme/common-files/demo-images/set01/img2.png" />
         <div class="carousel-caption">
            <h3>Slider Title</h3>
            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
         </div>
      </div>
      <div class="item">
         <img alt="Zymphonies Free Banner Image" src="http://demo.zymphonies.com/free-theme/common-files/demo-images/set01/img3.png" />
         <div class="carousel-caption">
            <h3>Slider Title</h3>
            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
         </div>
      </div>
      <!-- Place addition image item here -->
   </div>
</div>

2 Save Block

Make 'Text format' 'Full HTML' and click 'Save'.

3 Assign to 'Slideshow' region

Choose 'Region' in selectbox and click 'Save blocks'.

4 Congrats!

Now you can see working Slider with image which load from Zymphonies Server. Change images path, title and description. You can add additional slides also using below steps.

5 How to add more images in Slider?

Add item just below the last item or next to any 'item' DIV. Make sure that you are placing below HTML after 'item' closing DIV.

<div class="item">
    <img alt="Zymphonies Free Banner Image" src="http://demo.zymphonies.com/free-theme/common-files/demo-images/set01/img3.png" />
    <div class="carousel-caption">
        <h3>Slider Title</h3>
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
    </div>
</div>

Add navigation/pagination for new item, Just add new list below the existing pagination list and change data-slide-to value (data-slide-to="2")

<li data-slide-to="3" data-target="#myCarousel">&nbsp;</li>

Updated: The above method works only with Zymphonies Bootstrap 3 themes.