Programmatic sliding

[beautyfree]

Can i slide content using some api?

[rcaferati]

Hey @beautyfree. Can you provide an example?

[sfatihk]

like; sliding with arrow keys...

[ujjwal-shrivastava]

Please provide sliding when I am fetching api , when I am fetching it and using it is showing all images in list format.
ATTACHING CODE

import PropTypes from "prop-types";
import React, { Fragment, useState } from "react";
import { Link } from "react-router-dom";
import { useToasts } from "react-toast-notifications";
import { connect } from "react-redux";
// import { getDiscountPrice } from "../../helpers/product";
import ProductModal from "./ProductModal";
import { setProductID } from "../../redux/actions/productActions";
import AwesomeSlider from "react-awesome-slider";
import withAutoplay from "react-awesome-slider/dist/autoplay";

const AutoplaySlider = withAutoplay(AwesomeSlider);

const ProductGridSingle = ({
product,
// currency,
addToCart,
// addToWishlist,
// addToCompare,
cartData,
// wishlistItem,
// compareItem,
sliderClassName,
spaceBottomClass,
colorClass,
titlePriceClass,
defaultStore,
setProductID,
userData,
}) => {
const [modalShow, setModalShow] = useState(false);
const { addToast } = useToasts();

// const discountedPrice = getDiscountPrice(product.price, product.discount);
const finalProductPrice = product.originalPrice;
const finalDiscountedPrice = product.finalPrice;
const onClickProductDetails = (id) => {
setProductID(id);
};
return (


<div
className={col-xl-3 col-md-6 col-lg-4 col-sm-6 ${ sliderClassName ? sliderClassName : "" }}
>
<div
className={product-wrap-2 ${ spaceBottomClass ? spaceBottomClass : "" } ${colorClass ? colorClass : ""} }
>

<Link
to={
process.env.PUBLIC_URL +
"/product/" +
product.description.friendlyUrl
}
onClick={() => onClickProductDetails(product.id)}
>
{product.images && product.images.length > 0}

          {/* {
          product.discount || product.new ? (
            <div className="product-img-badges">
              {product.discount ? (
                <span className="pink">-{product.discount}%</span>
              ) : ("")}
              {product.new ? <span className="purple">New</span> : ""}
            </div>
          ) : ("")
        } */}

          <div className="product-action-2">
            {/* {product.affiliateLink ? (
            <a
              href={product.affiliateLink}
              rel="noopener noreferrer"
              target="_blank"
              title="Buy now"
            >
              {" "}
              <i className="fa fa-shopping-cart"></i>{" "}
            </a>
          ) : product.variation && product.variation.length >= 1 ? (
            <Link
              to={`${process.env.PUBLIC_URL}/product/${product.id}`}
              title="Select options"
            >
              <i className="fa fa-cog"></i>
            </Link>
          ) : product.stock && product.stock > 0 ? ( */}
            <Link
              to={`product/${product.description.friendlyUrl}`}
              onClick={() => onClickProductDetails(product.id)}
              title="Select options"
            >
              <i className="fa fa-cog"></i>
            </Link>
            {product.available &&
              product.canBePurchased &&
              product.visible &&
              product.quantity > 0 && (
                <button
                  onClick={() =>
                    addToCart(
                      product,
                      addToast,
                      cartData,
                      1,
                      defaultStore,
                      userData,
                    )
                  }
                  className="active"
                  // disabled={cartItem !== undefined && cartItem.quantity > 0}
                  title="Add to cart"
                >
                  <i className="fa fa-shopping-cart"></i>{" "}
                </button>
              )}

            {/* ) : (
                  <button disabled className="active" title="Out of stock">
                    <i className="fa fa-shopping-cart"></i>
                  </button>
                )} */}

            <button onClick={() => setModalShow(true)} title="Quick View">
              <i className="fa fa-eye"></i>
            </button>

            {/* <button
            className={compareItem !== undefined ? "active" : ""}
            disabled={compareItem !== undefined}
            title={
              compareItem !== undefined
                ? "Added to compare"
                : "Add to compare"
            }
            onClick={() => addToCompare(product, addToast)}
          >
            <i className="fa fa-retweet"></i>
          </button> */}
          </div>
        </div>
        <div className="product-content-2">
          <div
            className={`title-price-wrap-2 ${
              titlePriceClass ? titlePriceClass : ""
            }`}
          >
            <h3>
              <Link
                to={
                  process.env.PUBLIC_URL +
                  "/product/" +
                  product.description.friendlyUrl
                }
                onClick={() => onClickProductDetails(product.id)}
              >
                {product.description.name}
              </Link>
            </h3>
            <div className="price-2">
              {product.discounted ? (
                <Fragment>
                  <span>{finalDiscountedPrice}</span>{" "}
                  <span className="old">{finalProductPrice}</span>
                </Fragment>
              ) : (
                <span>{finalProductPrice} </span>
              )}
            </div>
          </div>
          {/* <div className="pro-wishlist-2">
          <button
            className={wishlistItem !== undefined ? "active" : ""}
            disabled={wishlistItem !== undefined}
            title={
              wishlistItem !== undefined
                ? "Added to wishlist"
                : "Add to wishlist"
            }
            onClick={() => addToWishlist(product, addToast)}
          >
            <i className="fa fa-heart-o" />
          </button>
        </div> */}
        </div>
      </div>
    </div>
    {/* product modal */}
  </AwesomeSlider>
  <ProductModal
    show={modalShow}
    onHide={() => setModalShow(false)}
    product={product}
    defaultStore={defaultStore}
    // currency={currency}
    // discountedprice={discountedPrice}
    finalproductprice={finalProductPrice}
    finaldiscountedprice={finalDiscountedPrice}
    // cartitem={cartItem}
    // wishlistitem={wishlistItem}
    // compareitem={compareItem}
    addtocart={addToCart}
    cartData={cartData}
    userData={userData}
    // addtocompare={addToCompare}
    addtoast={addToast}
  />
</Fragment>

);
};

ProductGridSingle.propTypes = {
addToCart: PropTypes.func,
// addToCompare: PropTypes.func,
// addToWishlist: PropTypes.func,
// compareItem: PropTypes.object,
// currency: PropTypes.object,
product: PropTypes.object,
sliderClassName: PropTypes.string,
spaceBottomClass: PropTypes.string,
colorClass: PropTypes.string,
titlePriceClass: PropTypes.string,
// wishlistItem: PropTypes.object
};

const mapStateToProps = (state) => {
return {
defaultStore: state.merchantData.defaultStore,
};
};
const mapDispatchToProps = (dispatch) => {
return {
setProductID: (value) => {
dispatch(setProductID(value));
},
};
};
export default connect(mapStateToProps, mapDispatchToProps)(ProductGridSingle);