xxxxxxxxxx
"use client";
import { Splide, SplideSlide } from "@splidejs/react-splide";
import "@splidejs/react-splide/css";
import { AutoScroll } from "@splidejs/splide-extension-auto-scroll";
import Image from "next/image";
const rewardList = [
{
cardTitle: "1 Prescription",
buttonTitle: "Upload Now",
imgLink: "https://loremflickr.com/640/340",
},
{
cardTitle: "2 Products",
buttonTitle: "Order Now",
imgLink: "https://loremflickr.com/640/340",
},
{
cardTitle: "3 Line",
buttonTitle: "Call Now",
imgLink: "https://loremflickr.com/640/340",
},
{
cardTitle: "4 Products",
buttonTitle: "Order Now",
imgLink: "https://loremflickr.com/640/340",
},
{
cardTitle: "5 Line",
buttonTitle: "Call Now",
imgLink: "https://loremflickr.com/640/340",
},
{
cardTitle: "6 Products",
buttonTitle: "Order Now",
imgLink: "https://loremflickr.com/640/340",
},
{
cardTitle: "7 Line",
buttonTitle: "Call Now",
imgLink: "https://loremflickr.com/640/340",
},
];
export default function PrescriptionMedicine() {
return (
<Splide
options={{
type: "loop",
autoStart: true,
pauseOnHover: true,
rewind: true,
perPage: 4,
autoScroll: {
speed: 1,
},
gap: "1rem",
fixedWidth: "15rem",
}}
aria-label="React Splide Example"
extensions={{ AutoScroll }}
className=" mb-10 mx-8"
>
{rewardList.map((item, index) => (
<SplideSlide key={index}>
<div className=" rounded-md w-56 my-8 shadow-2xl">
<figure>
<div className="relative " style={{ paddingBottom: "60%" }}>
<Image
src={item.imgLink}
alt="slide"
layout="fill"
objectFit="cover"
className=" rounded-t-md "
/>
</div>
</figure>
<div className="card-body p-2">
<h2 className="card-title">{item.cardTitle}</h2>
<p>Type: Injection/Tablet</p>
<p>Details: </p>
<h3>
Best Price:{" "}
<span className="text-green-500 font-medium">Tk.{"Money"}</span>{" "}
</h3>
</div>
</div>
</SplideSlide>
))}
</Splide>
);
}
xxxxxxxxxx
import React from 'react';
import { Slide } from 'react-slideshow-image';
import 'react-slideshow-image/dist/styles.css'
const slideImages = [
{
url: 'images/slide_2.jpg',
caption: 'Slide 1'
},
{
url: 'images/slide_3.jpg',
caption: 'Slide 2'
},
{
url: 'images/slide_4.jpg',
caption: 'Slide 3'
},
];
const Slideshow = () => {
return (
<div className="slide-container">
<Slide>
{slideImages.map((slideImage, index)=> (
<div className="each-slide" key={index}>
<div style={{'backgroundImage': `url(${slideImage.url})`}}>
<span>{slideImage.caption}</span>
</div>
</div>
))}
</Slide>
</div>
)
}
react slider
xxxxxxxxxx
import React, { Component } from "react";
import Slider from "react-slick";
export default class SimpleSlider extends Component {
render() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<div>
<h2> Single Item</h2>
<Slider {settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);
}
}