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
}
}}
Related
Hello I have a lot of HTML data with lot of paragraphs with <p> tag stored in variable let element. I am creating a PDF document via jsPDF library in React. The document is being created successfully with 5 pages, however a line break is created inside of last paragraph of the first page and so on with other pages. So how can I manage page height and add more pages in my pdf document. My code is as following:
let element = (
<div style={{ textAlign: "left", width:"600px"}}>
<p style={{fontSize: "10px", color:"#000"}}>
text text....................
</p>
<p style={{fontSize: "10px", color:"#000"}}>
text text.........................
</p>
</div>
);
const doc = new jsPDF("p", "pt", "a4");
doc.html(ReactDOMServer.renderToString(element), {
callback: function (doc) {
doc.save('AgreementLetter.pdf');
}
});
My Issue result is like this
Please help with this, thanks.
To set top and bottom margin and auto paging resolved the issue.
const doc = new jsPDF("p", "pt", "legal");
doc.html(ReactDOMServer.renderToString(element), {
callback: function (doc) {
doc.save('Letter.pdf');
},
margin: [10, 20, 30, 10],
autoPaging: 'text',
x: 0,
y: 0,
width: 655,
windowWidth: 675
});
I am working on a react project and I implemented a power BI embed to show report and I am having a issue with the size of generating report in the UI.
Here is the code for the Power BI Embed
{selectedModel.AuthenticationMode !== null ? (
<div className="iframe-container-powerbi">
{generatedPowerBiToken && (
<PowerBIEmbed
embedConfig={{
type: "report",
id: generatedPowerBiToken.id,
embedUrl: generatedPowerBiToken.embedUrl,
accessToken: generatedPowerBiToken.accessToken,
tokenType: models.TokenType.Embed,
settings: {
layoutType: models.LayoutType.Custom,
customLayout: {
displayOption: models.DisplayOption.FitToPage,
},
panes: {
filters: {
expanded: true,
visible: true,
},
},
//background: models.BackgroundType.Transparent,
},
}}
eventHandlers={
new Map([
[
"loaded",
function () {
console.log("Report loaded");
},
],
[
"rendered",
function () {
console.log("Report rendered");
},
],
[
"error",
function (event) {
console.log(event.detail);
},
],
])
}
cssClassName={"report-style-class"}
/>
)}
</div>
) : (
<div className="iframe-container">
<Iframe
url={ifActiveUrl}
width="100%"
height="100%"
id="modelIframe"
className="model-iframe"
display={ifUrlOpen ? "initial" : "none"}
position="relative"
/>
</div>
)}
and when I load a report UI is rendering like this
I need to increase the size of the chart and reduce the size of the space that noted with red color.
can anyone suggest a solution ?
To resolve this issue, set the height and width manually in the iframe instead of using 100%.Please find the reference code below:
<iframe width="1080" height="520" src="Your_source_link" frameborder="0" allowFullScreen="true"></iframe>
My output with height and width as 100%:
After changing the height and width:
Please find more references here:
How to determine a Power BI report's width and height for embedding
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/
From:
https://popmotion.io/pose/
I grabbed this code,
const Circle = posed.div({
attention: {
scale: 1.3,
transition: {
type: 'spring',
stiffness: 200,
damping: 0
}
}
})
And I am doing:
<Circle />
But, nothing happens. Am I missing something?
you need to create two states for the posed.div:
const Circle = posed.div({
attention: {
scale: 1.3,
transition: {
type: "spring",
stiffness: 200,
damping: 0
}
},
rest: {
scale: 1
}
});
then you need to pass state to your Circle and some styles to make this component red and circle (popmotion.io doesn't do it for you)
<Circle
className="circle"
pose={isLoading ? "attention" : "rest"}
/>
here is the working solution https://codesandbox.io/s/pose-get-started-zv637?file=/src/index.js
But I am not sure that it is the best way to make loaders because popmotion.io is a tool to animate transitions between states. I can propose you to use pure css loader (https://loading.io/css/)
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