same codepen codes doesnt work on my local?

Question

i am searching some pens on codepen.Found a slider and tried to run on my local but even i add external css and js but still not dislpay anything.Checked all code lines but couldnt see the problem.

my html file

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.css">

    <link rel="stylesheet" href="./index.css">
    
    
    
</head>
<body>
<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper"></div>
    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>
<script src="./js.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.js"></script>
</body>
    
</html>

and its the pens link https://codepen.io/paulochorinca/pen/MXpQBP thank for your answers.

Any issues you got in your browser's console? How do you open html file, using file:// protocol or using some local dev server? If you just opened it as a "file" - it will not be able to load additional local resources, that is file:// protocol restriction. — Sergey Sosunov, Sep 04 '22 at 14:10
@SergeySosunov i am running with live server extension on vs code. I think it will run without any restriction right? on my console it shows no error by the way.Only the issue is "Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform" — jsnewbie, Sep 04 '22 at 14:13
Are you sure you didnt get any errors in Console? Because i got 1 about `Swiper is not defined` and it was due to you are loading "./js.js" before other js libraries that you need. I moved js.js script loading to the end and i do see what you show in codepen — Sergey Sosunov, Sep 04 '22 at 14:22

score 0 · Answer 1 · answered Sep 04 '22 at 14:39

0

after i add

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

to head i solved my question.

answered Sep 04 '22 at 14:39

jsnewbie

21
5

score -1 · Answer 2 · answered Sep 04 '22 at 14:12

-1

you can make separate files for html, css, js then link in one html file. then paste codpen codes into them respectively.

answered Sep 04 '22 at 14:12

mahesh parihar

9
2

same codepen codes doesnt work on my local?

2 Answers2