Ice Swiper

Features

• Support Customize Navigator Button
• Responsive friendly Breakpoint Support

Example

ตัวอย่างการใช้งานเบื้องต้น

<IceSwiper
  minimumBreakpoint={{
    contentWidth: 200,
    contentHeight: 200,
    slidePerview: 1,
    spaceBetween: 0,
    navigator: false,
    sidePaddingNavigator: 0,
  }}
  breakpoints={[
    {
      screen: 1024,
      contentWidth: 300,
      contentHeight: 300,
      slidePerview: 3,
      spaceBetween: 20,
      navigator: true,
      sidePaddingNavigator: 100,
    },
    {
      screen: 738,
      contentWidth: 240,
      contentHeight: 240,
      slidePerview: 2,
      spaceBetween: 20,
      navigator: true,
      sidePaddingNavigator: 100,
    },
  ]}
>
  <div style={{ background: "red", height: "100%", display: "flex" }}>
    <p style={{ margin: "auto" }}>asdasdasdasd</p>
  </div>
  <div style={{ background: "green", height: "100%" }}>Item1</div>
  <div style={{ background: "purple", height: "100%" }}>Item2</div>
  <div style={{ background: "blue", height: "100%" }}>Item3</div>
  <div style={{ background: "pink", height: "100%" }}>Item4</div>
</IceSwiper>

Breakpoint

ตัวอย่างการกำหนด breakpoint

<IceSwiper
    minimumBreakpoint={{
       contentWidth: 200,
       contentHeight: 200,
       slidePerview: 1,
       spaceBetween: 0,
       navigator: true,
       sidePaddingNavigator: 0,
     }}
     breakpoints={[
       {
         screen: 1024,
         contentWidth: 300,
         contentHeight: 300,
         slidePerview: 3,
         spaceBetween: 20,
         navigator: true,
         sidePaddingNavigator: 100,
       },
       {
         screen: 738,
         contentWidth: 240,
         contentHeight: 240,
         slidePerview: 2,
         spaceBetween: 20,
         navigator: true,
         sidePaddingNavigator: 100,
       },
     ]}
   >
     {...}
 </IceSwiper>

Brakpoint Minimum

Breakpoint 1024

Breakpoint 738

Breakpoint 1024

Attributes Breakpoints | Attribute | Type | Description | | -------- | --------------------------------------------- | -------------------------------------------------------------------------------------------------- | | screen | number | ขนาดของหน้าจอ (ไม่มีใน Attribute MinimumBreakpoint เพราะไม่ได้ต้องกำหนดขนาดหน้าจอ) | | contentWidth | number | ขนาดของ Width (Pixel) ของ Content | | contentHeight | number | ขนาดของ Height (Pixel) ของ Content | | slidePerview | number | จำนวน Content ที่ต้องการแสดง ต่อ 1 Slide | | spaceBetween (optional) | number | ระยะห่างระหว่าง Content (Pixel) | | sidePaddingNavigator (optional) | number | ระยะ Padding ซ้ายขวาของ Navigator Button (Pixel) | | navigator | boolean | แสดง Navigator Button |

Custom Navigator Button

ตัวอย่างการ เปลี่ยน Navigator Button

<IceSwiper
    navigatorButton={{
      backward: (
        <div
          style={{
            width: 40,
            eight: 40,
            background: "green",
            borderRadius: "100%",
          }}
        ></div>
      ),
      forward: (
        <div
           style={{
            width: 40,
            height: 40,
            background: "red",
            borderRadius: "100%",
          }}
        ></div>
      ),
    }}
    minimumBreakpoint={{
      ...
    }}
    breakpoints={[
      ....
    ]}
  >
....
</IceSwiper>

Output