victorAnumudu
84 lines
2.6 KiB
JavaScript
84 lines
2.6 KiB
JavaScript
"use client"
|
|
// NOTE React-Slick and slick-carousel goes together. DO install both
|
|
import React from 'react';
|
|
import Slider from 'react-slick';
|
|
import 'slick-carousel/slick/slick.css';
|
|
import 'slick-carousel/slick/slick-theme.css';
|
|
import Image from 'next/image'
|
|
|
|
export default function FeaturedScreenTwo() {
|
|
const settings = {
|
|
dots: true,
|
|
autoplay: true,
|
|
infinite: true,
|
|
centerMode: true,
|
|
|
|
className: 'center',
|
|
centerPadding: '60px',
|
|
|
|
slidesToShow: 5,
|
|
slidesToScroll: 1,
|
|
speed: 4000,
|
|
// autoplaySpeed: 2000,
|
|
cssEase: "linear",
|
|
|
|
responsive: [
|
|
{
|
|
breakpoint: 1024,
|
|
settings: {
|
|
slidesToShow: 5,
|
|
slidesToScroll: 1,
|
|
// initialSlide: 1,
|
|
// infinite: true,
|
|
// dots: true,
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 600,
|
|
settings: {
|
|
slidesToShow: 3,
|
|
slidesToScroll: 1,
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 480,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
return (
|
|
<div className='carousel-container'>
|
|
<Slider
|
|
{...settings}
|
|
>
|
|
{/* here you can also pass any other element attributes. Also, you can use your custom components as slides */}
|
|
<div className='slider-img-con'>
|
|
<img src={'/assets/images/slider/app_sliders/screen_1.png'} alt="image" />
|
|
</div>
|
|
<div className='slider-img-con'>
|
|
<img src={'/assets/images/slider/app_sliders/screen_2.png'} alt="image" />
|
|
</div>
|
|
<div className='slider-img-con'>
|
|
<img src={'/assets/images/slider/app_sliders/screen_3.png'} alt="image" />
|
|
</div>
|
|
<div className='slider-img-con'>
|
|
<img src={'/assets/images/slider/app_sliders/screen_6.png'} alt="image" />
|
|
</div>
|
|
<div className='slider-img-con'>
|
|
<img src={'/assets/images/slider/app_sliders/screen_4.png'} alt="image" />
|
|
</div>
|
|
<div className='slider-img-con'>
|
|
<img src={'/assets/images/slider/app_sliders/screen_7.png'} alt="image" />
|
|
</div>
|
|
<div className='slider-img-con'>
|
|
<img src={'/assets/images/slider/app_sliders/screen_5.png'} alt="image" />
|
|
</div>
|
|
</Slider>
|
|
</div>
|
|
);
|
|
}
|