Mobile banner sliding updated & Home faq alignment issu fixed about.css bottom style un commented
This commit is contained in:
parent
b3037ce050
commit
1d005cfba6
@ -14,15 +14,34 @@ export default function MobileBanner() {
|
|||||||
return () => window.removeEventListener("resize", handleResize);
|
return () => window.removeEventListener("resize", handleResize);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const [sliderRef] = useKeenSlider({
|
// ✅ Autoplay plugin added here
|
||||||
|
const autoplay = (slider) => {
|
||||||
|
let timeout;
|
||||||
|
const delay = 4000;
|
||||||
|
|
||||||
|
function clearNextTimeout() {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
}
|
||||||
|
function nextTimeout() {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
timeout = setTimeout(() => {
|
||||||
|
slider.next();
|
||||||
|
}, delay);
|
||||||
|
}
|
||||||
|
|
||||||
|
slider.on("created", nextTimeout);
|
||||||
|
slider.on("dragStarted", clearNextTimeout);
|
||||||
|
slider.on("animationEnded", nextTimeout);
|
||||||
|
slider.on("updated", nextTimeout);
|
||||||
|
};
|
||||||
|
|
||||||
|
const [sliderRef] = useKeenSlider(
|
||||||
|
{
|
||||||
loop: true,
|
loop: true,
|
||||||
autoplay: {
|
|
||||||
delay: 4000,
|
|
||||||
pauseOnMouseEnter: true,
|
|
||||||
stopOnInteraction: false,
|
|
||||||
},
|
|
||||||
slides: { perView: 1, spacing: 0 },
|
slides: { perView: 1, spacing: 0 },
|
||||||
});
|
},
|
||||||
|
[autoplay] // ✅ autoplay fixed here
|
||||||
|
);
|
||||||
|
|
||||||
const slides = [
|
const slides = [
|
||||||
{
|
{
|
||||||
@ -104,13 +123,23 @@ export default function MobileBanner() {
|
|||||||
>
|
>
|
||||||
<div className="content-box custom-content-box">
|
<div className="content-box custom-content-box">
|
||||||
<span className="upper-text mb-2">{slide.upperText}</span>
|
<span className="upper-text mb-2">{slide.upperText}</span>
|
||||||
<h2 style={{ fontSize: "32px", lineHeight: "42px", color:"#bc0000", fontWeight:"bold" }}>
|
<h2
|
||||||
|
style={{
|
||||||
|
fontSize: "32px",
|
||||||
|
lineHeight: "42px",
|
||||||
|
color: "#bc0000",
|
||||||
|
fontWeight: "bold",
|
||||||
|
}}
|
||||||
|
>
|
||||||
{slide.title}
|
{slide.title}
|
||||||
</h2>
|
</h2>
|
||||||
{/* {slide.subtitle && <p>{slide.subtitle}</p>} */}
|
{/* {slide.subtitle && <p>{slide.subtitle}</p>} */}
|
||||||
{/* <p>{slide.description}</p> */}
|
{/* <p>{slide.description}</p> */}
|
||||||
<div className="btn-box mt-3">
|
<div className="btn-box mt-3">
|
||||||
<Link href={slide.buttonLink} className="theme-btn btn-one-new">
|
<Link
|
||||||
|
href={slide.buttonLink}
|
||||||
|
className="theme-btn btn-one-new"
|
||||||
|
>
|
||||||
<span>{slide.buttonText}</span>
|
<span>{slide.buttonText}</span>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -499,7 +499,7 @@
|
|||||||
/** RESPONSIVE-CSS **/
|
/** RESPONSIVE-CSS **/
|
||||||
|
|
||||||
|
|
||||||
/* @media only screen and (max-width: 1024px){
|
@media only screen and (max-width: 1024px){
|
||||||
|
|
||||||
.image_block_one .image-box .text-box{
|
.image_block_one .image-box .text-box{
|
||||||
left: 0px;
|
left: 0px;
|
||||||
@ -759,7 +759,7 @@ top: 309px;
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
} */
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user