huncholane/slroofPublic

main

slroof/components/sections/Slider1.js

59 lines3.3 KBJavaScript

RawDownloadHistory

1	import Link from 'next/link'
2	import { useState } from 'react'
3	import Slider from 'react-slick'
4	import Brand2 from './Brand2'
5
6
7
8	export default function Slider1() {
9	const [nav1, setNav1] = useState()
10	const [nav2, setNav2] = useState()
11	return (
12	<>
13	<section className="slider-area">
14	<div className="slider-shape" data-background="/assets/img/slider/slider_shape.png" />
15	<div className="slider-img-wrap">
16	<Slider asNavFor={nav2} ref={(slider1) => setNav1(slider1)}
17	autoplay={true}
18	infinite={true}
19	speed={500} className="sliderNav-active">
20	<div className="slider-img-item" data-background="/assets/img/slider/slider_img01.jpg" />
21	<div className="slider-img-item" data-background="/assets/img/slider/slider_img02.jpg" />
22	</Slider>
23	</div>
24	<div className="slider-content-wrap">
25	<Slider
26	asNavFor={nav1}
27	ref={(slider2) => setNav2(slider2)}
28	autoplay={true}
29	infinite={true}
30	speed={500}
31	slidesToShow={1}
32	swipeToSlide={true}
33	focusOnSelect={true}
34	arrows={false}
35	className="sliderContent-active">
36	<div className="slider-content">
37	<h1 className="overly-text">Roofing <br /> Services</h1>
38	<span className="sub-title" data-animation-in="fadeInUp" data-delay-in=".2" data-duration-in=".6">Smart Solutions</span>
39	<h2 className="title" data-animation-in="fadeInUp" data-delay-in=".4" data-duration-in=".6">Best Roofing Services and Consulting</h2>
40	<p data-animation-in="fadeInUp" data-delay-in=".6" data-duration-in=".6">Roofing mbrace change are thriving, building bigger, better,faster, and products than ever Roofing mbrace.</p>
41	<Link href="/project" className="btn" data-animation-in="fadeInUp" data-delay-in=".8" data-duration-in=".6">Discover More</Link>
42	</div>
43	<div className="slider-content">
44	<h1 className="overly-text">Roofing <br /> Services</h1>
45	<span className="sub-title" data-animation-in="fadeInUp" data-delay-in=".2" data-duration-in=".6">Smart Solutions</span>
46	<h2 className="title" data-animation-in="fadeInUp" data-delay-in=".4" data-duration-in=".6">Best Roofing Services and Consulting</h2>
47	<p data-animation-in="fadeInUp" data-delay-in=".6" data-duration-in=".6">Roofing mbrace change are thriving, building bigger, better,faster, and products than ever Roofing mbrace.</p>
48	<Link href="/project" className="btn" data-animation-in="fadeInUp" data-delay-in=".8" data-duration-in=".6">Discover More</Link>
49	</div>
50	</Slider>
51	</div>
52	{/* brand-area */}
53	<Brand2 />
54	{/* brand-area-end */}
55	</section>
56
57	</>
58	)
59	}