第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Reactjs:如何添加帶有旋轉(zhuǎn)圖片庫的下一個/上一個按鈕

Reactjs:如何添加帶有旋轉(zhuǎn)圖片庫的下一個/上一個按鈕

www說 2022-12-02 17:27:48
我正在創(chuàng)建一個圖片庫AliceCarousel。我在這里遇到的一個錯誤是在制作時next或者previous它總是回到初始圖像`。它不會在下一張幻燈片上停止。我在這里做的錯誤和幫助或建議。請。//代碼class LivingService extends React.Component {  constructor(props) {    super(props);    this.state = {      currentIndex: null,      responsive: { 1024: { items: 4 } },      services : this.props.resume,      ...props,      ItemsServices:[]    };    this.galleryItems = this.galleryItems.bind(this);  }  static propTypes = {    getService: PropTypes.func.isRequired,    resume: PropTypes.object.isRequired,    auth: PropTypes.object.isRequired,    loading: PropTypes.object.isRequired  }  UNSAFE_componentWillReceiveProps(nextProps) {    if(nextProps.resume !== this.props.resume){      var services  = this.props.resume.services;      this.setState({        ItemsServices: services      })    }  }  componentDidMount() {    this.props.getService();    }  onSlideChanged = (e) => this.setState({ currentIndex: e.brand })  slideNext = () => this.setState(prevState => ({ currentIndex: prevState.currentIndex + 1 }));  slidePrev = () => this.setState(prevState => ({ currentIndex: prevState.currentIndex - 1 }));  thumbItem = (brand, i) => <span onClick={() => this.slideTo(brand._id)}>* </span>  slideTo = (_id) => this.setState({ currentIndex: _id })  galleryItems = () => {    return this.state.ItemsServices.map((brand, i) => {      if(brand.service_name === "Office"){        return (          <div className="col-xs-12" key={brand._id} data-id={brand._id} ><img src={brand.service_image_url} /></div>        )      }          })  };   render() {    const { responsive, currentIndex } = this.state    const  items = this.galleryItems();    return(      <div>        <Grid className ="col-12 service-living-gallery-grid" >          <div className="service-gallery-headline">              Living          </div>    )  }}
查看完整描述

2 回答

?
莫回?zé)o

TA貢獻(xiàn)1865條經(jīng)驗 獲得超7個贊

我已經(jīng)通過使用解決了這個問題owlcarousel。

請查看更多OwlCarousel 在這里,我過濾了數(shù)組并返回了響應(yīng)。


render() {

    const { services, loading} = this.props.resume;

    var checkImage = services.length === 0 ? [] : services.filter((item) => item.service_name === "Kitchen")

    return(

      <div>


            <OwlCarousel className="owl-theme" loop margin={10} nav>

               {checkImage.map((item, i) => ( 

                <div className="col-xs-12 item" key={item._id} data-id={item._id} >

                  <img className="service-gallery-images" src={item.service_image_url} alt=""/>

                </div>

            ))}

            </OwlCarousel>

      </div>

    )

  }


查看完整回答
反對 回復(fù) 2022-12-02
?
眼眸繁星

TA貢獻(xiàn)1873條經(jīng)驗 獲得超9個贊

問題很可能是您必須在方法中使用 prevState :

像這樣:

 slideNext = () => this.setState(prevState => ({ currentIndex: prevState.currentIndex + 1 }));

對你的兩種方法都這樣做。


查看完整回答
反對 回復(fù) 2022-12-02
  • 2 回答
  • 0 關(guān)注
  • 96 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號