hy, Im using swiper.js library in react js I have spacebetween value is 100, now for breakpoint 600 I want spacebetween 30, how is it possible,
how can I use breakpoints
type here
<Swiper
effect={"coverflow"}
grabCursor={true}
centeredSlides={true}
slidesPerView={3}
loop={true}
pagination={false}
modules={[EffectCoverflow, Pagination]}
className="mySwiper d-"
initialSlide={2}
spaceBetween={100}
autoplay={true}
coverflowEffect={{
rotate: 0,
stretch: 5,
depth: 24,
modifier: 20,
slideShadows: false,
}}
>
<SwiperSlide>
<div className="d-flex justify-content-center">
1
<img src="\assets\images\feature\feature1.png" alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="d-flex justify-content-center">
2
<img src="\assets\images\feature\feature2.png" alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="d-flex justify-content-center">
3
<img src="\assets\images\feature\feature3.png" alt="" />
</div>
</SwiperSlide>
</Swiper>
You have to set breakpoints in your jsx/tsx file.
<Swiper
{...props}
breakpoints={{
// when window width is >= 600px
600: {
spaceBetween: 20,
},
}}
>
{slides}
</Swiper>
Related
There is a horizontal swiper auto slider
<div className="container">
<Swiper
autoplay={{
delay: 500,
disableOnInteraction: false,
}}
breakpoints={{
375: {
slidesPerView: 1,
},
480: {
slidesPerView: 1.6,
},
992: {
slidesPerView: 2.5,
},
}}
stopOnLastSlide={false}
pauseOnMouseEnter={false}
grabCursor={true}
spaceBetween={40}
slidesPerView={3.5}
modules={[Autoplay, Pagination, Navigation]}
parallax={true}
speed={4800}
pagination={{
clickable: true,
}}
navigation={true}
onSlideChange={() => console.log("slide change")}
onSwiper={(swiper) => console.log(swiper)}
>
<SwiperSlide>
<img src={f2} className="item" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src={f3} className="item" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src={f4} className="item" alt="" />
</SwiperSlide>
</Swiper>
</div>
how to make the slider move in one direction when viewing the page down, and move in the opposite direction when viewing the page in the other direction?
It's a beautiful day but this thing is blocking my view:
I've tried everything (except asking a question ._.) and searched everywhere. But the expected result could not be obtained :'(
So, this is my code where I think the error is happening:
<div className="mt-3">
{data.activities?.map((act) => {
return <Chip className="mr-2 px-3" label={act} key={act.id} />;
})}
</div>{" "}
Well it's a part of my file packageCard.js but if you want the whole file here it is:
import Chip from "#material-ui/core/Chip";
import Clock from "./img/main_page_icons/clock.svg";
import Person from "./img/main_page_icons/person.svg";
import MapPin from "./img/main_page_icons/map-pin.svg";
import Package1 from "./img/main_page/package 1.png";
function PackageCard({ data }) {
console.log(data);
return (
<>
<div className="col-lg-4 col-md-6 col-sm-12 card-super-container">
<div className="card-container">
<div className="card-image-wrapper">
<div>
<div className="card-image-background">
<img
alt="package 1"
src={data.featuredImg}
style={{ borderRadius: "6px" }}
className="w-100 "
/>
</div>
</div>
</div>
<div className="card-details-container">
<span className="text-bold details-container-header">
{data.name}
</span>
<div>
<div className="card-details-text">
<div>{data.description}</div>
<div>
<h6 className="card-price">{`Price: ${data.price} USD`}</h6>
</div>
</div>
</div>
</div>
<div>
<div className="card-final-desc">
<div className="card-final-desc-item">
<span className="card-dot"></span>
<img alt="clock" src={Clock} className="mr-1" />
{` ${data.days}D / ${data.nights}N `}
</div>
<div className="card-final-desc-item">
<span className="card-dot"></span>
<img alt="clock" src={Person} className="mr-1" />
{` ${data.noOfPersons} Person `}
</div>
<div className="card-final-desc-item">
<span className="card-dot"></span>
<img alt="clock" src={MapPin} className="mr-1" />
{` ${data.destination} `}
</div>
</div>
</div>
<div className="card-btn-container">
<button className="btn zoki-btn">Book Now </button>
</div>
</div>
</div>
<div className="col-lg-4 mb-4">
<img
alt="package 1"
src={data.featuredImg}
style={{ height: 250 }}
className="w-100"
/>
<div
className="bg-white py-4 px-4 shadow-lg"
style={{ fontSize: 14, textAlign: "start" }}
>
<h6>{data.name}</h6>
<p>{data.description}</p>
<div className="d-flex justify-content-between w-100">
<h6 className="m-0">{`Price: ${data.price} USD`}</h6>
<h6 className="m-0" style={{ color: "#9C8E35", cursor: "pointer" }}>
Book Now
</h6>
</div>
/!*{" "}
<div className="mt-3">
{data.activities?.map((act) => {
return <Chip className="mr-2 px-3" label={act} key={act.id} />;
})}
</div>{" "}
*!/
</div>
<div
className="row shadow mx-3"
style={{ backgroundColor: "#9C8E35", fontSize: 12 }}
>
<div className="col-4 p-0 text-center">
<div
className="py-2 text-white d-flex w-100 justify-content-center"
style={{ borderRight: "1px solid white" }}
>
<img alt="clock" src={Clock} className="mr-1" />
<p className="mb-0">{` ${data.days} D / ${data.nights} N `}</p>
</div>
</div>
<div className="col-4 p-0">
<div
className="py-2 text-white d-flex w-100 justify-content-center"
style={{ borderRight: "1px solid white" }}
>
<img alt="clock" src={Person} className="mr-1" />
<p className="mb-0">{` ${data.noOfPersons} Person `}</p>
</div>
</div>
<div className="col-4 p-0">
<div className="py-2 text-white d-flex w-100 justify-content-center">
<img alt="clock" src={MapPin} className="mr-1" />
<p className="mb-0">{` ${data.destination} `}</p>
</div>
</div>
</div>
</div>
</>
);
}
export default PackageCard;
Packages.js Component
import { useState, useEffect } from "react";
import { getAvailablePackages } from "crud";
import PackageBg from "../../../assets/img/offers.jpg";
import Card from "./packageCard";
import CircularProgress from "#material-ui/core/CircularProgress";
import { useHistory } from "react-router-dom";
function Packages() {
const history = useHistory();
const [listPackages, setListPackages] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
const params = {
search: { query: "" },
sort: "name",
page: 1,
pageSize: 3,
};
setLoading(true);
getAvailablePackages(params)
.then((res) => {
// console.log(res.data.data)
setListPackages(res.data.data.travelPackages);
setLoading(false);
})
.catch((error) => {
console.log(error.response.data);
console.log(error.response.status);
setLoading(false);
});
}, []);
let checkData = [
{
name: "ahmad",
description: "this is description",
price: 5,
days: 5,
nights: 9,
noOfPersons: 9,
destination: "England",
featuredImg:
"https://media.gettyimages.com/photos/castle-combe-in-the-fall-wiltshire-england-picture-id157006201?s=612x612",
},
{
name: "ali",
description: "this is description",
price: 5,
days: 5,
nights: 9,
noOfPersons: 9,
destination: "homeland",
featuredImg:
"https://images.unsplash.com/photo-1538332576228-eb5b4c4de6f5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZmlubGFuZHxlbnwwfHwwfHw%3D&w=1000&q=80",
},
{
name: "ali",
description: "this is description",
price: 5,
days: 5,
nights: 9,
noOfPersons: 9,
destination: "finland",
featuredImg:
"https://images.unsplash.com/photo-1538332576228-eb5b4c4de6f5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZmlubGFuZHxlbnwwfHwwfHw%3D&w=1000&q=80",
},
];
return (
<div
id="zoki-packages"
className="text-center py-5 my-5"
style={{
backgroundImage: `url(${PackageBg})`,
backgroundPosition: "center",
backgroundSize: "cover",
}}
>
<div className="container" style={{ color: "#344767" }}>
<h6 className="text-bold font-italic"> EXPLORE GREAT PLACES </h6>
<h1 className=""> Popular Packages </h1>
<div className="row justify-content-center align-content-center">
{checkData?.map((pkg) => {
return <Card data={pkg} key={pkg.id} />;
})}
{loading ? (
<CircularProgress className="my-4 ml-auto mr-auto" />
) : listPackages.length ? (
listPackages?.map((pkg) => {
return <Card data={pkg} key={pkg.id} />;
})
) : (
<h4 className="my-4 ml-auto mr-auto">
No Package Available at that time.
</h4>
)}
</div>
{listPackages.length ? (
<button
onClick={() => history.push("/search-packages")}
className="btn btn-dark px-4 p-2 rounded-pill my-4"
style={{ color: "#CFBD45", backgroundColor: "black", fontSize: 14 }}
>
<p className="mb-0"> VEIW ALL PACKAGES </p>
</button>
) : null}
</div>
</div>
);
}
export default Packages;
I will be very grateful if you find a solution. I appreciate any help you can provide <33
It seems that the act does not have a unique id, try using the index of the map.
<div className="mt-3">
{data.activities?.map((act, i) => (
<Chip className="mr-2 px-3" label={act} key={i} />
))}
</div>
if you use the act.id as the key,should make sure every id is unique cause
Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity
here is the official docs
im working on a swiper. my intention is to collect some in slider but i dont want to use breakPonit attribute for responsively work.
i want to slidesPerView, automatically fill the swiper wrapper.
i read the document and use Demo...
the resault is like that just one apear on the view, while width and spaceBetween is minimun and in wide screen wont change.
this is my code but its not my desired:
import React from 'react';
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/scrollbar";
import "swiper/css/free-mode";
import SwiperCore, { Autoplay, FreeMode, Navigation, Scrollbar } from "swiper";
import { styled } from "#mui/material";
SwiperCore.use([Scrollbar,FreeMode, Autoplay, Navigation]);
//-----------style to swiper by: styled()
let Swip = styled(Swiper)(({ theme }) => ({
padding: 17,
paddingBottom: 35,
width: "90%",
"& .swiper-wrapper": { padding: 0 },
}));
export default function Brands() {
return(
<Swip
// autoplay={{
// delay: 6000,
// disableOnInteraction: false,
// }}
navigation={true}
spaceBetween={10}
loop={true}
freeMode={true}
scrollbar={{
"hide":false
}}
>
<SwiperSlide>
<div style={{width:100,height:50 , backgroundColor:'black'}}/>
</SwiperSlide>
<SwiperSlide>
<div style={{width:100,height:50 , backgroundColor:'black'}}/>
</SwiperSlide>
<SwiperSlide>
<div style={{width:100,height:50 , backgroundColor:'black'}}/>
</SwiperSlide>
<SwiperSlide>
<div style={{width:100,height:50 , backgroundColor:'black'}}/>
</SwiperSlide>
<SwiperSlide>
<div style={{width:100,height:50 , backgroundColor:'black'}}/>
</SwiperSlide>
<SwiperSlide>
<div style={{width:100,height:50 , backgroundColor:'black'}}/>
</SwiperSlide>
<SwiperSlide>
<div style={{width:100,height:50 , backgroundColor:'black'}}/>
</SwiperSlide>
<SwiperSlide>
<div style={{width:100,height:50 , backgroundColor:'black'}}/>
</SwiperSlide>
<SwiperSlide>
<div style={{width:100,height:50 , backgroundColor:'black'}}/>
</SwiperSlide>
<SwiperSlide>
<div style={{width:100,height:50 , backgroundColor:'black'}}/>
</SwiperSlide>
<SwiperSlide>
<div style={{width:100,height:50 , backgroundColor:'black'}}/>
</SwiperSlide>
<SwiperSlide>
<div style={{width:100,height:50 , backgroundColor:'black'}}/>
</SwiperSlide>
<SwiperSlide>
<div style={{width:100,height:50 , backgroundColor:'black'}}/>
</SwiperSlide>
<SwiperSlide>
<div style={{width:100,height:50 , backgroundColor:'black'}}/>
</SwiperSlide>
<SwiperSlide>
<div style={{width:100,height:50 , backgroundColor:'black'}}/>
</SwiperSlide>
<SwiperSlide>
<div style={{width:100,height:50 , backgroundColor:'black'}}/>
</SwiperSlide>
<SwiperSlide>
<div style={{width:100,height:50 , backgroundColor:'black'}}/>
</SwiperSlide>
<SwiperSlide>
<div style={{width:100,height:50 , backgroundColor:'black'}}/>
</SwiperSlide>
<SwiperSlide>
<div style={{width:100,height:50 , backgroundColor:'black'}}/>
</SwiperSlide>
</Swip>
)}
I researched a lot and finally found out that you have to override slides css to force them to be specific width. For example according to it's content:.swiper-slide { width: auto; }
My Owl carousel is not responsive on smaller or mobile screens. I want to find a way to solve this problem.
Following is the screenshots:
And here's the code. Thanks in advance
export default function HomeMovieSlider() {
return (
<div>
<OwlCarousel className='owl-theme'
loop center margin={1} autoplay ={true} dots={false} items={3} touchDrag={true} lazyLoad={true}
// responsive={"0:{items:1,},600:{items:3,},1000:{items:5,}"}
animateOut={'fadeOut'} animateIn={'flipInX'}>
{MOVIEBANNER.map((movieBannertop) => {
return (
<div >
{/* <h4>{movieBannerp.movieTitle}</h4> */}
{/* <img src={movieBannertop.bannerImage}/> */}
<Card style={{width: "250px"}}>
<Card.Img variant="top" src={movieBannertop.bannerImage} height="380" max-width= "100% !important"/>
<Card.Body>
<Card.Title as="h6" ><b>{movieBannertop.movieTitle}</b></Card.Title>
<Card.Subtitle className="mb-2 text-muted">{movieBannertop.genres}</Card.Subtitle>
<Link to="/MovieDetail"><small className="text-muted">More Details</small></Link>
</Card.Body>
<Card.Footer className="text-center">
<Button variant="danger" style={{backgroundColor: "#ff4444"}}><Link to="/movieBooking" style={{color: "#fff"}}>Book Now</Link></Button>
</Card.Footer>
</Card>
</div>
);
})}
</OwlCarousel>
<div className="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12"></div>
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
<div className="prs_animate_btn1 prs_upcom_main_wrapper prs_third_slider_btn">
<ul>
<li data-animation="animated fadeInUp"><span>MORE</span>
</li>
</ul>
</div>
</div>
<div className="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12"></div>
</div>
);
}
For making owl-carousel responsive, you should create a object named state with a responsive property and send it to the responsive prop of OwlCarousel.
export default function HomeMovieSlider() {
const state= {
responsive:{
0: {
items: 1,
},
450: {
items: 2,
},
600: {
items: 3,
},
1000: {
items: 4,
},
},
}
return (
<div>
<OwlCarousel
className="owl-theme"
loop
center
margin={1}
autoplay={true}
dots={false}
items={3}
touchDrag={true}
lazyLoad={true}
responsive={state.responsive}// add this line
animateOut={'fadeOut'}
animateIn={'flipInX'}
>
{MOVIEBANNER.map(movieBannertop => {
return (
<div>
{/* <h4>{movieBannerp.movieTitle}</h4> */}
{/* <img src={movieBannertop.bannerImage}/> */}
<Card style={{ width: '250px' }}>
<Card.Img
variant="top"
src={movieBannertop.bannerImage}
height="380"
max-width="100% !important"
/>
<Card.Body>
<Card.Title as="h6">
<b>{movieBannertop.movieTitle}</b>
</Card.Title>
<Card.Subtitle className="mb-2 text-muted">
{movieBannertop.genres}
</Card.Subtitle>
<Link to="/MovieDetail">
<small className="text-muted">More Details</small>
</Link>
</Card.Body>
<Card.Footer className="text-center">
<Button
variant="danger"
style={{ backgroundColor: '#ff4444' }}
>
<Link to="/movieBooking" style={{ color: '#fff' }}>
Book Now
</Link>
</Button>
</Card.Footer>
</Card>
</div>
);
})}
</OwlCarousel>
);
}
For other owl-carousels APIs see this link: https://github.com/laurenchen0631/react-owl-carousel
How I can do something like planet on this link with help ScrollMagic in React?
My code
<div className={styles.containerMain}>
<div>
<Controller>
<Scene duration={300} triggerElement="#first-container" offset={500}>
{(progress) => (
<Tween
from={{
css: {
top: '0',
},
ease: 'Circ.easeOutExpo',
}}
to={{
css: {
top: '-500px',
},
ease: 'Circ.easeOutExpo',
}}
totalProgress={progress}
paused
>
<div id="first-container" style={{ height: '100vh', position: 'relative' }}>
<div className={styles.container}>
<div className={styles.contentContainer}>
<div className={styles.textSmall}>We</div>
<div className={styles.textLarge}>Deliver</div>
<div className={styles.containerText}>
<div className={styles.textSmall}>Quality</div>
<div className={styles.textSmall}>Software </div>
</div>
<div className={styles.textLarge}>Globally</div>
<div className={styles.globe}>
<Globe /> //this is image svg
</div>
</div>
</div>
</div>
</Tween>
)}
</Scene>
</Controller>
</div>
</div>
I need:
I see part of my image and than I am scrolling and I see full of my image (image replace text), than do something like in link