Added SwiperJS to product card and improved SwiperJS design elements.
This commit is contained in:
parent
778285ddb2
commit
9225b3c727
|
@ -19,7 +19,6 @@ export default function CarouselSwiper(props: Props) {
|
|||
stopOnLastSlide: false,
|
||||
}
|
||||
}
|
||||
effect={'coverflow'}
|
||||
coverflowEffect={{
|
||||
depth: 100,
|
||||
rotate: 0,
|
||||
|
@ -28,6 +27,7 @@ export default function CarouselSwiper(props: Props) {
|
|||
modifier: 1,
|
||||
stretch: 50,
|
||||
}}
|
||||
effect={'coverflow'}
|
||||
keyboard={{
|
||||
enabled: true,
|
||||
}}
|
||||
|
@ -42,12 +42,17 @@ export default function CarouselSwiper(props: Props) {
|
|||
]}
|
||||
navigation={{
|
||||
enabled: true,
|
||||
// nextEl: '.swiper-button-next',
|
||||
// prevEl: '.swiper-button-prev',
|
||||
}}
|
||||
pagination={{
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
}}
|
||||
scrollbar={{
|
||||
el: '.swiper-scrollbar',
|
||||
draggable: true,
|
||||
hide: true,
|
||||
snapOnRelease: true,
|
||||
}}
|
||||
spaceBetween={200}
|
||||
|
@ -55,6 +60,10 @@ export default function CarouselSwiper(props: Props) {
|
|||
{props.images?.map((image) => (
|
||||
<SwiperSlide><img className={'carousel-img'} src={image.src} alt={image.alt} title={image.title} /><div className="overlay"></div></SwiperSlide>
|
||||
))}
|
||||
<div className="swiper-pagination"></div>
|
||||
{/* <div className="swiper-button-prev"></div>
|
||||
<div className="swiper-button-next"></div> */}
|
||||
<div className="swiper-scrollbar"></div>
|
||||
</Swiper>
|
||||
);
|
||||
}
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
import { type Product } from '../data/products/product';
|
||||
import CarouselSwiper from './CarouselSwiper';
|
||||
import StarRating from './StarRating.astro';
|
||||
|
||||
interface Props {
|
||||
|
@ -14,7 +15,8 @@ const { product } = Astro.props;
|
|||
<h4 class="card-header">
|
||||
{product?.name}
|
||||
</h4>
|
||||
{product?.amazonProductDetails?.imageUrls !== undefined && <img src={product!.amazonProductDetails?.imageUrls[0]} alt={product?.amazonProductDetails?.title} style="width: 100%;" />}
|
||||
{product?.amazonProductDetails?.imageUrls !== undefined && product?.amazonProductDetails.imageUrls.length == 1 && <img src={product!.amazonProductDetails?.imageUrls[0]} alt={product?.amazonProductDetails?.title} style="width: 100%;" />}
|
||||
{product?.amazonProductDetails?.imageUrls !== undefined && product?.amazonProductDetails.imageUrls.length > 1 && <CarouselSwiper client:load images={product?.amazonProductDetails.imageUrls.map((imageUrl) => { return { src: imageUrl }; })} /> }
|
||||
<div class="card-body">
|
||||
<StarRating value={product?.amazonProductDetails?.reviewRating||0} max={5} overlayColor="#23262d" /> {product?.amazonProductDetails?.reviewCount} Reviews
|
||||
<h5 class="card-title">
|
||||
|
|
|
@ -1,6 +1,36 @@
|
|||
:root {
|
||||
}
|
||||
/* .swiper-scrollbar.swiper-scrollbar-horizontal {
|
||||
bottom: 0;
|
||||
height: 40px;
|
||||
}
|
||||
.swiper-scrollbar-drag {
|
||||
background: none;
|
||||
}
|
||||
.swiper-scrollbar-drag:after {
|
||||
content: "";
|
||||
background: rgba(210, 20, 4, 0.5);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin: 0 0 0 -20px;
|
||||
} */
|
||||
|
||||
.swiper-scrollbar {
|
||||
/* background: #23262D; */
|
||||
/* width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%; */
|
||||
--swiper-scrollbar-bg-color: rgba(35, 38, 45, 0.5);
|
||||
mix-blend-mode: hard-light;
|
||||
}
|
||||
.swiper-scrollbar-drag {
|
||||
background: rgba(210, 20, 4, 1);
|
||||
}
|
||||
|
||||
.carousel-swiper {
|
||||
border-radius: 7px;;
|
||||
--swiper-navigation-color: rgba(210, 20, 4, 0.5);
|
||||
border-radius: 7px;
|
||||
--swiper-navigation-color: rgba(225, 20, 4, 0.8);
|
||||
background-color: #fff;
|
||||
/* background-color: coral; */
|
||||
}
|
||||
|
@ -15,10 +45,30 @@
|
|||
|
||||
.carousel-swiper .carousel-img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.carousel-swiper .swiper-pagination-bullet {
|
||||
background-color: rgba(210, 20, 4, 0.5);
|
||||
/* background-color: rgba(210, 20, 4, 0.8); */
|
||||
background-color: rgba(35, 38, 45, 0.8);
|
||||
/* filter: invert(1); */
|
||||
mix-blend-mode: hard-light;
|
||||
height: 1.1em;
|
||||
width: 1.1em;
|
||||
}
|
||||
|
||||
.carousel-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
|
||||
background-color: rgba(225, 20, 4, 0.8);
|
||||
mix-blend-mode: hard-light;
|
||||
padding: 0.9em;
|
||||
margin-bottom: -0.3em;
|
||||
}
|
||||
|
||||
.carousel-swiper .swiper-button-next, .carousel-swiper .swiper-button-prev {
|
||||
mix-blend-mode: hard-light;
|
||||
}
|
||||
|
||||
/* .carousel-swiper .swiper-button-next {
|
||||
|
|
|
@ -57,7 +57,35 @@ const gTag = config.GoogleAnalyticsGTag;
|
|||
</body>
|
||||
</html>
|
||||
<style is:global>
|
||||
a{color: rgb(210, 20, 4))}
|
||||
/* Uncomment for Firefox: * {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #4C1314 #23262D;
|
||||
} */
|
||||
*::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
*::-webkit-scrollbar-track {
|
||||
border-radius: 5px;
|
||||
background-color: #23262D;
|
||||
}
|
||||
*::-webkit-scrollbar-track:hover {
|
||||
background-color: #33363D;
|
||||
}
|
||||
*::-webkit-scrollbar-track:active {
|
||||
background-color: #43464D;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb {
|
||||
border-radius: 8px;
|
||||
background-color: #4C1314;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #d21404;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb:active {
|
||||
background-color: #f21404;
|
||||
}
|
||||
a{color: #d21404)}
|
||||
:root {
|
||||
--accent: 210, 20, 4;
|
||||
--accent-light: 255, 48, 8;
|
||||
|
|
Loading…
Reference in New Issue
Block a user