Skip to content

Commit

Permalink
fix: adding resize logic to render mix between arrow and down indicator
Browse files Browse the repository at this point in the history
  • Loading branch information
robsongajunior committed Oct 3, 2024
1 parent 365b89f commit bc447f9
Showing 1 changed file with 67 additions and 53 deletions.
120 changes: 67 additions & 53 deletions src/templates/sectioncarousel/SectionCarousel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,14 @@
</template>
<template #principal>
<Carousel
:value="cards"
:value="cards"
:numVisible="3"
:numScroll="3"
:numScroll="1"
:circular="true"
:autoplayInterval="5000"
:responsiveOptions="responsiveOptions"
:showNavigators="false"
:showNavigators="isLargeScreen"
:showIndicators="!isLargeScreen"
>
<template #item="slotProps">
<div class="px-3 h-full">
Expand Down Expand Up @@ -60,57 +61,70 @@
</template>

<script setup>
import ContentSection from '../contentsection'
import LinkButton from '../linkbutton'
import CardBaseClickable from '../cardbaseclickable'
import CardTitle from '../cardtitle'
import CardDescription from '../carddescription'
import Carousel from 'primevue/carousel'
import Tag from 'primevue/tag'
import { onBeforeMount, ref } from 'vue'
defineProps({
overline: {
type: String,
required: false
},
title: {
type: String,
required: true
},
description: {
type: String,
required: false
},
button: {
type: Object,
required: false
},
cards: {
type: Array,
required: true
}
})
import ContentSection from '../contentsection'
import LinkButton from '../linkbutton'
import CardBaseClickable from '../cardbaseclickable'
import CardTitle from '../cardtitle'
import CardDescription from '../carddescription'
import Carousel from 'primevue/carousel'
import Tag from 'primevue/tag'
defineProps({
overline: {
type: String,
required: false
},
title: {
type: String,
required: true
},
description: {
type: String,
required: false
},
button: {
type: Object,
required: false
},
cards: {
type: Array,
required: true
}
})
const responsiveOptions = [
{
breakpoint: '1400px',
numVisible: 3,
numScroll: 1
},
{
breakpoint: '1199px',
numVisible: 3,
numScroll: 1
},
{
breakpoint: '767px',
numVisible: 2,
numScroll: 1
},
{
breakpoint: '575px',
numVisible: 1,
numScroll: 1
}
]
const responsiveOptions = [
{
breakpoint: '1400px',
numVisible: 3,
numScroll: 3
},
{
breakpoint: '1199px',
numVisible: 3,
numScroll: 3
},
{
breakpoint: '767px',
numVisible: 2,
numScroll: 2
},
{
breakpoint: '575px',
numVisible: 1,
numScroll: 1
const isLargeScreen = ref(true)
const checkScreenSize = () => {
isLargeScreen.value = window.innerWidth >= 767;
}
]
onBeforeMount(() => {
checkScreenSize();
window.addEventListener('resize', checkScreenSize);
})
</script>

0 comments on commit bc447f9

Please sign in to comment.