Recommendations: Multiple Swipers within one page

In this example we want to integrate not only one Swiper on a page, but two. By default Swiper is targeting all classes with a classname of ".swiper-button-next". If we were to add two Swipers on the same page, clicking on a next or previous arrow would work for both of the Swipers and not only one of them.
(Note: This seems to only be an issue if you decide to move the next/previous arrows outside of the Swiper's component.)
To fix this, we can simply add our own custom buttons and hide the default ones. Then we give them custom classnames by using something like ${config.get('slot')}-prev which uses the recommendation id so that all recommendation arrows have unique classnames.

See for a code example below:

// ... some code

export default compose(
  withTheme(styles),

  connectItems,

  withMinResultsToShow(),

  withPropsOnChange(['config'], ({ config, size }) => ({
    sliderOptions: {
      breakpoints,
      // adjust the classes here
      navigation: {
        nextEl: `.${config.get('slot')}-next`,
        prevEl: `.${config.get('slot')}-prev`,
      },
      ...breakpoints[getBreakpoint(breakpoints)],
      ...config.get('sliderOptions', Map()).toJS(),
    }
  }))
)(view);

import React from 'react';
import Swiper from 'layouts/Recommendation/Slider/Swiper';
import ProductCard from 'components/Cards/Product'
import Text from 'components/Text';

export default ({ items, config, theme, sliderOptions }) =>
<React.Fragment display-if={items && items.size > 0}>
  <Text title className={theme.title}> 
    { config.get('title') }
  </Text>
  <div className="findify-swiper-wrapper">
    // add button with a custom className here
    <button className={`findify-swiper-button-prev ${config.get('slot')}-prev`}>
      <svg width="11" height="19" className="findify-components--icon" xmlns="http://www.w3.org/2000/svg"><path d="M3.064 9.507L11 1.539 9.468 0 0 9.507 9.454 19l1.532-1.539z" fill="currentColor"></path></svg>
    </button>
    <Swiper {...sliderOptions}>
      {
        items
          .map(item =>
            <div key={item.hashCode()}>
              <ProductCard item={item} config={config} />
            </div>
          )
          .toArray()
      }
    </Swiper>
	// add button with a custom className here
    <button className={`findify-swiper-button-next ${config.get('slot')}-next`}>
      <svg width="11" height="19" className="findify-components--icon" xmlns="http://www.w3.org/2000/svg"><path d="M7.936 9.507L0 1.539 1.532 0 11 9.507 1.546 19 .014 17.461z" fill="currentColor"></path></svg>
    </button>
  </div>
</React.Fragment>

// hide default swiper buttons
.swiper-button-next, .swiper-button-prev {
    display: none!important;
}