mearashadowfax / ScrewFast

Open-source Astro website template with sleek, customizable TailwindCSS components.
https://screwfast.uk
MIT License
674 stars 209 forks source link

Swiper in ScrewFast #135

Closed garg-udit closed 4 months ago

garg-udit commented 4 months ago

I tried to use Swiper in "Screwfast", but failed to do so, could you please help me in getting it done. I just want to know which path will be great to achieve this functionality. Please reply asap. ThankYou.

mearashadowfax commented 4 months ago

Hi @garg-udit, to use Swiper in "Screwfast," you can follow these steps:

Install Swiper:

npm install swiper

Import Swiper into your component:

<script>
  import Swiper from 'swiper';
  import { Pagination, EffectCards } from 'swiper/modules';

  const swiper = new Swiper('.mySwiper', {
    modules: [Pagination, EffectCards],
    effect: 'cards',
    grabCursor: true,
    centeredSlides: true,
    pagination: {
      el: '.swiper-pagination',
      dynamicBullets: true,
    },
    rewind: true,
  });
</script>

Import Swiper styles in the page where your component is located:

---
// Styles
import 'swiper/css/bundle';
---

This should help you integrate Swiper into your project successfully.

garg-udit commented 4 months ago

@mearashadowfax Thank you so much Emil for helping me out.