Carousel with Liquid Fire?

@accelerate wrote:

I was looking around with carousel implementations for Ember and was not happy with any of them, and my use case is pretty simple, so I thought it would be simple enough to roll my own using Liquid Fire, except... well, I'm not sure how to get started.

I basically have four divs that I want to be able to cycle through with a navigate-left and navigate-right button, like you see in most carousels. So at the very higest level, it looks something like:

<div class="carousel">
  <div class="tab-1">A</div>
  <div class="tab-2">B</div>
  <div class="tab-3">C</div>
  <div class="tab-4">D</div>
</div>
<button onclick={{action "navLeft"}}>Left</button>
<button onclick={{action "navRight"}}>Right</button>

I thought about using {{liquid-if}}, but that only supports two states (true/false). Would it be possible to chain liquid-ifs? I tried something like this:

{{#liquid-if (eq tab 1) class="tab-1"}}
  <div class="tab-1">A</div>
{{else}}
  {{#liquid-if (eq tab 2) class="tab-2"}}
    <div class="tab-2">B</div>
  {{else}}
    {{#liquid-if (eq tab 3) class="tab-3"}}
      <div class="tab-3">C</div>
    {{else}}
      <div class="tab-4">D</div>
    {{/liquid-if}}
  {{/liquid-if}}
{{/liquid-if}}

But that doesn't seem to work right. Going right works (ie, div scrolls to the left), but going left doesn't in that the div still scrolls to the left.

So is there a way to make this work? Would making each div as its own route make things simpler? (In my use case, this is possible).

Posts: 2

Participants: 1

Read full topic