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; }
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?
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>
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
I am very new in React. I have multiple Swiper Thumb caroucels in one page.
also I have two filtered elements in my code which I want to show on display.my first carousel works perfectly in at first filtered item, but second one's navigation does not work, when I click, nothing happens.
const [thumbsSwiper, setThumbsSwiper] = useState(null);
const [thumbsSwiper1, setThumbsSwiper1] =useState(null)
this one works perfectly
<Swiper
style={{
"--swiper-navigation-color": "#fff",
"--swiper-pagination-color": "#fff",
}}
spaceBetween={10}
navigation={false}
thumbs={{ swiper: thumbsSwiper }}
modules={[FreeMode, Navigation, Thumbs]}
className="mySwiper2"
>
{movie.images.map((item,index)=>{
return (
<SwiperSlide key={index} >
<img src={`http://.../${item}`} />
</SwiperSlide>
)
})}
</Swiper>
<Swiper
onSwiper={setThumbsSwiper}
spaceBetween={10}
slidesPerView={movie.images.length}
freeMode={true}
simulateTouch = {true}
watchSlidesProgress={true}
modules={[FreeMode, Navigation, Thumbs]}
className="mySwiper"
>
{movie.images.map((item,index)=>{
return (
<SwiperSlide key={index} >
<img src={`http://.../${item}`} />
</SwiperSlide>
)
})}
</Swiper>
this one does not work, it is multiple array inside it and maybe this is a reason
<Swiper
style={{
"--swiper-navigation-color": "#fff",
"--swiper-pagination-color": "#fff",
}}
spaceBetween={10}
navigation={false}
thumbs={{ swiper: thumbsSwiper1 }}
modules={[FreeMode, Navigation, Thumbs]}
className="mySwiper2"
>
{item.images.map((item,index)=>{
return (
<SwiperSlide key={index} >
<img src={`http://apicity.cgroup.ge/${item}`} />
</SwiperSlide>
)
})}
</Swiper>
<Swiper
onSwiper={setThumbsSwiper1}
spaceBetween={10}
slidesPerView={item.images.length}
freeMode={true}
watchSlidesProgress={true}
modules={[FreeMode, Navigation, Thumbs]}
className="mySwiper"
>
{item.images.map((item,index)=>{
return (
<SwiperSlide key={index}>
<img src={`http://apicity.cgroup.ge/${item}`}/>
</SwiperSlide>
)
})}
</Swiper>
I thought I should change classes but it still does not worked, then I tried to change some property but still same result. help please
In our scenario , I map the array and produce the result using jsx , but I want the ignore duplicate data before the map operation. so how can I do that? here snipped code may help you :
import React, { useContext } from "react";
import { Context } from "../Context/Context";
import "./Navbar.css"
import cartImg from "../../cart.png"
import close from "../../close.svg"
export default function Navbar() {
const { cart, cartReducer } = useContext(Context)
function getCart(products) {
return products.map((product, index) =>
<div key={index} style={{ borderBottom: "1px solid #d5cfcf" }} >
<img src={product.image} style={{ width: '100%' }} alt="" />
<div className="cart-info">
<div>
<img src={close} onClick={() =>
cartReducer({ product, type: 'remove' })} style={{ width: 30, paddingLeft: 10 }} alt="" />
</div>
<div>
{product.name}
</div>
</div>
</div>
)
}
return (
<nav className="navbar navbar-light bg-light">
<a className="navbar-brand" href="#">
<img src={cartImg} style={{ maxWidth: 30 }} alt="" />
{cart.length > 0 && <span className="badge badge-warning badge-header">{cart.length}</span>}
<div className="navbar-cart" style={cart.length > 0 ? { width: 150 } : { width: 'fit-content' }}>
<h6> {cart.length == 0 ? 'Cart is Empty' : getCart(cart)}</h6>
</div>
</a>
</nav>
)
}
You can remove duplicates by:
const duplicatedData = [1,2,3,4,5,1,2,1,1,1,1,3,4,5,6,7,8,2,1,3,4]
const notDuplicatedData = [...new Set(duplicatedData)]
console.log(notDuplicatedData)
So in your case:
[...new Set(products)].map((product, index)