Search code examples
javascripthtmlcsscodepen

How to add Codepen scripts to my files (see screenshot)

Been working on this codepen: https://codepen.io/aladin94/pen/QWjgKNz

Would like to know how to properly add the scripts (for the Swiper built-in library on codepen), into my files on VS Code.

I've tried adding <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css"> into my Head tag,

and adding <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script> at the end of my Body tag, but that causes my site to go completely blank.

The screenshots for the codepen: enter image description here

enter image description here

Do I need to npm install the library or add the script in my package.json file?

Solution

  • To add swiper into your project please got to this site: https://swiperjs.com/get-started/

    Basically this is how you include it: 

    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

<script src="https://unpkg.com/swiper/js/swiper.js"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>