Products category carousel slider showing only on large screen

adebayoade

The products are showing only on wide screen but blank when the screen is resized. My Bagisto version is 1.2.

admin

Hi @adebayoade
Can you please elaborate?

adebayoade

@admin The category products carousel slider becomes invisible on mobile screen.

admin

@adebayoade said in Products category carousel slider showing only on large screen:

carousel slider

@adebayoade
Which version of bagisto are you using?

adebayoade

@admin Version 1.2

admin

Hi @adebayoade
This issue is fixed in bagisto V1.4.2 Please find the screenshot Here

adebayoade

@admin Is there code to fix the issue? I can't upgrade Bagisto version at the moment.

admin

Please allow me some time I will share the PR link as soon as possible.

sanjay-webkul

Hi @adebayoade
Please take a reference from here for the same

adebayoade

@sanjay-webkul Thanks for the response but the code structure of my version is different and I don't know how to implement the fix.

sanjay-webkul

Hi There,
Please take a reference from here

adebayoade

@sanjay-webkul Thank you.

adebayoade

My products carousal heading is getting duplicated across the home page. I have three different blade files for fashion, mobile phones and electronics so the heading should be different. I created a custom header because of the added customization. Kindly check the picture and code below.

<template v-else-if="categoryProducts.length > 0">
	
    <div
		class="p-4 mb-5 flex justify-content-between"
		style="background: rgba(163, 191, 244, 0.3)"
    >
		<h1 class="heading">Fashion <i class="fas fa-tshirt"></i></h1>

		<h2 class="text-3xl text-gray font-bold">
			<a :href="`${this.baseUrl}/${categoryDetails.slug}`">See all </a
			><span id="icon">
				<i
					style="background: #FFE600"
					class="rounded-pill fa fa-arrow-right"
					aria-hidden="true"
				></i>
			</span>
		</h2>
	</div>

	<div class="carousel-products vc-full-screen ltr" v-if="!isMobileView">
		<carousel-component
			slides-per-page="6"
			navigation-enabled="hide"
			pagination-enabled="hide"
			autoplay="true"
			:slides-count="categoryProducts.length"
			locale-direction="{{ core()->getCurrentLocale()->direction == 'rtl' ? 'rtl' : 'ltr' }}"
			:id="`${categoryDetails.name}-carousel`"
		>
			<slide
				:key="index"
				:slot="`slide-${index}`"
				v-for="(product, index) in categoryProducts"
			>
				<product-card :list="list" :product="product"> </product-card>
			</slide>
		</carousel-component>
	</div>

	<div class="carousel-products vc-small-screen" v-else>
		<carousel-component
			slides-per-page="2"
			navigation-enabled="hide"
			pagination-enabled="hide"
			autoplay="true"
			loop="true"
			autoplayHoverPause="false"
			:slides-count="categoryProducts.length"
			locale-direction="{{ core()->getCurrentLocale()->direction == 'rtl' ? 'rtl' : 'ltr' }}"
			:id="`${categoryDetails.name}-carousel`"
		>
			<slide
				:key="index"
				:slot="`slide-${index}`"
				v-for="(product, index) in categoryProducts"
			>
				<product-card :list="list" :product="product"> </product-card>
			</slide>
		</carousel-component>
	</div>
</template>

admin

Hi There,
Please check your code, I guess something is wrong with your code.