อยากทราบวิธีทำให้ สไลด์โชว์สินค้า เป็นแบบ 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
โพสต์: 798
ลงทะเบียนเมื่อ: 10/06/2019 10:12 am

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

โพสต์โดย 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) เปิดดู 150 ครั้ง



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

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

<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
});
});
If you fall, let you stand. :)

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 9998
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

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

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

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

โพสต์โดย Patipat » 15/07/2019 2:13 pm

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

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

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 9998
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

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

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

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

โพสต์โดย Patipat » 15/07/2019 2:38 pm

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

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

โพสต์โดย Patipat » 15/07/2019 3:01 pm

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


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

jQuery(document).ready(function(){


}
If you fall, let you stand. :)


ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 4 และ บุคคลทั่วไป 0 ท่าน