0

I am trying to import swiper in nextjs project using cdn link given in official documentation. here's my code

import React from 'react'
import Image from 'next/image'
import Head from 'next/head'
import swiper from '../Configuration/swiper'

const aboutus = () => {
  return (
    <>
    <Head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.2.6/swiper-bundle.css" />
    </Head>
      <div>
        <div style={{width:"300px",height:"400px"}} class="swiper w-80 h-96">
          <div class="swiper-wrapper">
     
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
          
          </div>
     
          <div class="swiper-pagination"></div>

     
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>

     
          <div class="swiper-scrollbar"></div>
        </div>
      </div>

<Script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.2.6/swiper-bundle.min.js"  strategy="beforeInteractive" />
 </Script>

    </>
  )

export default aboutus

where as in my swiper.js file contain configuration to init swiper.

const swiper = new Swiper('.swiper', {
    // Optional parameters
    direction: 'vertical',
    loop: true,
  
    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },
  
    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  
    // And if we need scrollbar
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  });
  console.log(swiper)


  export default swiper;

still getting the error Swiper not defined (inside the Swiper.js file after new keyword). somebody help me on this.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Data Universe
  • 1
  • 1
  • 3

1 Answers1

0

Instead of using an external source, you can add swiper/react library and create elements with it.

Check this demos, don't forget to import styles as marked in examples. Try to avoid using <Script> or <link> tags. To delete and newer use with nextjs/react:

<Script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.2.6/swiper-bundle.min.js"  strategy="beforeInteractive" />
 </Script>
illia chill
  • 1,652
  • 7
  • 11