滑块内容和回来

我采用与模板我用JS做出反应，http://templines.rocks//html/sokolcov/futurico/index-1.html 滑块内容和回来

我有报头由家庭和联系人。在我的家中，我实现了在标题下方保存内容的滑块。我在我的BannerComponent中编码它。

import React from 'react'; 
import bannerJSON from '../../../config/banner.json' 

const banners = bannerJSON.banners.map((banner, index)=>{ 
    return (
    <div className="home-slide" key= {index}> 
     <div className="container"> 
      <div className="row"> 
       <div className="col-xs-10 col-xs-offset-1 col-sm-10 col-sm-offset-1 text-center"> 
        <div className="b-home-slider-content" > 
         <h2 className="main-heading"> 
          {banner.title} 
         </h2> 
         <div className="home-slider-text"> 
          {banner.content} 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
) 
}) 
class BannerComponent extends React.Component { 
    render(){ 
    return (
     <div className="b-layer-big"> 
      <div className="layer-big-bg page-layer-big-bg"> 
       <div className="layer-content-big"> 

        <div className="b-home-slider-holder wow slideInUp"> 
         <div className="b-home-slider" data-slick='{"slidesToShow": 1, "slidesToScroll": 1, "fade": true, "speed": 1000, "autoplay": true}'> 
         {banners} 
        </div> 
        <div className="b-slick-arrows"> 
         <div className="custom-slideshow-controls"> 
          <span id="home-slider-prev" className="slick-arrows-prev arrow-transparent"><i className="fa fa-angle-left" aria-hidden="true"></i></span> 
          <span id="home-slider-next" className="slick-arrows-next arrow-transparent"><i className="fa fa-angle-right" aria-hidden="true"></i></span> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    ); 
    } 
} 

BannerComponent.defaultProps = { 
}; 

export default BannerComponent;

Home.js实际上呈现横幅组件

import React from 'react'; 
import Banner from './components/Banner' 
import Step from './components/Step' 
import Pricing from './components/Pricing' 

export default class Homepage extends React.Component { 


render(){ 
    return(
     <div className="b-page-content with-layer-bg"> 
     <Banner/> 
    <div className="b-homepage-content"> 
     <div className="b-layer-main"> 
     <div className="page-arrow"> 
      <i className="fa fa-angle-down" aria-hidden="true"></i> 
     </div> 
     <Step/> 
     <Pricing/> 
     </div> 
    </div> 
    </div> 
    ) 
    } 
}

滑块完美的作品时，我刷新页面。但是，当通过单击“联系人”更改页面内容，然后单击“返回到主页”时，滑块中的内容将消失。在检查F12中，我仍然可以看到内容出现在元素标签中。内容在页面上不可见，滑块不再滑动。我怀疑它是React JS的东西，不重新渲染它。

如果没有错误，Futirico使用的滑块是某种http://kenwheeler.github.io/slick/。

来源

2017-09-02 Mervyn Lee

你能告诉你如何以及在哪里调用'slick'方法吗？ – Panther

漂亮是一个jQuery插件。它不能与react.js良好混合。可能的反应是改变光滑的事件监听器所附带的dom元素。如果事件监听器不见了，slick.js将停止工作。 –

还有另外的carousel组件可以用于react.js。这里有一个：https：//github.com/akiran/react-slick –

Slick是一个jQuery插件。它不能与React.js很好地混合。 React很可能正在改变Slick将事件监听器附加到的DOM元素。如果事件监听器不见了，Slick.js将停止工作。

还有一些替代轮播组件是为React.js制作的。这里有一个：https://github.com/akiran/react-slick

来源

2017-09-03 09:24:16

滑块内容和回来

回答

相关问题