make menu dynamically

[NunChatSpace]

หลีกเลี่ยงการใช้ hard code แบบนี้ เพราะอยากจะเปลี่ยนมันต้องมาแก้ที่โค้ดนี้

<div class="topmenu"> 
        <ul class="d-flex">
            <li><a href="/" class="tabs item1">
                <div class="categorytop item-1">
                    <div class="categoryimg item1"></div>
                    <div class="captionimg-1">เสื้อผ้าแฟชั่นผู้ชาย</div>
                </div>
            </a></li>
            <li><a href="/" class="tabs item1">
                <div class="categorytop item-1">
                    <div class="categoryimg item2"></div>
                    <div class="captionimg-1">มือถือและอุปกรณ์เสริม</div>
                </div>
            </a></li>
        ...
        </ul>
</div>

เปลี่ยนเป็นลูป

<div class="topmenu"> 
        <ul class="d-flex">
            {#each items as item, index}
                <li><a href="/" class="tabs item">
                    <div class="categorytop item">
                        <image class=`categoryimg` src=`${item.url}`></div>
                        <div class="captionimg">{item.description}</div>
                    </div>
                </a></li>
            {:each}
        </ul>
</div>

[NunChatSpace]

ตรง flashsale เหมือนกัน

<div class="flashcontent">
        <div class="img-flashsale d-flex container">
            <a href="/" class="flashitem-1">
                <div class="flashsale1">
                    <div class="flashimg-1"></div>
                    <div class="flashimgcover"></div>
                    <div class="price-1">฿11,900
                        <div class="flashbar">
                            <img src="https://deo.shopeemobile.com/shopee/shopee-pcmall-live-sg/ac7f81d9ee062223753413ec98497a86.png" alt="">
                        </div>
                    </div>
                    <div class="discount-1">
                        <span>ลด</span>
                        <span>73%</span>
                    </div>

                </div>  
            </a>

ลองเปลี่ยนไปใช้ เป็นลูป

[NunChatSpace]

carousel เหมือนกัน

<div class="carousel-item carousel-image-1 active">
                <div class="container">
                    <div class="carousel-caption d-none d-sm-block">
                    </div>
                </div>
            </div>
            <div class="carousel-item carousel-image-2">
                <div class="container">
                    <div class="carousel-caption d-none d-sm-block">
                    </div>
                </div>
            </div>
            <div class="carousel-item carousel-image-3">
                <div class="container">
                    <div class="carousel-caption d-none d-sm-block">  
                    </div>
                </div>
            </div>
            <div class="carousel-item carousel-image-4">
                <div class="container">
                    <div class="carousel-caption d-none d-sm-block">
                    </div>
                </div>
            </div>
...
</div>

[NunChatSpace]

ตรงนี้ด้วย

<div class="img-flashsale d-flex container">
            <a href="/" class="flashitem-1">
                <div class="flashsale1">
                    <div class="flashimg-1"></div>
                    <div class="price-1">฿24</div>
                    <div class="discount-1">
                        <span>ลด</span>
                        <span>73%</span>
                    </div>
                </div>  
            </a>
            <a href="/" class="flashitem-1">
                <div class="flashsale1">
                    <div class="flashimg-2"></div>
                    <div class="flashimgcover"></div>
                    <div class="price-1">฿60</div>
                    <div class="discount-1">
                        <span>ลด</span>
                        <span>80%</span>
                    </div>
                </div>  
            </a>
...
</div>