I've created a slick slider component in Vue, and I'm facing an issue with centering a circular div inside each of the slider items. Despite trying to align and justify center along with adding margin:auto for horizontal centering, I can't seem to achieve vertical centering. Any suggestions on how I can resolve this? Could it be related to how slick slider adjusts the width of the slick items through JavaScript?
<template>
<slick class="SLIDERcontainer6_maincontainer" ref="slick" :options="slickOptions">
<div class="SLIDERcontainer6_item_container" v-for="slider in globals.producsSlider" :key="slider.title">
<div class="SLIDERcontainer6_item_image" :style="'background-image:url('+slider.image+');'"></div>
</div>
</slick>
</template>
<!--SCRIPTS-->
<script>
import { mapState } from 'vuex';
import Slick from 'vue-slick';
export default {
name: 'SLIDERcontainer10',
components: { Slick },
computed:
{
...mapState('Globals',['globals'])
},
data()
{
return {
slickOptions: {
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
prevArrow: '<i class="fa fa-chevron-left fs_bigger c_light" style="position:absolute; left:10px; top:50%; transform:translateY(-50%); z-index:99999;"></i>',
nextArrow: '<i class="fa fa-chevron-right fs_bigger c_light" style="position:absolute; right:10px; top:50%; transform:translateY(-50%); z-index:99999;"></i>',
arrows: true,
autoplay: true,
speed: 2000,
autoplaySpeed: 4000,
responsive:
[
{
breakpoint: 1120,
settings:
{
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 800,
settings:
{
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 600,
settings:
{
slidesToShow: 1,
slidesToScroll: 1
}
}]
},
};
},
beforeUpdate()
{
if (this.$refs.slick) {
this.$refs.slick.destroy();
}
},
updated()
{
this.$nextTick(function () {
if (this.$refs.slick) {
this.$refs.slick.create(this.slickOptions);
}
});
},
mounted()
{
console.log(this.$options.name+' component successfully mounted');
},
};
</script>
<!--STYLES-->
<style scoped>
.SLIDERcontainer6_maincontainer{width:100%; height:auto; position:relative;}
.SLIDERcontainer6_item_container{width:33.33%; height:350px; display:flex; flex-direction:column; align-items:center; justify-content:center; background-color:var(--web_primary_color); position:relative;}
.SLIDERcontainer6_item_image{width:275px; height:275px; border-radius:50%; background-size:cover; background-position:center; margin:auto; align-self:center;}
@media only screen and (max-width: 736px)
{
}
</style>