@designcrowd/fe-shared-lib 1.5.3-CarouselUpdatev0 → 1.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,7 +4,7 @@
4
4
  <slot v-if="showControls" name="arrow-left">
5
5
  <div id="btn_carousel_prev" class="carousel__button-nav" :class="navigationPrevClass">
6
6
  <div
7
- class="tw-block tw-cursor-pointer tw-absolute tw-z-10 tw-left-0 tw-top-1/2 tw--translate-y-1/2 tw-h-10 tw-w-10 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
7
+ class="tw-hidden sm:tw-block tw-cursor-pointer tw-absolute tw-z-10 tw--left-16 tw-top-1/2 tw-transform tw--translate-y-1/2 tw-h-10 tw-w-10 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
8
8
  :class="{
9
9
  'nav-carousel__button-prev-pointer': navCarousel,
10
10
  }"
@@ -15,6 +15,18 @@
15
15
  size="sm"
16
16
  />
17
17
  </div>
18
+ <div
19
+ class="sm:tw-hidden tw-cursor-pointer tw-mr-2 tw-h-6 tw-w-6 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
20
+ :class="{
21
+ 'nav-carousel__button-prev-pointer': navCarousel,
22
+ }"
23
+ >
24
+ <Icon
25
+ classes="tw--mb-1 tw-absolute tw-left-0 tw-right-2 tw-m-auto tw-flex tw-justify-center tw-top-1/2 tw-transform tw--translate-y-1/2"
26
+ name="chevron-left"
27
+ size="xs"
28
+ />
29
+ </div>
18
30
  </div>
19
31
  </slot>
20
32
  <swiper
@@ -45,7 +57,7 @@
45
57
  <slot v-if="showControls" name="arrow-right">
46
58
  <div id="btn_carousel_next" class="carousel__button-nav" :class="navigationNextClass">
47
59
  <div
48
- class="tw-block tw-cursor-pointer tw-absolute tw-z-10 tw-right-0 tw-top-1/2 tw--translate-y-1/2 tw-h-10 tw-w-10 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
60
+ class="tw-hidden sm:tw-block tw-cursor-pointer tw-absolute tw-z-10 tw--right-16 tw-top-1/2 tw-transform tw--translate-y-1/2 tw-h-10 tw-w-10 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
49
61
  :class="{
50
62
  'nav-carousel__button-next-pointer': navCarousel,
51
63
  }"
@@ -56,6 +68,18 @@
56
68
  size="sm"
57
69
  />
58
70
  </div>
71
+ <div
72
+ class="sm:tw-hidden tw-cursor-pointer tw-ml-2 tw-h-6 tw-w-6 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
73
+ :class="{
74
+ 'nav-carousel__button-next-pointer': navCarousel,
75
+ }"
76
+ >
77
+ <Icon
78
+ classes="tw--mb-1 tw-absolute tw-left-2 tw-right-0 tw-m-auto tw-flex tw-justify-center tw-top-1/2 tw-transform tw--translate-y-1/2"
79
+ name="chevron-right"
80
+ size="xs"
81
+ />
82
+ </div>
59
83
  </div>
60
84
  </slot>
61
85
  </div>
@@ -75,13 +99,13 @@
75
99
 
76
100
  <script>
77
101
  /* eslint-disable import/no-unresolved */
102
+ import { Swiper, SwiperSlide } from 'swiper/vue';
78
103
  import 'swiper/css';
79
- import 'swiper/css/free-mode';
80
104
  import 'swiper/css/navigation';
81
- import { Swiper, SwiperSlide } from 'swiper/vue';
105
+ import 'swiper/css/free-mode';
82
106
  /* eslint-enable import/no-unresolved */
83
107
  import merge from 'deepmerge';
84
- import { Autoplay, FreeMode, Keyboard, Navigation, Pagination } from 'swiper/modules';
108
+ import { Navigation, Pagination, Autoplay, Keyboard, FreeMode } from 'swiper/modules';
85
109
  import Icon from '../Icon/Icon.vue';
86
110
 
87
111
  export default {