Can you help me with more detail about how I can set up a carousel with this template: GitHub - kishaningithub/hugo-creative-portfolio-theme: Port of the creative portfolio theme to Hugo?
I need detailed steps because I am a beginner.
I also put up my question in more detail here:
https://github.com/kishaningithub/hugo-creative-portfolio-theme/issues/110#issue-1525876334
I would be grateful for your help.
Thank You
In this case, I am also trying to decide which layout document the guide refers to in steps 3. and 7.
Step 3. Make sure the footer of your layout document looks like this:
<script type="text/javascript" src="/js/carousel.js"></script>
<link rel="stylesheet" href="/css/carousel.css">
</body>
</html>
You need that in a template that is used any page that may want a carousel.
baseof.html would load it for all pages.
Step 7. Add this to your content (.md file):
{{< carousel items="1" height="500" unit="px" duration="7000" >}}
That goes in a page markdown file, it is a call to the shortcode.
Hi @andrewd72,
Thank you for your answer and clarification.
In the case you refer to, I stuck at the ‘carousel.html’-s because vs code showed mistakes in those that I couldn’t repair (not being a programmer).
The mistake is in the lines between the < ul > < /ul > codes of the shortcode version (2nd one).
( 
https://raw.githubusercontent.com/jhvanderschee/hugocodex/main/layouts/shortcodes/carousel.html )
Though, you can see it better on the print screen img.
What do you mean by vscode errors? It might be that it thinks it is html whereas you have a go/html template that it doesn’t understand.
It might be. How can I solve that? 
It doesn’t need solving if the final output works, you might find some go/html templating addons for vscode which would then understand it. It is the css style it doesn’t like, I have a template that adds a style and it flags it also.
Okay, I give it a try. But I guess, it’s high for me. 
It works 
. Thank You!
I think step 6 has a mistake: Save the file in the ‘layouts/partials/shortcodes’ directory of your project >> it is instead: ‘layouts/shortcodes’ directory.
I also made a mistake; I didn’t put the .toml .yaml file in the data folder.
And images work only from the static folder (that’s might normal).
Now I am figuring out how to create another carousel in a different .md file. That would be great if you could give me a hint, but thanks for the help so far. 
You are right on the shortcode folder, good spot.
Where it picks up the images from and the data file it uses suggests it was intended for one homepage slider.
Personally (if it is just for images) I’d change it to look up the data from the page’s frontmatter and have it pick up the images from the same page’s bundle or a folder inside it or maybe a folder in assets. I like my page folder to hold all the stuff I need for that page.
See how far you can get with that and I’ll try and help if required.
If the content_html: "1" parts of the data are just an index number then I wouldn’t bother with them.
I’d make your shortcode {{< carousel album="my_folder" >}}
and pick up the images like this:
{{- $album := .Get "album" }}
{{- $allimages := $.Page.Resources.Match (print $album "/*") }}
{{ range $allimages }}
/* create the slides here */
{{ end }}
To get the range with an index consult:
https://www.thenewdynamic.com/article/hugo-data/manipulation-slices-and-maps/
I think it is something like
{{ range $index, $slideimage := $allimages }}
Thank You! 
With the help of a friend, it works.
Here is how:
The tree looks like this, as you said:
content
│ └───portfolio
│ ├───work1
│ │ │ index.md
│ │ │
│ │ └───carousel1
│ │ factory-hall.JPG
│ │ factory-hall2.JPG
│ │ logo-tervezes.jpg
│ │
│ └───work2
│ │ index.md
│ │
│ └───carousel2
│ ganesh-hands0.png
│ ganesha-design.JPG
│ Jai-Shri-Ganesha-T-shirt-design.jpg
In the shortcodes, ‘data’ determines from where it picks up the images. You can call it whatever you want.
{{< carousel items="1" height="400" unit="px" duration="7000" data="carousel1" >}}
{{< carousel items="1" height="400" unit="px" duration="7000" data="carousel2" >}}
We adjusted the carousel.html like this:
{{ .Scratch.Set "height" (.Get "height") }}
{{ .Scratch.Set "unit" (.Get "unit") }}
{{ .Scratch.Set "ordinal" .Ordinal }}
{{ .Scratch.Set "items" (.Get "items") }}
<div id="carousel{{ .Ordinal }}" class="carousel" duration="{{ .Get `duration` }}">
<ul>
{{ range $index, $slide := .Page.Resources.Match (print (.Get "data") "/*") }}
<li id="c{{ $.Scratch.Get "ordinal" }}_slide{{ add $index 1}}" style="min-width: calc(100%/{{ $.Scratch.Get "items" }}); padding-bottom: {{ $.Scratch.Get "height" }}{{ $.Scratch.Get "unit" }};"><img src="{{ $slide }}" alt="" /><div><div>{{ $slide }}</div></div></li>
{{ end }}
</ul>
<ol>
{{ range $index, $page := .Page.Resources.Match (print (.Get "data") "/*") }}
<li><a href="#c{{ $.Scratch.Get "ordinal" }}_slide{{ add $index 1 }}"></a></li>
{{ end }}
</ol>
<div class="prev">‹</div>
<div class="next">›</div>
</div>
The yaml file is not needed.
The css and js file is the same.
I am glad you got it working.
The more you do with these templates the less scary it becomes.
Just for future reference I don’t think you need the more complex Scratch usage.
Also to finesse and for SEO maybe you can add alt tags from humanized filenames.
It should just be possible to do it like this:
{{ $height := (.Get "height") }}
{{ $unit := (.Get "unit") }}
{{ $items := (.Get "items") }}
<div id="carousel{{ .Ordinal }}" class="carousel" duration="{{ .Get "duration" }}">
<ul>
{{- range $index, $slide := .Page.Resources.Match (print (.Get "data") "/*") }}
<li id="c{{ $.Ordinal }}_slide{{ add $index 1}}" style="min-width: calc(100%/{{ $items }}); padding-bottom: {{ $height }}{{ $unit }};"><img src="{{ $slide }}" alt="" /><div><div>{{ $slide }}</div></div></li>
{{- end }}
</ul>
<ol>
{{- range $index, $page := .Page.Resources.Match (print (.Get "data") "/*") }}
<li><a href="#c{{ $.Ordinal }}_slide{{ add $index 1 }}"></a></li>
{{- end }}
</ol>
<div class="prev">‹</div>
<div class="next">›</div>
</div>
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.