<main class=“slide” id=“sectionContainer”>
{%- assign count = site.theme_setting.slides_count | default: 4 -%} {%- for book in site.books limit: count -%} {%- assign is_odd = forloop.index | modulo: 2 -%} <div class="slide__section"> {%- if is_odd == 1 -%} <div class="slide__img"> <a href="{{ book.url | relative_url }}" class="slide__link" title="{{ book.title }}"></a> <div class="slide__img_placehold"></div> <img src="{{ book.img | img_url_prefix }}" class="slide__img_entity" alt="{{ book.title }}"> </div> {%- endif -%} <div class="slide__text {% if is_odd == 1 %}slide__text_right{% else %}slide__text_left{% endif %}"> <a href="{{ book.url | relative_url }}" class="slide__link" title="{{ book.title }}"></a> <div class="slide__title"> <div class="slide__title_inner"> <h2 class="slide__title_text">{{ book.title }}</h2> </div> </div> <div class="slide__time"> <div class="slide__time_inner"> <p class="slide__time_text">{{ book.date }}</p> </div> </div> </div> {%- if is_odd == 0 -%} <div class="slide__img"> <a href="{{ book.url | relative_url }}" class="slide__link" title="{{ book.title }}"></a> <div class="slide__img_placehold"></div> <img src="{{ book.img | img_url_prefix }}" alt="{{ book.title }}"> </div> {%- endif -%} </div> {%- endfor -%}
</main>
<ul class=“slide__controls”>
<div class="slide__control__icon slide__control_top" id="prevBtn"> <svg width="40" height="40"> <circle class="circle-progress" r="18" cy="20" cx="20" stroke-linejoin="round" stroke-linecap="round" /> </svg> <span class="slide__control_arrow slide__control_up"></span> </div> {%- for book in site.books limit: count -%} <li class="slide__control {% if forloop.index == 1 %}current{% endif %}"></li> {%- endfor -%} <div class="slide__control__icon slide__control_bottom" id="nextBtn"> <svg width="40" height="40"> <circle class="circle-progress" r="18" cy="20" cx="20" stroke-linejoin="round" stroke-linecap="round" /> </svg> <span class="slide__control_arrow slide__control_down"></span> </div>
</ul>