อยากทราบวิธีทำให้ สไลด์โชว์สินค้า เป็นแบบ Responsive แสดง Product ตามที่เรากำหนดขนาดหน้าจอ

ถามตอบ ปัญหาการพัฒนา Extension ไม่ว่าจะเป็น Module plugin Component หรือ แม้แต่ template การปรับแต่งโค้ด Joomla ต่างๆ ทุกเวอร์ชั่น 1.5 2.5 หรือ 3.x

Moderators: mindphp, ผู้ดูแลกระดาน

Patipat
PHP Super Hero Member
PHP Super Hero Member
Posts: 996
Joined: 10/06/2019 10:12 am

อยากทราบวิธีทำให้ สไลด์โชว์สินค้า เป็นแบบ Responsive แสดง Product ตามที่เรากำหนดขนาดหน้าจอ

Post by Patipat » 15/07/2019 11:52 am

ผมมี Slide Show Product อยู่ครับ แสดงสินค้าอยู่ 3 รายการแบบ(แสดงบนเว็บไซต์) ตามภาพนะครับ
สไลด์.png
แต่อยากทำให้เป็น Responsive พอบีบหน้าจอแล้ว ให้ Product ของเรา แสดงสินค้าตามที่เราต้องการให้แสดงได้ สมมติว่า จอเล็กก็ให้แสดงสินค้าสไลด์แบบ ทีล่ะชิ้น แบบรูปมะม่วงด้านล่างในส่วนที่เป็นแสดงสินค้าล่าสุด
แต่ในภาพนี้ ยังไม่เป็น Responsive ยังเป็นสินค้า 3 รายการอยู่เหมือนเดิม
2019-07-15_11-46-02.png
2019-07-15_11-46-02.png (93.21 KiB) Viewed 247 times

โค้ดตัวอย่างแสดงสินค้าครับ

Code: Select all

<div class="slider Item">

<center> 
    
        <?php foreach ( $product_slisdershow as $product): ?>
    <div>
        <a href="<?php echo SEFLink('index.php?option=com_mooziicart&controller=product&task=view&category_id=' . $product['category_id'] . '&product_id=' . $product['product_id'], 1); ?>" > 
            <center> <img src='<?php echo JUri::root() . 'components/com_mooziicart/files/img_products/' . $product['image'];?>' width=100px heigh=100px title="<?php echo $product['name_en-GB'] ?>" alt="<?php echo $product['name_en-GB'] ?>"></a><center>
                <br><br>
            <center> <?php echo ($product['name_en-GB'])  ?><br></center>
          <?php echo ($product['product_price'])  ?>  <br><br><br>
    </div>      
</center>    
 <?php endforeach; ?>
</div>


jQuery(document).ready(function(){
  jQuery('.Item').slick({
  slidesToShow: 3,
  slidesToScroll: 3
});
});

**เราต้องแก้ไข สคริปของ ตัวแสดงสินค้าได้หรือไม่ครับ

Code: Select all

jQuery(document).ready(function(){
  jQuery('.Item').slick({
  slidesToShow: 3,
  slidesToScroll: 3
});
});
If you fall, let you stand. :)

User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 10452
Joined: 18/04/2012 9:39 am

Re: อยากทราบวิธีทำให้ สไลด์โชว์สินค้า เป็นแบบ Responsive แสดง Product ตามที่เรากำหนดขนาดหน้าจอ

Post by tsukasaz » 15/07/2019 12:25 pm

น่าจะต้องดูจากเว็บที่เอาตัว slide มาใช้ ว่าสามารถตั้งค่าอย่างไรได้บ้าง
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

Patipat
PHP Super Hero Member
PHP Super Hero Member
Posts: 996
Joined: 10/06/2019 10:12 am

Re: อยากทราบวิธีทำให้ สไลด์โชว์สินค้า เป็นแบบ Responsive แสดง Product ตามที่เรากำหนดขนาดหน้าจอ

Post by Patipat » 15/07/2019 2:13 pm

ครับผม พอดีลิงค์นี้ พอจะทราบไหมครับ ว่าเข้าไปดูวิธีการใช้งาน แบบปรับให้เป็น Responsive ได้ตรงไหนครับ

https://kenwheeler.github.io/slick/
If you fall, let you stand. :)

User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 10452
Joined: 18/04/2012 9:39 am

Re: อยากทราบวิธีทำให้ สไลด์โชว์สินค้า เป็นแบบ Responsive แสดง Product ตามที่เรากำหนดขนาดหน้าจอ

Post by tsukasaz » 15/07/2019 2:16 pm

ตรง demo จะมีหัวข้อ responsive ครับ
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)


Patipat
PHP Super Hero Member
PHP Super Hero Member
Posts: 996
Joined: 10/06/2019 10:12 am

Re: อยากทราบวิธีทำให้ สไลด์โชว์สินค้า เป็นแบบ Responsive แสดง Product ตามที่เรากำหนดขนาดหน้าจอ

Post by Patipat » 15/07/2019 2:38 pm

tsukasaz wrote:ตรง demo จะมีหัวข้อ responsive ครับ

พอดีว่าผมใส่ไปแล้วครับแต่ ว่าขึ้นแจ้งเตือน "Uncaught Reference Error :Jquery is not defined" แล้วสินค้าก็ยังไม่เป็น Reponsive ด้วยครับ
error.png
If you fall, let you stand. :)

Patipat
PHP Super Hero Member
PHP Super Hero Member
Posts: 996
Joined: 10/06/2019 10:12 am

Re: อยากทราบวิธีทำให้ สไลด์โชว์สินค้า เป็นแบบ Responsive แสดง Product ตามที่เรากำหนดขนาดหน้าจอ

Post by Patipat » 15/07/2019 3:01 pm

ได้แล้วครับ
ใส่ Funcrion นี้ ครอบในฟังก์ชันที่ Error อีกทีครับ

Code: Select all

jQuery(document).ready(function(){


}
If you fall, let you stand. :)

Post Reply

Return to “Joomla Development”

Who is online

Users browsing this forum: No registered users and 35 guests