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