I would like to add swiper to make a slider to my test project, tha is based on hugo framework. Unfortunately, it doesn;t work correctly. Here is my github projects: https://github.com/bullet03/carousel_site
What I've done:
<link
rel="stylesheet"
href="https://unpkg.com/swiper/swiper-bundle.min.css"
/><!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {});
</script>My css do not load, there is no mistake, it's just like there is no swiper and styles at all. Could you kindly, point out, how to fix it?
When I cloned your repo and tried to display the page, it cannot be displayed because there is no single.html file in your layouts/_default directory. This file is used by Hugo to render single pages like your a.md is (it's not a home page nor a list page).
Create a layouts/_default/single.html and put this content into it:
{{ define "main" }}
<!--
Place the content for single pages here, it will be rendered
in a place where you'll add {{ block "main" . }}{{ end }}.
Adding the block to your baseof.html is not necessary to
achieve what you want to achieve (display the swiper).
-->
{{ end }}
You don't need to add any content there unless you want to, just make sure the file exists and a block is defined inside of it.
For more information, see template lookup order.