feat: Drop image examples and carousel

components/collection/unlockable/ImageSlider.vue

@@ -1,5 +1,9 @@
 <template>
  <div class="unlockable-image-slider mt-6">
+ <div
+ class="unlockable-image-tip border px-4 py-2 theme-background-color has-z-index-1 no-wrap">
+ {{ $t('mint.unlockable.imageTip') }}
+ </div>
  <div ref="container" class="keen-slider">
  <img
  v-for="image in imageList"
@@ -10,15 +14,13 @@
 
  <Transition name="fade">
  <div
- v-if="sliderSettings.leftArrowValid"
- class="arrow arrow-left"
- @click="slider?.moveToIdx(sliderSettings.leftCarouselIndex)"></div>
+ class="arrow arrow-left arrow-small-size"
+ @click="slider?.moveToIdx(sliderSettings.leftCarouselIndex)" />
  </Transition>
  <Transition name="fade">
  <div
- v-if="sliderSettings.rightArrowValid"
- class="arrow arrow-right"
- @click="slider?.moveToIdx(sliderSettings.rightCarouselIndex)"></div>
+ class="arrow arrow-right arrow-small-size"
+ @click="slider?.moveToIdx(sliderSettings.rightCarouselIndex)" />
  </Transition>
  <div ref="thumbnail" class="keen-slider thumbnail">
  <div v-for="image in imageList" :key="image" class="keen-slider__slide">
@@ -70,13 +72,15 @@ function ThumbnailPlugin(main) {
  }
 }
 
-const [container, slider] = useKeenSlider({})
+const [container, slider] = useKeenSlider({
+ loop: true,
+})
 const [thumbnail] = useKeenSlider(
  {
  initial: 0,
  slides: {
  perView: 4,
- spacing: 1,
+ spacing: 10,
  },
  },
  [ThumbnailPlugin(slider)]
@@ -89,8 +93,8 @@ const sliderSettings = computed(() => {
  const perView = Number(4)
  const leftArrowValid = abs !== 0
  const rightArrowValid = abs + perView < slides.length
- const leftCarouselIndex = Math.max(abs - 1, 0)
- const rightCarouselIndex = Math.min(abs + 1, slides.length - perView)
+ const leftCarouselIndex = (abs - 1 + perView) % perView
+ const rightCarouselIndex = (abs + 1) % perView
 
  return {
  leftArrowValid,
@@ -106,12 +110,15 @@ const sliderSettings = computed(() => {
 
 <style scoped lang="scss">
 @import '@/styles/abstracts/variables';
+@import '@/styles/components/carousel-arrows';
 
 .unlockable-image-slider {
  width: 580px;
+ position: relative;
 
  @include mobile {
- width: 100%;
+ width: 100% !important;
+ height: 100% !important;
  max-width: 560px;
  }
  @include tablet-only {
@@ -122,15 +129,28 @@ const sliderSettings = computed(() => {
  border: 1px solid theme('border-color');
  }
  }
+
+ .unlockable-image-tip {
+ border-radius: 3rem;
+ position: absolute;
+ left: 26px;
+ top: -14px;
+ @include mobile {
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ }
  .keen-slider__slide {
  height: 580px;
  width: 580px;
  object-fit: cover;
  @include tablet-only {
  width: 768px;
+ height: 100%;
  }
  @include mobile {
  width: 100%;
+ height: 100%;
  }
  }
  .thumbnail .keen-slider__slide {
@@ -139,16 +159,17 @@ const sliderSettings = computed(() => {
  width: 136px;
  @include tablet-only {
  width: calc(768px / 4);
+ height: 100%;
  }
  @include mobile {
  width: 25%;
  max-width: 136px;
  }
  img {
- height: 136px;
- width: 136px;
- @include touch {
- width: calc(100% - 8px);
+ width: 100%;
+ height: 100%;
+ @include mobile {
+ height: min-content;
  }
  object-fit: cover;
  &:hover {
@@ -164,4 +185,16 @@ const sliderSettings = computed(() => {
  }
  }
 }
+.arrow {
+ display: block;
+ height: 40px;
+ &-left {
+ left: 10px;
+ top: 34%;
+ }
+ &-right {
+ right: 10px;
+ top: 34%;
+ }
+}
 </style>

components/collection/unlockable/UnlockableContainer.vue

@@ -171,7 +171,7 @@ import UnlockableSlider from '@/components/collection/unlockable/UnlockableSlide
 import UnlockableSchedule from '@/components/collection/unlockable/UnlockableSchedule.vue'
 import unloackableBanner from '@/assets/unlockable-introduce.svg'
 import { doWaifu, getLatestWaifuImages } from '@/services/waifu'
-import { collectionId, countDownTime } from './const'
+import { DISPLAY_SLIDE_IMAGE_COUNT, collectionId, countDownTime } from './const'
 import { UNLOCKABLE_CAMPAIGN, createUnlockableMetadata } from './utils'
 import { endOfHour, startOfHour } from 'date-fns'
 import type Vue from 'vue'
@@ -200,7 +200,9 @@ const justMinted = ref('')
 
 onMounted(async () => {
  const res = await getLatestWaifuImages()
- imageList.value = res.result.map((item) => item.output)
+ imageList.value = res.result
+ .slice(0, DISPLAY_SLIDE_IMAGE_COUNT)
+ .map((item) => item.output)
  resultList.value = res.result
 })
 

components/collection/unlockable/const.ts

@@ -5,3 +5,5 @@ export const countDownTime = endOfHour(now).getTime()
 
 export const slidesCountOnTimeCountdown = 10
 export const collectionId = '8'
+
+export const DISPLAY_SLIDE_IMAGE_COUNT = 4

locales/en.json

@@ -482,6 +482,7 @@
  "viewItem": "View Item",
  "preparing": "Preparing Your Item...",
  "alreadyMinted": "🎉 You already have this NFT, check it here",
+ "imageTip": "Examples Of Possible Drop",
  "loader": {
  "shareSuccess": "Share your success",
  "onTwitter": "on Twitter",

styles/components/_carousel-arrows.scss

@@ -2,6 +2,11 @@
  $side-y: 32px;
  $side-x: 55px;
 
+ &-small-size {
+ $side-y: 20px;
+ $side-x: 32px;
+ }
+
  width: $side-x;
  height: $side-x;
  position: absolute;

styles/global.scss

@@ -429,3 +429,7 @@ a.has-text-grey {
 .is-flex-1 {
  flex: 1;
 }
+
+.has-z-index-1 {
+ z-index: 1;
+}