滑塊內容和回來

我採用與模板我用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

滑塊內容和回來

回答

相關問題