Zeen Component Library

# ZeenSliderSection

Компонент ZeenSliderSection

# Примеры:

Примеры использования ZeenSliderSection

# props

Название Тип Обязательный По умолчанию Описание

# Source Code - исходный код компонента

<template>
  <ZeenContainer>
    <div class="container">
      <div class="slider-section__actions">
        <ZeenHeadline v-bind="mainHeadlineAttrs">{{ title }}</ZeenHeadline>
        <button class="js-program-btn js-program-next swiper-button-disabled js-program-btn_desktop" ref="btnPrev">
          <svg
            class="quiz-section__icon"
            width="27"
            height="24"
            viewBox="0 0 27 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M26 12H1M1 12L14 23M1 12L14 1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </button>
        <button class="js-program-btn js-program-prev js-program-btn_desktop" ref="btnNext">
          <svg
            class="quiz-section__icon"
            width="27"
            height="24"
            viewBox="0 0 27 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M26 12H1M1 12L14 23M1 12L14 1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </button>
      </div>
      <div class="quiz-section__swiper swiper-container" ref="slider">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in items" :key="item.id || index">
            <slot name="singleItem" :item="item" />
          </div>
        </div>
        <div
          v-if="!isPagination"
          class="quiz-section__actions js-program-actions js-program-actions_none js-program-actions_phones"
        >
          <button class="js-program-btn js-program-next swiper-button-disabled" ref="btnPrevPhone">
            <svg
              class="quiz-section__icon"
              width="27"
              height="24"
              viewBox="0 0 27 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path d="M26 12H1M1 12L14 23M1 12L14 1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </button>
          <button class="js-program-btn js-program-prev" ref="btnNextPhone">
            <svg
              class="quiz-section__icon"
              width="27"
              height="24"
              viewBox="0 0 27 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path d="M26 12H1M1 12L14 23M1 12L14 1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </button>
        </div>
        <div v-if="isPagination" class="swiper-pagination" ref="pagination"></div>
      </div>
    </div>
  </ZeenContainer>
</template>

<script>
export default {
  name: 'ZeenSliderSection',
}
</script>

<style lang="scss">
:root {
  /* Размеры */
  --zeen-slider-section-size: var(--main-size);

  /* Цвета */
  --zeen-slider-section-color: var(--main-color);
}
</style>

<style scoped lang="scss"></style>

← ZeenOffer →