React image slider in 2 rows

Asked
Active3 hr before
Viewed126 times

9 Answers

react
90%

import React, { Component } from "react";
import Slider from "react-slick";

export default class MultipleRows extends Component {
  render() {
    const settings = {
      className: "center",
      centerMode: true,
      infinite: true,
      centerPadding: "60px",
      slidesToShow: 3,
      speed: 500,
      rows: 2,
      slidesPerRow: 2
    };
    return (
      <div>
        <h2>Multiple Rows</h2>
        <Slider {...settings}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
          <div>
            <h3>7</h3>
          </div>
          <div>
            <h3>8</h3>
          </div>
          <div>
            <h3>9</h3>
          </div>
          <div>
            <h3>10</h3>
          </div>
          <div>
            <h3>11</h3>
          </div>
          <div>
            <h3>12</h3>
          </div>
          <div>
            <h3>13</h3>
          </div>
          <div>
            <h3>14</h3>
          </div>
          <div>
            <h3>15</h3>
          </div>
          <div>
            <h3>16</h3>
          </div>
        </Slider>
      </div>
    );
  }
}
88%

React resposive carousel component w/ grid layout to easily create a carousel like photo gallery, shopping product card or anything you want ,Responsive carousel (KKday-like),Support any component as a item to put into grid

$ npm install react - grid - carousel--save
load more v
72%

Production-ready, lightweight fully customizable React carousel component that rocks supports multiple items and SSR(Server-side rendering).,Shows the next items partially, this is very useful if you want to indicate to the users that this carousel component is swipable, has more items behind it.,This is very useful if you don't want the dots, or arrows and you want to fully customize the control functionality and styling yourself.

import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
const responsive = {
  superLargeDesktop: {
    // the naming can be any, depends on you.
    breakpoint: { max: 4000, min: 3000 },
    items: 5
  },
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 3
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 2
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1
  }
};
<Carousel responsive={responsive}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</Carousel>;
load more v
65%

You need something like that Template:,I need to make a two lines carousel with left to right order (also responsive),Connect and share knowledge within a single location that is structured and easy to search.

You need something like that Template:

<div class="carousel">
   <div class=""><img src="/images/app.png" alt=""></div>
   <div class=""><img src="/images/app.png" alt=""></div>
   <div class=""><img src="/images/app.png" alt=""></div>
   <div class=""><img src="/images/app.png" alt=""></div>
   <div class=""><img src="/images/app.png" alt=""></div>
   <div class=""><img src="/images/app.png" alt=""></div>
   <div class=""><img src="/images/app.png" alt=""></div>
   <div class=""><img src="/images/app.png" alt=""></div>
   <div class=""><img src="/images/app.png" alt=""></div>
   <div class=""><img src="/images/app.png" alt=""></div>
   <div class=""><img src="/images/app.png" alt=""></div>
   <div class=""><img src="/images/app.png" alt=""></div>
</div>
load more v
75%

The last step is adding the scroll on click functionality to the arrows.,To do this we use a bit of JQuery. First, lets add a function to our arrow link:,That is pretty much the meat of creating the CSS. The last bit is just adding styling to the arrows.

We have our main component “App” and in that component we will render all the JSX.

render() {    return <div className="main">      <h1 className="title">Scrolling Image Slider</h1>      <div className="wrapper">        <a className="prev" onClick={this.scroll.bind(null,-1)}>&#10094;</a>        <div className="image-container">          <div className="image">1</div>          <div className="image">2</div>          <div className="image">3</div>          <div className="image">4</div>          <div className="image">5</div>          <div className="image">6</div>          <div className="image">7</div>          <div className="image">8</div>          <div className="image">9</div>          <div className="image">10</div>        </div>        <a className="next" onClick={this.scroll.bind(null,1)}>&#10095;</a>      </div>    </div>;  }
load more v
40%

Sponsor Sponsor akiran/react-slick ,I have a slick slider that renders dynamic items.,I can work around this quite simply by hiding the cloned row if the number of items returned is less than "slidesToShow", but I would rather that this wasn't rendered at all, obviously.

slidesToShow = {
   Math.min(images.length, 4)
}
22%

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.,If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.,If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Pretag
 Pretag team - issue, fix, solve, resolve
60%

Pretag
 Pretag team - issue, fix, solve, resolve
48%

Step 2. We’ve already established that Slider and SliderContent are going to be responsible for the majority portion of the visuals in our slider, but how exactly are we going to achieve this?,Let’s style our Slider component with the necessary CSS:,Slider (Our top-level component)

Pretag
 Pretag team - issue, fix, solve, resolve

Other "react-undefined" queries related to "React image slider in 2 rows"