flickity | : leaves : Touch , responsive , flickable carousels | Carousel library

I'm using vue-flickity for a carousel. There's a component (the carousel), a

tag with data {{ selectedIndex }}, and a button which gets the current slide number from flickity, and updates selectedIndex.

How can I automatically update selectedIndex with the current slide index when a user scrolls left or right (i.e. calls Next/Previous methods)? I'm struggling to "hook into" those methods of the module.

I can define a method Next() and bind that to a button, but it doesn't update when a user scrolls.

EDIT: I've managed to hook into on.change (using mounted). console.log shows me the correct selectedInde now, but this isn't reacting down to where it says "You are at Slide number {{ selectedIndex }}"

So I'm trying to make my nav bar stick to the top of the page when people scroll, but it doesn't want to work. For some reason, the console keeps throwing an error saying the classList.remove() attributes are undefined. Yet at the same time, when I remove them, the navbars don't stick.

If it helps, I built two navbars. One for mobile/tablet and another for desktops.

What's going on with this?

I'm building a new project with Flickity and I'm running into an issue with a jumping anchor tag I created on the homepage. The purpose of it is to jump to a specific section on the homepage when clicked. It's simply a font-awesome icon with some text beneath it, nothing else.

However, despite all 3 sections being identical, the anchor tag only appears on the first section. What's more, I have it programmed to jump to the next section (1 > 2 > 3), but it only wants to jump to the last section when clicked.

I've pasted the code below, but you'll get a better idea of how it currently works by watching this screen recording: https://imgur.com/a/9HBB6by

Having an error when rendreing the project. I have checked all details but couldnt find the which line is causing the issue. The console says Vue warn]: Property or method "options" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. Here is what I tried.

navbar.vue

Pretty simple issue, I think it may be related to this question but in Vue instead of Angular. The CSS styling I try to apply to my Flickity carousel doesn't render for my Vue 3 app. In the IDE the styles are greyed out, but when I edit them in my browser via the inspection (like changing the carousel-cell width, for example), it works fine.

Am I missing a CSS import somewhere to make my CSS file correctly alter the appearance of my rendered layout in a browser?

I've created a custom Flickity.vue object for Vue 3 and TypeScript support, following the accepted answer here.

When I try to listen for events on my flickity carousel however, i'm plagued by runtime type errors in my console: this$refs.flickity.on is not a function

What's causing my current approach to break?

DisplayPage.vue

I've been working with Flickity in my Vue 3 app, and it works fine when I use a hard-coded HTML carousel with static cells. I need to add cells programmatically at runtime, however, and I can't get the Flickity API to work correctly.

I'm trying to follow the append() example, but I get the error:

...

I declare a variable to have type any at the beginning of my

I am new to Go, and learning Interfaces and Structs. I am having 2 structs - ServiceSection and SliderSection and I am trying to accomplish the below 2 tasks with each of them-

1. GET the JSON response and unmarshal it.
2. Use the struct to create HTML using "html/template"

Therefore, I am trying to create a common function to perform both the tasks that can work for multiple Structs. The plan is to create 5-6 more such structs. Below is the code I have created-