CHIEFSOFT\ameye
105 lines
3.0 KiB
React
105 lines
3.0 KiB
React
'use client'
|
|
|
|
import Image from "next/image";
|
|
import React, { useState } from "react";
|
|
import Slider from "react-slick";
|
|
|
|
export default function DocSlickAsNavTwo() {
|
|
const [nav1, setNav1] = useState();
|
|
const [nav2, setNav2] = useState();
|
|
|
|
var settings = {
|
|
slidesToShow: 3,
|
|
responsive: [
|
|
{
|
|
breakpoint: 991,
|
|
settings: {
|
|
slidesToShow: 2,
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 420,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Slider
|
|
{...settings}
|
|
asNavFor={nav1}
|
|
ref={(slider2) => setNav2(slider2)}
|
|
swipeToSlide={true}
|
|
focusOnSelect={true}
|
|
className="slick-nav-custom "
|
|
>
|
|
<div className="d-flex item_content">
|
|
<div className="icon d-flex align-items-center justify-content-center">
|
|
<Image width="11" height="15" src="/images/icon/81.svg" alt="icon" />
|
|
</div>
|
|
<p>
|
|
Create task for any <br />
|
|
team person
|
|
</p>
|
|
</div>
|
|
{/* /.d-flex */}
|
|
<div className="d-flex item_content">
|
|
<div className="icon d-flex align-items-center justify-content-center">
|
|
<Image width="11" height="15" src="/images/icon/81.svg" alt="icon" />
|
|
</div>
|
|
<p>
|
|
Make timeframe for <br />
|
|
do the task
|
|
</p>
|
|
</div>
|
|
{/* /.d-flex */}
|
|
<div className="d-flex item_content">
|
|
<div className="icon d-flex align-items-center justify-content-center">
|
|
<Image width="11" height="15" src="/images/icon/81.svg" alt="icon" />
|
|
</div>
|
|
<p>
|
|
Get task complated by <br />
|
|
your member
|
|
</p>
|
|
</div>
|
|
{/* /.d-flex */}
|
|
</Slider>
|
|
{/* Bottom text slide */}
|
|
|
|
<div className="position-relative">
|
|
<Slider
|
|
className="slick-nav-none carousel-inner"
|
|
asNavFor={nav2}
|
|
fade={true}
|
|
speed={600}
|
|
ref={(slider1) => setNav1(slider1)}
|
|
>
|
|
<div className="carousel-item">
|
|
<Image width={1160} height={700} style={{height:'fit-content'}} src="/images/assets/screen_07.png" alt="feature" />
|
|
</div>
|
|
<div className="carousel-item">
|
|
<Image width={1160} height={700} style={{height:'fit-content'}} src="/images/assets/screen_08.png" alt="feature" />
|
|
</div>
|
|
<div className="carousel-item">
|
|
<Image width={1160} height={700} style={{height:'fit-content'}} src="/images/assets/screen_09.png" alt="feature" />
|
|
</div>
|
|
</Slider>
|
|
{/* Top Image slide */}
|
|
<Image width="151" height="151"
|
|
src="/images/shape/152.svg"
|
|
alt="shape"
|
|
className="shapes shape-one"
|
|
/>
|
|
<Image width={292} height={292}
|
|
src="/images/shape/153.png"
|
|
alt="shape"
|
|
className="shapes shape-two"
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|