While I was working on creating a website. I wanted to implement a sliding carousel feature.
I loveOwl Carousel, so I settled on using it.
Installation
You need to install packages such as@rollup andreact-owl-carousel
npm i react-owl-carousel @rollup/plugin-injectjQuery
You need to inject jQuery into the project. If you are usingvite, which is a javascript bundler, here is how you do it.
This should be done in yourconfig.js
import{defineConfig}from'vite'importinjectfrom'@rollup/plugin-inject';importreactfrom'@vitejs/plugin-react-swc'// https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[react(),inject({$:'jquery',jQuery:'jquery','window.jQuery':'jquery',}),],})App.jsx
You need to make jQuery available to the entire App/Project
import'./App.css'import*as$from"jquery"// ---> this lineimportHeaderfrom"./components/Header"importHerofrom"./components/Hero"functionApp(){return(<><Header/><Hero/><Simple/><Footer/></>)}exportdefaultApp
Owl Carousel CSS
You need to link theowl-carousel css code in yourmain.jsx
importReactfrom'react'importReactDOMfrom'react-dom/client'importAppfrom'./App.jsx'import'./index.css'import'owl.carousel/dist/assets/owl.carousel.css';{/* this line */}import'owl.carousel/dist/assets/owl.theme.default.css';{/* this line */}Component
You can use theOwl carousel component in your React component. You pass in options to modify how the component behaves.
importOwlCarouselfrom'react-owl-carousel';constFeatures=()=>{constoptions={responsive:{0:{items:1,},400:{items:1,},600:{items:1,},700:{items:1,},800:{items:2,},1000:{items:3,}},nav:false,dots:true}return(<OwlCarouselclassName='owl-theme section'loopmargin={20}autoplay{...options}>{/* 1 */}<divclassName="review item"><h3>24hourup-time</h3><p>TheAPIwillalwaysbeavailablewithzerolatencyandlittletonodown-time</p><divclassName="review-img"><imgsrc="/trust.svg"alt=""/></div></div>{/* 2 */}<divclassName="review item"><h3>Globalcoverage</h3><p>Viewthelatestliveexchangeratesforallthecrypto-currenciesavailableworldwide.</p><divclassName="review-img"><imgsrc="/globe.svg"alt=""/></div></div>{/* 3 */}<divclassName="review item"><h3>GreatDocumentation</h3><p>Toassistdevelopers,wehavecuratedaworld-classNamedocumentationfortheAPI</p><divclassName="review-img"><imgsrc="/shield.svg"alt=""className="trust"/></div></div></OwlCarousel>)}exportdefaultFeatures
Thank you, Please follow me
Top comments(2)
- LocationSiliguri, West Bengal, India
- PronounsHe/him
- WorkArkedia Marketing, Siliguri, West Bengal, India
- Joined
I also use owl this but autoplay is not working. Do you know why?
Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.* Move data fetching code or side effects to componentDidUpdate.* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-statePlease update the following components: ReactOwlCarousel2I am getting this error
The issue comes from the library or package (React-owl-carousel). We need to wait for their developers to make the necessary updates or correction.
For further actions, you may consider blocking this person and/orreporting abuse
