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

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

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

Patipat
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 996
ลงทะเบียนเมื่อ: 10/06/2019 10:12 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย Patipat »

ผมมี 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 1264 times

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

โค้ด: เลือกทั้งหมด

<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
});
});

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

โค้ด: เลือกทั้งหมด

jQuery(document).ready(function(){
  jQuery('.Item').slick({
  slidesToShow: 3,
  slidesToScroll: 3
});
});
Kor ma di kub. :)
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 22143
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

น่าจะต้องดูจากเว็บที่เอาตัว 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
โพสต์: 996
ลงทะเบียนเมื่อ: 10/06/2019 10:12 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย Patipat »

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

https://kenwheeler.github.io/slick/
Kor ma di kub. :)
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 22143
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

ตรง 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
โพสต์: 996
ลงทะเบียนเมื่อ: 10/06/2019 10:12 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย Patipat »

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

พอดีว่าผมใส่ไปแล้วครับแต่ ว่าขึ้นแจ้งเตือน "Uncaught Reference Error :Jquery is not defined" แล้วสินค้าก็ยังไม่เป็น Reponsive ด้วยครับ
error.png
Kor ma di kub. :)
Patipat
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 996
ลงทะเบียนเมื่อ: 10/06/2019 10:12 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย Patipat »

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

โค้ด: เลือกทั้งหมด

jQuery(document).ready(function(){


}
Kor ma di kub. :)
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: Bing [Bot] และบุคลทั่วไป 97