流星并让轮播使用#each动态渲染

Question

喜欢光滑。努力让它与来自 Meteor 的动态数据集一起工作。我现在遇到的问题是，当打开一个项目的先前实例时，我留下了先前 selected 的幻影空白幻灯片。如果我打开一个有 15 张图片的项目，将其关闭，然后 select 另一个 w/1 - 我有 14 张空白幻灯片。另外，如果我点击了第 15 张幻灯片，比如说第 7 张幻灯片，当我打开带有 1 的新项目时，我仍然指向幻灯片 7，它是空白的，需要点击左侧的 6 张幻灯片才能真正看到图片。

在我看来，我需要以某种方式重置 slick 控件？我只是不确定在哪里以及如何做。

按照此处的说明进行操作：Image slider doesn't show my images properly before they're cached 起床运行。

父模板

<div class="col-md-7">
  <div class="gallery">
    {{#each galleryImages}}
      {{> slickItem}}
    {{/each}}
  </div>
</div>

漂亮的模板

<template name="slickItem">
    <img class="slick-image" src="{{href}}">
</template>

我在光滑的渲染器上尝试了几个不同的选项。

 Template.slickItem.onRendered(function() {
    setTimeout(function() {
        $('.gallery').slick({
            arrows: true,
            dots: false,
            autoplay: false,
            infinite: true,
            mobileFirst: true,
            adaptiveHeight: true
        })
    }, 100);
});

Answer 1

与朋友 Patrick Lewis 合作，我们得出了以下结果 - 现在在 React 与 Blaze 中完成。

轮播 = React.createClass({

getInitialState: function() {
    return {
          carousel : null
    }
},

componentDidMount() {

    console.log("componentDidMount");

    this.setState({
        // carousel: $('#maveletCarousel')
        carousel: $(this.props.id)
    }, function() {
        console.log("carousel: componentDidMount", this.state);
        this.state.carousel.carousel();
    });
},

initCarousel: function() {

    // $('#maveletCarousel').carousel();

    // Initialize the carousel
    if( this.state.carousel ) {
        this.state.carousel.carousel({
            interval : 2000
        });
    }

},

render() {

    var hrefId = "#" + this.props.id;

    // <li data-target={hrefId} key={ index } data-slide-to={ index } className={ indicatorClass }></li>

    return (

      <div id={this.props.id} className="carousel slide">

          <ol className="carousel-indicators">
              {
                  this.props.slides.map((slide, index) => {
                      return (
                          <li data-target={hrefId} key={ index } data-slide-to={ index }></li>
                      );
                  })
              }
          </ol>

          <div className="carousel-inner" role="listbox">
              {
                  this.props.slides.map((slide, index) => {
                      return (
                          slide && <Slide slide={ slide } key={ index } index={ index } initCarousel={ this.initCarousel }/>
                      );
                  })
              }
          </div>

          <a className="left carousel-control" href={ hrefId } role="button" data-slide="prev">
              <span className="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              <span className="sr-only">Previous</span>
          </a>
          <a className="right carousel-control" href={ hrefId } role="button" data-slide="next">
              <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              <span className="sr-only">Next</span>
          </a>

      </div>

    );
}

});

幻灯片 = React.createClass({

componentDidMount() {
    this.props.initCarousel();
},

render() {

    var isActive = 'item'
    if( this.props.index === 0 ) {
        isActive = 'item active'
    }

    return (

        <div className={ isActive }>
            <img src={this.props.slide.href}></img>
        </div>

    )
}

})

流星并让轮播使用#each动态渲染

Meteor and getting carousel to render dynamically with #each

meteor

carousel

each

slick.js