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}
...
>
Related
I managed to put the default navigation buttons of swiper.js, but I would like to be able to set up custom buttons and use the slideNext() and slidePrev() methods when clicking on them.
Unfortunately, I tried several methods, but nothing worked, and I have no idea how to do this with sveltekit.
Thanks for your help!
My code :
<script>
import SwiperSlide from './SwiperSlide.svelte';
import { register } from 'swiper/element/bundle';
register();
</script>
<swiper-container
navigation={true}
slides-per-view={1}
direction="horizontal"
space-between={30}
centered-slides={true}
keyboard={true}
pagination={{
hideOnClick: false,
clickable: true
}}
>
<SwiperSlide id={1} />
<SwiperSlide id={0} />
<SwiperSlide id={2} />
</swiper-container>
<style>
swiper-container {
width: 80%;
height: 100vh;
max-height: 1000px;
padding: 50px 0;
}
</style>
<SwiperSlide> is a component with a <swiper-slide></swiper-slide>.
I'm using react-native-modalize with flatListProps but I can't scroll the flatList, I tried panGestureEnabled={false}, or remove the height style but none of them fix it, here is my code:
<Modalize
ref={ref}
children={children}
adjustToContentHeight={true}
onOverlayPress={closeModal}
onClosed={onCloseCallback}
HeaderComponent={renderHeader}
flatListProps={
listData?.length > 0
? {
data: listData,
renderItem: renderListItem,
ItemSeparatorComponent: renderSeparator,
keyExtractor: listKeyExtractor,
contentContainerStyle: dStyles.dataList,
}
: undefined
}
modalStyle={styles.borderRadius}
/>
const dStyles = StyleSheet.create({
dataList: {
height: 400,
},
});
I check the listData and the array has 63 items but the flatList only render the first 9 items.
Fixed by adding to flatListProps these props:
initialNumToRender: 10
maxToRenderPerBatch:10
And add to <Modalize prop disableScrollIfPossible={false}
I'm not sure why but the height is also need to be removed. So this is new code:
<Modalize
ref={ref}
children={children}
adjustToContentHeight={true}
disableScrollIfPossible={false}
onOverlayPress={closeModal}
onClosed={onCloseCallback}
HeaderComponent={renderHeader}
flatListProps={
listData?.length > 0
? {
data: listData,
renderItem: renderListItem,
ItemSeparatorComponent: renderSeparator,
keyExtractor: listKeyExtractor,
initialNumToRender: 10,
maxToRenderPerBatch: 10,
}
: undefined
}
modalStyle={styles.borderRadius}
/>
As I mentioned, I cannot limit the FlatList height, so if the list is long enough, <Modalize will be expanded full screen, that is the limitation of this solution.
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)?
I followed the documentation and Github I did the following steps:
install vue-konva and konva and canvas using npm install vue-konva konva --save and npm install canvas --save.
Created vuekonva.js under plugins folder with below content:
import Vue from 'vue'
import VueKonva from 'vue-konva'
Vue.use(VueKonva)
Added plugins: [ "~/plugins/vuekonva"], under nuxt.config.js
I tried adding under nuxt-config.js but still no luck:
build: {
standalone: true
},
Created a page under pages folder and added code from documenation:
<template>
<div>
<v-stage ref="stage" :config="stageSize">
<v-layer>
<v-text :config="{ text: 'Some text on canvas', fontSize: 15 }" />
<v-rect
:config="{
x: 20,
y: 50,
width: 100,
height: 100,
fill: 'red',
shadowBlur: 10,
}"
/>
<v-circle
:config="{
x: 200,
y: 100,
radius: 50,
fill: 'green',
}"
/>
<v-line
:config="{
x: 20,
y: 200,
points: [0, 0, 100, 0, 100, 100],
tension: 0.5,
closed: true,
stroke: 'black',
fillLinearGradientStartPoint: { x: -50, y: -50 },
fillLinearGradientEndPoint: { x: 50, y: 50 },
fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
}"
/>
</v-layer>
<v-layer ref="dragLayer" />
</v-stage>
</div>
</template>
<script>
export default {
data () {
return {
stageSize: {
width,
height
}
}
},
mounted () {
if (process.browser) {
this.stageSize.width = window.innerWidth
this.stageSize.height = window.innerHeight
}
}
}
</script>
I get the error:
Must use import to load ES Module:
I tried without plugins and it is throwing the error:
vue.runtime.esm.js:620 [Vue warn]: Unknown custom element: <v-stage> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
Not understanding whats the issue please help.
According to Nuxt documentation some plugins export an ES6 module. I think this is the case for konva node module. I followed the steps you mentioned above. But in the nuxt.config.js file I configured the plugin as follow:
plugins: [
{ src: "~/plugins/vuekonva", mode: 'client' }
],
build: {
transpile: ['konva']
},
After that I replaced the code of your page with the code of konvajs as follows:
<template>
<v-stage :config="configKonva">
<v-layer>
<v-circle :config="configCircle"></v-circle>
</v-layer>
</v-stage>
</template>
<script>
export default {
data() {
return {
configKonva: {
width: 200,
height: 200
},
configCircle: {
x: 100,
y: 100,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
}
};
}
};
</script>
That is working for me when I link to the page with nuxt-link. but if I refresh the page I get some errors that is maybe for SSR. I am not sure but if you read this documentation you maybe could solve the problem for SSR.
I was wondering, is it possible to add a react component as the content?
I added the component inside the overlay like so -
this.player.overlay({
content: <SomeReactComponent />,
align: 'bottom-left',
overlays: [{
start: 'play',
end: 'end'
}]
});
and the SomeReactComponent is just a react component for a dynamic image renderer that looks like this
import like from './like.png';
import love from './love.png';
import neutral from './neutral.png';
class SomeReactComponent extends Component {
getImage(pic) {
const image = pic;
return image;
}
render() {
const pic = [love, like, neutral];
return (
<div>
{ sentimentsArray.map(sentiment =>
<img src={this.getImage(pic)} style={{ width: '75%', height: '75%', objectFit: 'scale-down' }} />
)}
</div>
);
}
}
When i call this.player.overlay in my console, it says the overlays.options.content is a Symbol of React.element, however, I'm not getting anything as an overlay
It's not possible to use React component for this property unfortunately, but only string or node element. Take a look to the doc for more information.