如何让缩略图与 ember-carousel 组件一起使用？

Question

我刚刚安装了 ember-carousel 组件并用它来替换我的 Ember 之前的 js 图像轮播设置，它不能很好地与 Ember 一起工作（只是最近开始使用 Ember）。

https://www.npmjs.com/package/ember-carousel

https://github.com/selvagsz/ember-carousel

所以我的 Handlebars 模板中有这段代码，它可以很好地在轮播中显示所有图像：

index.hbs:

{{#carousel-container transition-interval=400}}
    {{#carousel-body}}
        {{#each model as |rentalUnit|}}
            {{rental-listing rental=rentalUnit}}
        {{/each}}
    {{/carousel-body}}

    {{#carousel-arrow direction="left" tagName="button"}}
        Slide Left
    {{/carousel-arrow}}
    {{#carousel-arrow direction="right" tagName="button"}}
        Slide Right
    {{/carousel-arrow}}
{{/carousel-container}}

租金-listing.hbs:

{{#carousel-item}}
  <img src={{rental.image}} alt={{rental.caption}} width="500px" />
{{/carousel-item}}

旋转木马只有滑动 left/slide 右键来浏览图片。我还想有缩略图，这样您可以单击缩略图，轮播将显示相应的图像。

我已经用缩略图设置了布局，我只是不知道如何创建这个点击功能。通常我会使用 jQuery 和缩略图上的数据属性来切换当前显示的图像，我只是不确定如何在这个 ember-carousel/handlebars 模板中为缩略图创建这样的点击功能。（我是 Ember/handlebars 的新手，如果能帮我指出正确的方向，我将不胜感激。）我猜我需要向 carousel-container.js 添加一些自定义 js 代码？：https://github.com/selvagsz/ember-carousel/tree/master/app/components

Answer 1

一种解决方案是用组件替换 <img src={{rental.image}} alt={{rental.caption}} width="500px" />，这样您就可以设置所需的行为。例如，如果你想在点击图片时做一些事情，你可以使用这样的组件：

//rental-listing.hbs
{{#carousel-item}}
  {{thumbnail-image 
    image=rental.image  
    alt=rental.caption 
    thumbnailWidth="40" 
    thumbnailHeight="40" 
    imageWidth="230" 
    imageHeight="230"}}
{{/carousel-item}}

//thumbnail-image.js
  import Ember from 'ember';

  export default Ember.Component.extend({
    tagName:'img',
    attributeBindings:['src','alt','width','height'],
    isThumbnail:true,
    didReceiveAttrs(){
      this.set('src',this.get('image'));
      this.set('width',this.get('thumbnailWidth'));
      this.set('height',this.get('thumbnailHeight'));
    },
    click(){
      if(this.get('isThumbnail')){
        this.set('width',this.get('imageWidth'));
        this.set('height',this.get('imageHeight'));
      } else {
        this.set('width',this.get('thumbnailWidth'));
        this.set('height',this.get('thumbnailHeight'));
    }
    this.toggleProperty('isThumbnail');     
  }
});

你可以在这个ember-twiddle

中看到一个例子

编辑：我假设您使用的是 ember version >= 1.13 和 Ember-cli。如果没有，代码可以稍微改变。

如何让缩略图与 ember-carousel 组件一起使用？

How do I get thumbnails to work with the ember-carousel component?

handlebars.js

ember.js