I want to add react-slick by following it's documentation but "Unexpected token" keeps showing, i just want the react-slick work and styling it later.
I'm really sorry i know this is very basic but i've browsing long enough until i ended up here, i'm still learning on reactJS
This is my import
import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import {ServicesContainer,ServicesH1,ServicesWrapper,ServicesCard,ServicesIcon,ServicesH2,ServicesP} from './ServicesElements';
This is my code Planning to styling it later after its showing on the website i build
const Services = () => {
return (
<ServicesContainer id="ourproducts">
render() {
const settings = {
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
speed: 2000,
autoplaySpeed: 2000,
cssEase: "linear"
};
return (
<div>
<h2>Auto Play</h2>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
</Slider>
</div>
);
}
<ServicesH1>Our Products</ServicesH1>
<ServicesWrapper>
<ServicesCard>
<ServicesIcon img src={require('../../images/ikansidat.jpg').default}/>
<ServicesH2>Eel / Unagi / Ikan Sidat</ServicesH2>
<ServicesP></ServicesP>
</ServicesCard>
<ServicesCard>
<ServicesIcon img src={require('../../images/minyakkelapasawit.jpg').default}/>
<ServicesH2>Crude Palm Oil</ServicesH2>
<ServicesP></ServicesP>
</ServicesCard>
<ServicesCard>
<ServicesIcon img src={require('../../images/cocopeat.jpg').default}/>
<ServicesH2>Coco Peat</ServicesH2>
<ServicesP></ServicesP>
</ServicesCard>
</ServicesWrapper>
</ServicesContainer>
)
}
export default Services
Related
I have the next .js project. I want to use react-slick.
I installed the react-slick and slick-carousel packages .
I added css carousel :
import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import image1 from '../../../assets/images/125.jpg'
import image2 from '../../../assets/images/Mina.jpg'
import image3 from '../../../assets/images/ffff.png'
const SliderPlugin=()=>{
return (
<>
<h2> Single Item</h2>
<Slider >
<div >
<img src={image1} alt="image1"/>
</div>
<div>
<img src={image2} alt="image2"/>
</div>
<div>
<img src={image3} alt="image2"/>
</div>
</Slider>
</>
)
}
export default SliderPlugin;
But no photo is displayed. Only in dev Tools, there are div and img.
Verify Image Path
Firstly, in order to verify Image path. Here I'll use the Network images for testeing its working fine.
import React, { Component } from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
export default class SimpleSlider extends Component {
constructor(props) {
super(props);
this.state = {
images: [
"https://source.unsplash.com/1024x768/?nature",
"https://source.unsplash.com/1024x768/?water",
"https://source.unsplash.com/1024x768/?girl",
"https://source.unsplash.com/1024x768/?tree", // Network image
// require('./assets/images/abc.jpg'), // Local image
]
};
}
// other component code ...
render() {
const settings = {
dots: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<div className="slider-wrapper">
<Slider {...settings}>
{this.state.images?.map((imageName, index) => <div key={`${index}`}>
<img src={imageName} alt={`${index}`} />
</div>)}
</Slider>
</div>
);
}
}
My Home page sends data from my strapi cms to my PostSlider component via props
import React from "react";
import styles from './index.module.scss'
import { AxiosService } from '../utils/axios-service'
import PostSlider from '../components/postSlider/postSlider'
const Home = ({ posts }) => {
return (
<div id='contentsWrap' className={styles.dohandsWrap}>
<PostSlider home={true} posts={posts} />
</div>
)
}
export default Home
export async function getStaticProps() {
const axios = AxiosService.create()
const res = await axios.get('/archives', {
params: {
category: 'news',
display: true,
showDoson: true,
_limit: 5,
_sort: 'id:DESC'
}
})
return {
props: {
posts: res.data,
},
}
}
My postSlider component then maps over the data to fill my slider
import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import styles from './postSlider.module.scss'
import Link from 'next/link'
import Image from 'next/image'
export default function PostSlider({ home, posts }) {
var settings = {
infinite: posts.length > 2 ? true : false,
autoplay: false,
speed: 500,
autoplaySpeed: 3000,
slidesToShow: 3,
slidesToScroll: 1,
};
return (
<section className={`${styles.postSlider} postSlider ${home ? styles.postSliderHome : 'postSliderNotHome'} ${posts.length > 2 ? 'postSliderPadding' : ''}`}>
<Slider {...settings}>
{posts.map((post) => {
const date = new Date(post.displayDate);
return (
<Link key={post.id} href={`/news/${post.id}`}>
<a className={styles.postSliderLink}>
<article>
<Image src={post.images[0]?.url} alt={post.images[0]?.alternativeText} width={376} height={190} layout="fixed" />
</article>
</a>
</Link>
)
})}
</Slider>
</section>
);
}
I made sure to include my cdn address in module.exports in next.config.js but I get the following error
Error: Image is missing required "src" property. Make sure you pass
"src" in props to the next/image component. Received:
{"width":376,"height":190}
If I remove the next/image component for the normal img tag, everything works fine.
What am I doing wrong?
Well, it seems like one of your posts have empty images array?
Image component is required to have src property and you pass undefined instead.
You can check if there is at least one image and then render it, like that:
<article>
{post.images.length > 0 && (
<Image src={post.images[0].url} alt={post.images[0].alternativeText} width={376} height={190} layout="fixed" />
)}
</article>
Try before the return:
const src = {src: post.images[0]?.url}
Then inside the return:
<Image {...src} //etc...
Sometimes, the <Image /> tag doesn't work like it should and doesn't accept the src . Try defining the URL before return and then pass the URL in the src property.
Just before return:
const url = post.images[0]?.url;
And then you can add:
<Image src={url} alt={post.images[0]?.alternativeText} width={376} height={190} layout="fixed" />
Using react-lottie version 1.2.3 to try animate in React web application.
It successfully compiled without any error message but the animation would not show from json file.
I have followed React Lottie not showing animation not showing (web) which suggested replace animationData: animationData to animationData: animationData.default. Have tried both however it did not work.
Any ideas?
import React,{Component} from 'react';
import Lottie from 'react-lottie';
import animationData from './lottie/lottie_page_not_found.json';
class PageNotFound extends Component {
render(){
const defaultOptions = {
loop: true,
autoplay: true,
animationData: animationData.default,
rendererSettings: {
preserveAspectRatio: "xMidYMid slice"
}
};
return(
<div>
<h1 style={{display: 'flex', justifyContent: 'center'}}>Page Not Found</h1>
<Lottie
options={defaultOptions}
height={400}
width={400}
/>
</div>
);
}
}
export default PageNotFound;
I am creating slick slider by using reactjs. Slider working fine but it renders slide multiple times. I am looping the slide using map function.
screenshots:
my scripts:
import React, {Component} from 'react';
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import '../css/Header.css';
//import SlideItem from './SlideItem';
class SliderSlick extends Component{
shouldComponentUpdate () {
// TODO: add proper implementation that compares objects
return false;
}
render() {
//Slide Items
var sliderItem = ['slider1.jpg','slider2.jpg','slider3.jpg'];
var settings = {
autoplay: false,
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
speed: 1000,
};
return (
<div className="container">
<Slider {...settings}>
{
sliderItem.map((item,index) => {
return (
<div data-index={index} key={index}>
<img src={process.env.PUBLIC_URL + '/images/'+item} alt="Continental GT 650" />
</div>
)
})
}
</Slider>
</div>
);
}
}
export default SliderSlick;
what am I doing wrong?
This is not a bug, it's a feature for having a best performance with animation in last item with next first item !.
this is just how slick slider infinite-loop works.
If slider would only clone images/divs it would end up with a performance issue.
Now, if really you don't want clone images/div then you need to set
infinite: false
or
infinite: sliderItem.length > 3 // may be best solution
I am new to React JS. I have tried to use owl carousel in React.
The package link I installed from npm is
https://www.npmjs.com/package/react-owl-carousel
As instructed I have imported Owl Carousel component on specific page. Here is the code:
import React, { Component } from 'react';
import {Grid, Row, Col , ProgressBar } from 'react-bootstrap';
import UserAvtar from '../common/UserAvtar.js';
import SectionHeaderOfCards from '../common/SectionHeaderOfCards.js';
import OwlCarousel from 'react-owl-carousel';
const options = {
items: 4,
};
class DashboardPage extends Component {
render() {
return (
<div>
<section className="has-small__padding has-grey__bg">
<UserAvtar />
</section>
<section className="has-small__padding">
<Grid>
<SectionHeaderOfCards title="Recommended Matches" />
<OwlCarousel margin={10} >
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
</OwlCarousel>
</Grid>
</section>
</div>
);
}
}
export default DashboardPage;
As default This code outputs 3 items at a time (As 3 is the default value in owl carousel) . I thought of I may initialised the value with 4 , hence tried ,
const options = {
items: 4,
};
But it's not working. There is nothing mentioned in its node package either. Anyone knows how to use owl carousel options in React Owl carousel ?
Apart I want to show 3 items for devices between 768px to 1200px , 2 items between 500px to 767px and 1 item for the devices below 499px.
Here is how normal owl carousel use the option to add responsiveness. https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html
How to achieve the same in React owl carousel ?
You need to add options object to OwlCarousel component.
Example:
<OwlCarousel margin={10} items={4} >
//...
</OwlCarouse>
OR
<OwlCarousel margin={10} {...options} >
//...
</OwlCarouse>
Best you can use:
render() {
const options = {
items: 1,
nav: true,
navText:["<div className='nav-btn prev-slide'></div>","<div className='nav-btn next-slide'></div>"],
rewind: true,
autoplay: true,
slideBy: 1,
dots: true,
dotsEach: true,
dotData: true
};
return (
<OwlCarousel ref="gallery" options={options}>
...
</OwlCarousel>
)