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?
Related
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>
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
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
I'm new to react so I'm trying to zoom an image in react. I use swiper js to show product images but for zooming i use react-image-magnify but it is not working. The react-image-magnify is working outside swiper js but not inside. Is there any solution for this?
<Swiper
navigation
loop={true}
thumbs={{ swiper: props.thumbsSwiper }}
>
{
productData.gallery.map((item, idx) =>
<SwiperSlide key={`image-slides-${idx}`}>
<div className="slide-item" key={`image-slides-${idx}`}>
<div className="slide-item__thumb">
<ReactImageMagnify {...{
smallImage: {
alt: 'Product Thumbnail',
isFluidWidth: true,
src: item.url,
className: "img-fluid",
},
largeImage: {
src: item.url,
width: 1200,
height: 1800,
},
enlargedImageContainerDimensions: {
width: '200%',
height: '100%'
}
}} />
{/*<img className="img-fluid" src={item.url} alt="Product Thumbnail" />*/}
</div>
</div>
</SwiperSlide>)
}
</Swiper>