陣營終極版+佐賀圖片旋轉

Question

我建立包含的主圖像和縮略圖列表的旋轉木馬。

有上一個和下一個按鈕，允許用戶通過圖像瀏覽列表。

這是到目前爲止我的代碼：

import styles from './carousel.css'; 
import cn from '../../../utils/classname'; 
import actions from '../../../actions'; 

import Magnified from '../../../svg/icons/ui/magnified_glass'; 
import ArrowRight from '../../../svg/icons/ui/arrow_right'; 
import ArrowLeft from '../../../svg/icons/ui/arrow_left'; 

const Carousel = ({ dispatch, selectedCaravan }) => 
    <div className={cn(styles.carouselWrap)}> 
     <div className={cn(styles.carouselFeatWrap)}> 
      <a href="#" className={cn(styles.carouselExpand)} onClick={() => dispatch({ type: actions.CAROUSEL_EXPAND })}> 
       <Magnified /> 
      </a> 
      <ul className={cn(styles.carousel)}> 
     {selectedCaravan.images && selectedCaravan.images.map((image, i) => { 
      return <li key={i}> 
      <img src={image} /> 
      </li>; 
     })} 
      </ul> 
     </div> 
     <div className={cn(styles.carouselThumbNavWrap)}> 
      <ul className={cn(styles.carouselThumbnails)}> 
     {selectedCaravan.images && selectedCaravan.images.map((image, i) => { 
      return <li key={i} onClick={() => dispatch ({ type: actions.CAROUSE_GO_TO })}> 
      <img src={image} /> 
      </li>; 
     })} 
      </ul> 
      <div className={cn(styles.carouselNavigation)}> 
       <a href="#" className={cn(styles.carouselNavPrev)} onClick={() => dispatch({ type: actions.CAROUSEL_PREV })}> 
        <ArrowLeft /> 
       </a> 
       <a href="#" className={cn(styles.carouselNavNext)} onClick={() => dispatch({ type: actions.CAROUSEL_NEXT })}> 
        <ArrowRight /> 
       </a> 
      </div> 
     </div> 
    </div>; 

export default Carousel; 

我如CAROUSEL_NEXT和CAROUSEL_PREV行動。我正在監聽我的傳奇內容中的這些行爲，我的想法是我需要更新選定的索引，並以某種方式將主圖像更新爲用戶選擇的任何一個。

我的傳奇故事是這樣的，到目前爲止：

我不確定如何當用戶選擇一個新的圖像，以及如何以動畫或基本使轉盤幻燈片更新選定的索引。

Answer 1

我認爲你不需要傳奇的。

你剛纔定義的動作爲減速

// Action creators 
 
const selectNext =() => ({ 
 
    type: 'SELECT_NEXT', 
 
}) 
 

 
const selectPrev =() => ({ 
 
    type: 'SELECT_PREV', 
 
}) 
 

 
const selectById = (id) => ({ 
 
    type: 'SELECT_BY_ID', 
 
    payload: id, 
 
}) 
 

 
// Reducer 
 

 
const initial = { 
 
    selectedImageId: 0, 
 
    /* other state */ 
 
} 
 

 
function reducer(state = initial, action) { 
 
    switch(action.type) { 
 
    case 'SELECT_NEXT': 
 
     return { 
 
     ...state, 
 
     selectedImageId: state.selectedImageId + 1, 
 
     } 
 
    case 'SELECT_PREV': 
 
     return { 
 
     ...state, 
 
     selectedImageId: state.selectedImageId - 1, 
 
     } 
 
    case 'SELECT_BY_ID': 
 
     return { 
 
     ...state, 
 
     selectedImageId: action.payload, 
 
     } 
 
    default: 
 
     return state 
 
    } 
 
}

在這之後，你從react-redux

const Component = ({ selectedImageId, onNext, onPrev, onSelect }) => (
 
    <div> 
 
    <CarouselMainImage 
 
     id={selectedImageId} // this component will know which image to display based on this id 
 
    /> 
 
    {/* ... */} 
 
    <CarouselImages 
 
     onClick={onSelect} 
 
    /> 
 
    {/* ... */} 
 
    <PrevBtn 
 
     onClick={onPrev} 
 
    /> 
 
    <NextBtn 
 
     onClick={onNext} 
 
    /> 
 
    {/* ... */} 
 
    </div> 
 
) 
 

 
const mapStateToProps = state => ({ 
 
    selectedImageId: state.selectedImageId 
 
}) 
 

 
const mapDispatchToProps = dispatch => 
 
    // use action creators here 
 
    bindActionCreators({ 
 
    onNext: onSelectNext, 
 
    onPrev: onSelectPrev, 
 
    onSelect: onSelectById, 
 
    }, dispatch) 
 

 
const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)

通過回調

對於過渡，你可以這樣做：https://github.com/reactjs/react-transition-group