<div class="component__inner narrative__inner mr_wrapper_container_narrative" style="background-color: {{bgColor}};">

  {{!-- {{> component this}} --}}

  <div class="narrative_main_container">
    <div class="narrative-container-title">

      <h2 class="narrative_heading" style="color: {{titleColor}}">
        {{{title}}}
      </h2>

      <div class="instruction_text" tabindex="0">
        <p>{{{body}}}</p>

        {{#if instruction}}
        <p tabindex="0"><em>{{instruction}}</em></p>
        {{/if}}
      </div>


      {{!-- <div
        class="component__widget narrative__widget{{#if _hasNavigationInTextArea}} narrative__text-controls{{/if}}">
        --}}
        <div class="main_narrative_wrapper">
          <div class="main_slider_container" style="background-color: {{bgcolor}};">

            {{#if _typeofActivity_carosel_img_text}}

            <div class="main-container">

              <div class="narrative_text_inner_wrapper">
                <div class="narrative__slide-container">
                  <div class="narrative__slider">

                    {{#each _items}}
                    <div
                      class="narrative__slider-image-container{{#if _isVisited}} is-visited{{/if}}{{#if _graphic.attribution}} has-attribution{{/if}}"
                      style="" data-index="{{@index}}">

                      <div class="myImgCrausal">
                        <img src="{{imgcrausal}}" alt="{{imgalt}}" tabindex="0">
                      </div>
                    </div>
                    {{/each}}
                  </div>
                </div>

                <div class="narrative__content">
                  <div class="narrative__content-inner">
                    {{#each _items}}
                    <div class="narrative__content-item{{#if _isVisited}} is-visited{{/if}}" data-index="{{@index}}" >
                      <div class="leftBody" tabindex="0">
                        {{{body}}}
                      </div>
                    </div>
                    {{/each}}


                  </div>
                </div>
              </div>


              <div class="narrative__indicators narrative__slide-indicators">

                {{#each _items}}
                <div class="narrative__progress js-narrative-progress-click{{#if _isVisited}} is-visited{{/if}}"
                  data-index="{{@index}}">
                </div>
                {{/each}}

              </div>
            </div>
            {{/if}}

            <button data-direction="left"
              class="btn-icon narrative__controls narrative__controls-left js-narrative-controls-click"
              aria-label="{{_globals._accessibility._ariaLabels.previous}}">
              <img src="course\en\images\icon\back.png" />
            </button>

            <button data-direction="right"
              class="btn-icon narrative__controls narrative__controls-right js-narrative-controls-click"
              aria-label="{{_globals._accessibility._ariaLabels.next}}">
              <img src="course\en\images\icon\next.png" />
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>