Carousel in featured.html

[miyagidojo]

Hi,

I've been trying to replace the image and button in "featured.html" with carousel defined as partial. Basically I took the partial from "hugo-universal-theme", migrated the associated CSS to SCSS, imported the associated JS file.

The SCSS file has the following values:
.owl-carousel { display: none; position: relative; width: 100%; -ms-touch-action: pan-y; .owl-wrapper { display: none; position: relative; -webkit-transform: translate3d(0px, 0px, 0px); &:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } } ... }

I only get to see elements of the carousel if I set .owl-carousel.display to flex but it looks like this:

Zoomed out for perspective

Any advise?

[markdumay]

Unless there is a specific reason you want to use the carousel from hugo-universal-theme, I recommend you use the native Hinode carousel instead. With a little bit of tweaking, you can replace the featured section with a carousel instead. The following steps will get you started.

1. Create a new site

   git clone https://github.com/gethinode/template.git my-hinode-site && cd my-hinode-site

2. Install dependencies

   npm install

3. Add a new featured partial
   Create a new file in your repository with the following path: layout/partials/home/featured.html. This replaces the default file from the Hinode core library. Add the following content to add a container that stretches across the entire page (bounded by container-xxl).

   <div class="container-fluid flex-fill">
       <div class="container-xxl p-0">
           {{ .Content }}
       </div>
   </div>

4. Add the carousel to your main _index.md file
   Add the carousel shortcode to the file in content/en/_index.md (and repeat for each localized page):

   ---
   author: Mark Dumay
   title: Welcome to Hinode!
   ---
   
   {{< carousel ratio="16x9" class="col-12 mx-auto p-0" >}}
   {{< img src="img/coffee.jpg" caption="slide 1" >}}
   {{< img src="img/phone.jpg" caption="slide 2" >}}
   {{< img src="img/dunes.jpg" caption="slide 3" >}}
   {{< /carousel >}}

5. Start the development server

   npm run start

The result looks like this: