I am using Swiper Maniuplation effect which shows multiple slides, but when I click next button I want it to append only one slide, not two slides. This is how I integrate it with Svelte:
<Swiper
modules={[Navigation]}
spaceBetween={20}
slidesPerView={1}
navigation
breakpoints={{
// >= 640px
640: {
width: 640,
slidesPerView: 1,
},
// >= 768px
768: {
width: 768,
slidesPerView: 2,
},
}}
on:slideChange={() => console.log('slide change')}
on:swiper={(e) => console.log(e.detail[0])}
>
{#each reviews as reviewer (reviewer.id)}
<SwiperSlide>
<div class="shadow-md">
{slide.title}
</div>
</SwiperSlide>
{/each}
</Swiper>
How do I solve this issue? Thank you
what do you need to append for, isn't it better to do it with Lazy load and load the previous and next one or just one with loadPrevNextAmount (check documentation)?
Related
I have my swiper component:
<swiper [config]="slideOpts">
<ng-template swiperSlide *ngFor="let unit of Units" class="peeking-slide">
<fs-reserved-unit-card [router]="router" [activatedRoute]="activatedRoute" [doRefresh]="doRefresh" [Unit]='Unit' ></fs-reserved-unit-card>
</ng-template>
</swiper>
with slideOpts being:
slideOpts = {
slidesPerView: 'auto',
spaceBetween: 10
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
};
or:
slideOpts = {
slidesPerView: 'auto',
spaceBetween: 10
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
};
it seems that as soon as I seem to target the CSS selector it breaks, with the pagination if I have "el: x" the pagination bullets simply do not display. With the Navigation "theprevEl: x" and "nextEl: x" also does not display.
is there anything Im missing perhaps?
I believe you don't need to pass any css selectors at all as it is swiper angular component not vanilla js as far as i understand based on your code. It creates all elements and attaches all handlers itself.
Basically when you create pagination you just need to pass true or configuration and it works immediately - pagination renders without you providing classes.
Here is an example https://codesandbox.io/s/great-robinson-meeogx
So I'm using Swiper.js by a friend's recommendation to create an auto-scrolling slider.
But I can't figure out how to make the transitions between the slides smooth. Currently, when I change the autoplay ms it just changes the time it takes to change the slide.
Here is my code:
import React from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";
import ReviewCard from "../Review/ReviewCard";
import ReviewCard2 from "../Review/ReviewCard2";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import "swiper/css";
// import required modules
import { Autoplay } from "swiper";
export default function App() {
return (
<>
<Swiper
slidesPerView={8}
spaceBetween={30}
slidesPerGroup={1}
autoplay={{
delay: 5500,
disableOnInteraction: false,
}}
loop={true}
loopFillGroupWithBlank={true}
breakpoints={{
// when window width is >= 320px
320: {
slidesPerView: 2,
spaceBetween: 150,
},
// when window width is >= 480px
480: {
slidesPerView: 3,
spaceBetween: 30,
},
// when window width is >= 640px
640: {
slidesPerView: 4,
spaceBetween: 180,
},
768: {
slidesPerView: 7,
spaceBetween: 40,
},
1024: {
slidesPerView: 8,
spaceBetween: 50,
},
}}
modules={[Autoplay]}
className="mySwiper"
>
<SwiperSlide>
<ReviewCard />
</SwiperSlide>
<SwiperSlide>
<ReviewCard />
</SwiperSlide>
<SwiperSlide>
<ReviewCard2 />
</SwiperSlide>
<SwiperSlide>
<ReviewCard />
</SwiperSlide>
<SwiperSlide>
<ReviewCard />
</SwiperSlide>
<SwiperSlide>
<ReviewCard2 />
</SwiperSlide>
</Swiper>
</>
);
}
A really good example I found on how I want this to work is almost like the "recent reviews" that just scroll horizontally on https://www.trustpilot.com/
I have noticed you have not added the speed module. It helps smoothen the transition
<Swiper
...
speed={1200}
...
>
I want to set my WebView to be the same height as the content I want to display, nothing more.
I have a WebView wrapped in a View:
<View style={height: height}>
<WebView
...
onMessage={event => console.log(event.native.data)} // this returns height of element in px
/>
Inside the WebView, it is simply a div. I'm using postMessage to send to my React Native app, the height of the div on the WebView. How do I convert that number (in px) for styling in React Native?
I've tried using PixelRatio.getPixelSizeForLayoutSize but it was not right. Thanks in advance!
You can use react-native-autoheight-webview, it will set height based on content.
import AutoHeightWebView from 'react-native-autoheight-webview'
import { Dimensions } from 'react-native'
<AutoHeightWebView
style={{ width: Dimensions.get('window').width - 15, marginTop: 35 }}
customStyle={`
* {
font-family: 'Times New Roman';
}
p {
font-size: 16px;
}
`}
onSizeUpdated={size => console.log(size.height)}
source={{ html: `<p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;">Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. <span style="background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));">If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn’t only tag the piece with “moving”. I’d also use the tags “pets”, “marriage”, “career change”, and “travel tips”.</span></p>` }}
scalesPageToFit={true}
viewportContent={'width=device-width, user-scalable=no'}
/*
other react-native-webview props
*/
/>
I'm using Fluent UI's TeachingBubble component. I want it to have one button, which should be centered. How can that be done? I'm unable to move it from the bottom right corner.
Current code:
<TeachingBubble
headline="Welcome"
primaryButtonProps={{
children: "Next",
onClick: () => alert("Primary button pressed!"),
}}
>
This is some content.
</TeachingBubble>
This outputs:
What should be added to this code so that the primary button is centered (at the red cross I marked)?
Button is inside footer part of TeachingBubble, so the style of footer should be changed:
<TeachingBubble
headline="Welcome"
primaryButtonProps={{
children: "Next",
onClick: () => alert("Primary button pressed!"),
}}
styles={{
footer: {
display: "flex",
justifyContent: "center",
},
}}
>
Some text
</TeachingBubble>
That renders as:
With the ListView component in react-native - is it possible to render rows within sections like this?
<section>
<row>A</row>
<row>B</row>
</section>
<section>
<row>C</row>
<row>D</row>
</section>
And not like this:
<section></section>
<row>A</row>
<row>B</row>
<section></section>
<row>C</row>
<row>D</row>
I'm using renderRow and renderSectionHeader.
The reason I want to render like this is due to the styling. But maybe I'll need to have two nested ListView instead?
I can propose a bit hacky solution.
On android to add shadow to secton you can set elevation to all rows and section header. On ios you need to set shadow* styles.
But you will get problem if you will decide to add borderRadius. In this case to prevent top border artifacts you can add small negative marginBottom (-2 or -4 should be enough) to each row.
shadow: {
shadowOffset: {
width: 2,
height: 2
},
shadowRadius: 1,
shadowOpacity: 0.2,
elevation: 2,
borderRadius: 2,
marginBottom: -2,
}
ListView with 3 rows: