I'm using version 6.1.2 with react applied to Swiper in nextjs ssr environment.
<Swiper
slidesPerView={1}
loop
navigation
pagination={{
type: "bullets",
renderBullet: (index, className) => {
return `<div class="${className}">${index}</div>`;
},
clickable: true,
}}
breakpoints={{
769: {
slidesPerView: 3,
slidesPerGroup: 3,
pagination: { type: "fraction", clickable: true },
},
}}
>
When width is over 769
[pagination tpye: fraction],
When it is less than 768
I applied [tpye: bullets]
When changing options due to breakpoints
Cannot slide by touch
768<width when switching
When sliding,
the fraction page number is fixed and looping is possible only with the prev button.
There is nothing similar on Stack Overflow.
I tried with React, but the same problem occurred.
I looked at the official document but couldn't solve it.
https://swiperjs.com/react/
Related
I have this spring defining a looped animation:
const style = useSpring({
from: { marginBottom: 0 },
to: [
{ marginBottom: 0 },
{ marginBottom: 80, config: { duration: 600 }, delay: 3000 },
{ marginBottom: -80, config: { duration: 0 } },
{ marginBottom: 0, config: { duration: 600, delay: 1000 } },
],
loop: true,
})
My problem is that whenever I re-render the component containing the spring, the animation 'resets' and starts moving towards the first to position (in this case { martinBottom: 0 })
It can be seen in this sandbox - click the 'reset' button just as the arrow is traveling up and it will reverse course instantly
The documentation also hints that stabilizing the references of from and to may solve the issue... and it kind of does, but it introduces a new one: if the components re-renders shortly before the animation starts, it skips the 'travel up' portion: sandbox here.
The bigger problem is that the more times I 'interrupt' the animation cycle by re-rendering, the more it affects some of my other, more demanding animations, making them more and more staggered.
Refreshing whole app instantly resets this decay and makes all animations fluid again. When I remove this useSpring from my code, this decay disappears
So what is going on there? Is there something I'm missing?
From this docs example, It makes sense to me that the animation resets on re-render ... but then why does this example instruct me to compose staged animations this way, am I missing some key step?
And what's up with this slow 'decay' of other animations' performance, is that a known cause to that?
Iam using swiperjs dependencies to create an amazing slider. But, I got an error while using one of API controller, which is breakpoints. I need this controller for customization the display. But, when I applied this, I got an error like this :v
error screenshot
Here is my code :
<Swiper
centeredSlides={true}
grabCursor={true}
pagination={{
dynamicBullets: true,
}}
breakpoints: {
// when window width is <= 1024px
1024: {
slidesPerView: 4,
spaceBetweenSlides: 150
},
// when window width is <= 768px
768: {
slidesPerView: 3,
spaceBetweenSlides: 200
}
}
modules={[Pagination]}
className="mySwiper"
>
{events.map((event, idx) => {
return (
<SwiperSlide>
<CardEvent
image={event.img}
info={event.info}
title={event.name}
icon={event.ico}
color="bg-white"
/>
</SwiperSlide>
);
})}
</Swiper>
Anybody can help me how to use breakpoints?
breakPoints syntax is wrong. that's why you see that error. Try the below syntax. Refernce sandbox url
breakpoints = {{
1024: {
slidesPerView: 4,
spaceBetweenSlides: 150
},
768: {
slidesPerView: 3,
spaceBetweenSlides: 200
}
}}
Task: create a custom replay mode using tradingview's charting library. Bars data does not come from a websocket but instead an uploaded/selected CSV.
I am trying to conditionally enable/disable subscribe bars using a state variable. When enabled it loops through the CSV and imitates a websocket to add bars every x seconds using a timeout, when paused, don't do anything.
The issue I am facing right now is, if I change the state, it re-renders the chart however I do not want to do that.
const TVChartContainer = (props) => {
const { allBars, replayBars, playing, speed } = props;
useEffect(() => {
const widgetOptions = {
debug: false,
symbol: defaultProps.symbol,
datafeed: Datafeed(allBars, replayBars, playing, speed),
interval: defaultProps.interval,
container_id: defaultProps.containerId,
library_path: defaultProps.libraryPath,
locale: getLanguageFromURL() || "en",
// disabled_features: ["use_localstorage_for_settings"],
enabled_features: ["study_templates"],
charts_storage_url: defaultProps.chartsStorageUrl,
charts_storage_api_version: defaultProps.chartsStorageApiVersion,
client_id: defaultProps.clientId,
user_id: defaultProps.userId,
fullscreen: defaultProps.fullscreen,
autosize: defaultProps.autosize,
studies_overrides: defaultProps.studiesOverrides,
data_status: "streaming",
overrides: {
"mainSeriesProperties.showCountdown": true,
"paneProperties.background": "#fff",
"paneProperties.vertGridProperties.color": "#fff",
"paneProperties.horzGridProperties.color": "#fff",
"scalesProperties.textColor": "#000",
"mainSeriesProperties.candleStyle.wickUpColor": "#2196f3",
"mainSeriesProperties.candleStyle.upColor": "#2196f3",
"mainSeriesProperties.candleStyle.borderUpColor": "#2196f3",
"mainSeriesProperties.candleStyle.wickDownColor": "#000",
"mainSeriesProperties.candleStyle.downColor": "#000",
"mainSeriesProperties.candleStyle.borderDownColor": "#000",
},
};
new widget(widgetOptions);
}, [allBars, playing, replayBars, speed]);
return <div id={defaultProps.containerId} className={"TVChartContainer"} />;
};
The playing variable is a state coming from its parent component, when changed it rerenders the chart as it initializes a new widget. Is there a workaround that? Maybe change the datafeed after it has been initialized?
Note: I do not intend to have a backend for this React app.
In order to have the edges of the previous/next carousel items to show within Slider, I am reducing the .swiper-slide size. There are two ways of achieving this that I have tried:
setting .swiper-slide width to 90%
setting the slidesPerView param to 1.1
Both work nicely, but the final two items in the carousel show stange visual artefacts. The background of the container appears to overlap and intersect the slider. Images below (first in each example is as it is expected to render, second is with glitch). The visual glitch is cleared with a click, but still undesirable:
These are my Slider params
const params = {
slidesPerView: 3,
spaceBetween: 50,
speed: 400,
centeredSlides: true,
initialSlide: this.props.latestQuestionIndex,
slideToClickedSlide: true,
breakpoints: {
768: {
slidesPerView: 3,
spaceBetween: 30
},
425: {
slidesPerView: 1.1,
spaceBetween: 10
}
},
on: {
slideChange: () =>
this.state.swiper && this.setState({ currentIndex: this.state.swiper.activeIndex })
}
};
Is there another method of allowing for overlap of the edges of other carousel images, or a fix for this visual glitch?
I am trying to use angular-ui-swiper with AngularJS. Implementation was very easy, please see here https://www.npmjs.com/package/angular-ui-swiper
But I am not able to set more options for this slider, because I found no angular examples on the web. Can you please support me?
I am able to access the instance of the slider via "instance"-Attribute set in the html code. But I just managed to jump to a special slide. But I also want to have initially 3 slides per view for example. How can I achieve this?
Thank you
<swiper instance="instance">
<slides>
<slide ng-repeat="subpage in sliderElements">
<img src="{{subpage.featuredImage}}" alt="" title=""/>
</slide>
</slides>
<prev></prev>
<next></next>
<pagination></pagination>
</swiper>
Here are some options I need:
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 4,
spaceBetween: 30,
centeredSlides: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
https://github.com/nolimits4web/Swiper/blob/master/demos/130-centered.html
You should write each property in this form (add -):
<swiper slides-per-view="4"> this is the same like slidesPerView: 4