Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 108,419

HOME > PHP > PHP Forum > สอบถามเกี่ยวกับการนำค่าข้อมูลที่ append ไปใส่ในตัว carousel หน่อยครับ








 

สอบถามเกี่ยวกับการนำค่าข้อมูลที่ append ไปใส่ในตัว carousel หน่อยครับ

 
Topic : 135549



โพสกระทู้ ( 108 )
บทความ ( 0 )



สถานะออฟไลน์



ติดปัญหาเก่ยวกับการนำข้อมูลที่ได้จากการ ลูป เเล้วนำไป append ใส่ตัวเเปล เพื่อทำเป็นตัว carousel คือมันยังไม่สามารถทำให้เป็นตัว carousel ได้ครับ รบกวนเเนะนำหน่อยครับ

Code (PHP)
function byg_replace(data) {
		var md = data; 
		var i;
		var txt = '';
		for (var i = 0; i < md.mod.length; i++) {
			var mv = md.mod[i] ;
			var txt ='<div class="item"><div class="d-flex flex-row w-100 pb-0"><img src="' +  mv.pic  + '"> </div> </div>';
		}
		$("#div_model").append(txt);
}


Code (PHP)
     <div class="features-today-box owl-wrapper" >
            <div class="owl-carousel " id="div_model">
				
            </div>
        </div>




Tag : PHP, JavaScript, Ajax, jQuery


Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2020-09-16 18:50:38 By : worapong39 View : 114 Reply : 21
 

 

No. 1



โพสกระทู้ ( 1,290 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

Quote:
คือมันยังไม่สามารถทำให้เป็นตัว carousel ได้

ไม่ได้ยังไง รูปไม่ขึ้น ขึ้นอันเดียว หรืออย่างอื่น

ลองย้าย append ไปไว้ในลูปดูครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-09-16 19:54:46 By : PhrayaDev
 


 

No. 2



โพสกระทู้ ( 108 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 1 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-09-16 19:54:46
รายละเอียดของการตอบ ::
ไม่เเสดงเลย ครับ ผมลองเทสดูเเบบนำข้อมูลใส่ลงในตัว div carousel มันก็ทำงานได้ปกติดีครับ เเต่พอใช้ตัว append มันกลายเป็น ว่างเปล่า

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-09-16 20:08:01 By : worapong39
 


 

No. 3



โพสกระทู้ ( 108 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 1 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-09-16 19:54:46
รายละเอียดของการตอบ ::
ส่วนนี้จะเป็น ตัวที้่เมื่อนำข้อมูลเข้าไปใส่ มันเเสดงเป็น carousel ให้ครับ

Code (PHP)
<div class="features-today-box owl-wrapper">
    <div class="owl-carousel owl-theme" data-num="4" style="opacity: 1; display: block;" id="div_model">
        <div class="owl-wrapper-outer">
            <div class="owl-wrapper" style="width: 1500px; left: 0px; display: block; transition: all 800ms ease 0s; transform: translate3d(-375px, 0px, 0px);">
                <div class="owl-item" style="width: 375px;">
                    <div class="item news-post standard-post">
                        <div class="d-flex flex-row w-100 pb-0">
                            <img src="640_2018082412415290.jpg"> 
                        </div>   
                    </div>
                </div>
                <div class="owl-item" style="width: 375px;">
                    <div class="item news-post standard-post">
                        <div class="d-flex flex-row w-100 pb-0">
                            <img src="640_2018082412415290.jpg"> 
                        </div>   
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



ส่วนตัวนี้เมื่อดึงผ่าน id="div_model">

Code (PHP)
<div class="features-today-box owl-wrapper">
    <div class="owl-carousel " id="div_model" style="opacity: 1;">
        <div class="item news-post standard-post">
            <div class="d-flex flex-row w-100 pb-0"><img src="2018082416424388.jpg"> </div> 
        </div>
        <div class="item news-post standard-post">
            <div class="d-flex flex-row w-100 pb-0"><img src="2018082416424388.jpg" > </div> 
        </div>
    </div>
</div>





ประวัติการแก้ไข
2020-09-16 20:29:57
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-09-16 20:18:11 By : worapong39
 


 

No. 4



โพสกระทู้ ( 1,290 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

ตอบความคิดเห็นที่ : 3 เขียนโดย : worapong39 เมื่อวันที่ 2020-09-16 20:18:11
รายละเอียดของการตอบ ::
ลองใส่ข้อมูลแบบนี้ดูครับ ว่าได้หรือไม่ (เปลี่ยนเฉพาะ img src)

Code (PHP)
<div class="features-today-box owl-wrapper">
    <div class="owl-carousel " id="div_model" style="opacity: 1;">
        <div class="item news-post standard-post">
            <div class="d-flex flex-row w-100 pb-0"><img src="640_2018082412415290.jpg"> </div> 
        </div>
        <div class="item news-post standard-post">
            <div class="d-flex flex-row w-100 pb-0"><img src="640_2018082412415290.jpg" > </div> 
        </div>
    </div>
</div>


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-09-16 22:08:57 By : PhrayaDev
 


 

No. 5



โพสกระทู้ ( 108 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 4 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-09-16 22:08:57
รายละเอียดของการตอบ ::
ใส่ตามนี้ข้อมูลลงไป โดยไม่ดึงผ่าน append ตัว carousel ทำงาน ปกติครับ
Code (PHP)
<div class="features-today-box owl-wrapper">
    <div class="owl-carousel "  style="opacity: 1;">
        <div class="item news-post standard-post">
            <div class="d-flex flex-row w-100 pb-0"><img src="640_2018082416424388.jpg"> </div> 
        </div>
        <div class="item news-post standard-post">
            <div class="d-flex flex-row w-100 pb-0"><img src="640_2018082416424388.jpg" > </div> 
        </div>
    </div>
</div>


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-09-16 22:36:59 By : worapong39
 


 

No. 6



โพสกระทู้ ( 1,290 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

แสดงว่ามันหาไฟล์รูปภาพไม่เจอ
ลองกลับไปเช็คค่า mv.pic
ในฟังก์ชัน byg_replace

Code (JavaScript)
var txt ='<div class="item"><div class="d-flex flex-row w-100 pb-0"><img src="' +  mv.pic  + '"> </div> </div>';


จะใส่ alert หรือ console.log ก็ได้ครับ ดูว่า src มันถูกหรือไม่ ถ้าไม่ถูกไล่ย้อนกลับไปดูตั้งแต่พารามิเตอร์
data ที่รับเข้ามา ถ้าเป็น JSON ก็ไล่ดูโครงสร้างว่าเข้าถึง object ถูกหรือไม่ ถ้ามั่นใจว่าถูกแล้ว
สุดท้ายคือชื่อไฟลรูปภาพที่อยู่ใน JSON ไม่ถูกต้อง ...ถ้าผมจำไม่ผิดจากกระทู้เก่า เห็นบอกรับมาจาก web service
หรือไม่ว่าจะมาจากแหล่งใด ก็ต้องแก้ไขที่ต้นทางครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-09-16 23:05:15 By : PhrayaDev
 


 

No. 7



โพสกระทู้ ( 108 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 6 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-09-16 23:05:15
รายละเอียดของการตอบ ::
ผมลอง console.log ออกมา ค่าที่ส่งมา ตัวเเปร ต่างๆ ถูกต้อง เเละเป็นปกติครับ เเต่ที่ไม่ปกติคือ ไม่สามารถไปเรียกตัว script ของ carousel ได้ครับ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-09-16 23:12:14 By : worapong39
 


 

No. 8



โพสกระทู้ ( 1,290 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

การดึง script มันทำผ่าน class ซึ่งใน html element ก็ใส่ไปครบแล้ว ตราบใดที่ติดตั้งตามวิธีใช้
https://owlcarousel2.github.io/OwlCarousel2/demos/basic.html

ใช้ Developer Tools ใน browser ดู html ที่ถูก generated จากการ append ทั้งหมด อีกทีครับ
มันได้ตาม No.4 จริงหรือไม่
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-09-16 23:29:50 By : PhrayaDev
 


 

No. 9



โพสกระทู้ ( 108 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 8 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-09-16 23:29:50
รายละเอียดของการตอบ ::
ผมขอเเยกให้เห็นภาพนะครับ โค้ดตั้งต้นในหน้า index จะเป็นในรูปเเบบนี้นะครับ
Code (PHP)
<div class="features-today-box owl-wrapper" >
            <div class="owl-carousel " >
				
            </div>
</div>


1. ส่วนนี้ผมนำข้อมูลไปเเปะใส่ในตัว carousel โดยไม่อ้างอิงจากตัว append ซึ่งตัว carousel ทำงานได้อย่างปกติ จะเเสดงตามนี้ครับ
Code (PHP)
<div class="features-today-box owl-wrapper">
    <div class="owl-carousel owl-theme" data-num="4" style="opacity: 1; display: block;" >
        <div class="owl-wrapper-outer">
            <div class="owl-wrapper" style="width: 1500px; left: 0px; display: block; transition: all 800ms ease 0s; transform: translate3d(-375px, 0px, 0px);">
                <div class="owl-item" style="width: 375px;">
                    <div class="item news-post standard-post">
                        <div class="d-flex flex-row w-100 pb-0">
                            <img src="640_2018082412415290.jpg"> 
                        </div>   
                    </div>
                </div>
                <div class="owl-item" style="width: 375px;">
                    <div class="item news-post standard-post">
                        <div class="d-flex flex-row w-100 pb-0">
                            <img src="640_2018082412415290.jpg"> 
                        </div>   
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


2. ส่วนนี้ผมใช้วิธีอ้างอิงผ่านทางตัว append ครับ ซึ่ง carousel ไม่สามารถทำงานได้ครับ
Code (PHP)
<div class="features-today-box owl-wrapper">
    <div class="owl-carousel " id="div_model" >
        <div class="item news-post standard-post">
            <div class="d-flex flex-row w-100 pb-0"><img src="2018082416424388.jpg"> </div> 
        </div>
        <div class="item news-post standard-post">
            <div class="d-flex flex-row w-100 pb-0"><img src="2018082416424388.jpg" > </div> 
        </div>
    </div>
</div>



แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-09-16 23:52:43 By : worapong39
 


 

No. 10



โพสกระทู้ ( 1,290 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

ย้อนกลับไปอ่าน No.4, 6 จนกว่าจะเข้าใจครับ
ถ้าต้องการแบบเจาะจงกว่านี้ เอาโค้ดที่เกี่ยวข้องทั้งหมดมาลง

owl_carousel
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-09-17 00:26:10 By : PhrayaDev
 


 

No. 11



โพสกระทู้ ( 1,290 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

Code (JavaScript)
<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>

<style>
/* ตกแต่งเลียนแบบ demo theme จาก official website */
.owl-carousel .item {
    height: 10rem;
    background: #4DC7A0;
    padding: 1rem;
}

.owl-carousel .item h4 {
    color: #fff;
    font-weight: 400;
    margin-top: 0rem;
}

.owl-carousel.sec .item {
    height: 10rem;
    padding: 0; /* ปิดพื้นหลังให้สนิท */
}

/*@media only screen and (min-width:40.06em)*/
h4 {
    font-size: 1.43rem;
}


</style>

<script>
// ตัวอย่างข้อมูลนำเข้า
const input = {
  img : [
    "https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/rm21-smoke-bb-5_1.jpg?w=800&dpr=1&fit=default&crop=default&q=65&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=c8347a73d6427dda5d03bd1100c39354",
    "https://img.freepik.com/free-vector/pastel-blue-banner-background_1048-11857.jpg?size=626&ext=jpg",
    "https://i.pinimg.com/originals/af/8d/63/af8d63a477078732b79ff9d9fc60873f.jpg",
    "https://cdn.pixabay.com/photo/2016/11/29/05/45/astronomy-1867616__340.jpg",
    "https://image.freepik.com/free-vector/colorful-watercolor-rainbow-background_125540-151.jpg",
    "https://i.pinimg.com/originals/a5/59/6f/a5596ffd4897b35688d3b3b882d7919d.jpg",
    "https://images.pexels.com/photos/4173624/pexels-photo-4173624.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
    "https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/rm21-background-tong-058.jpg?w=800&dpr=1&fit=default&crop=default&q=65&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=710a6fed5b1923da8d5f95191839ef8a",
    "https://cdn.cjr.org/wp-content/uploads/2019/07/AdobeStock_100000042-e1563305717660-686x371.jpeg",
    "https://www.freevector.com/uploads/vector/preview/30374/Colorful-Plait-Background.jpg",
    "https://images.all-free-download.com/images/graphicthumb/blue_abstract_background_310971.jpg",
    "https://ak.picdn.net/shutterstock/videos/1027713866/thumb/10.jpg?ip=x160"
  ]
}; 
//----------------------------------------------------------------------------

$(document).ready(function(){
  // ฟังก์ชัน render ข้อมูลใน DOM elements
  showSlider = function(data) {
    var txt = "";
    for (img in data) {
      txt += '<img src="' + data[img] + '" class="item">\n';
    }
    $('.owl-carousel.sec').append(txt);
  };
  // ถ้ามีรูปภาพ
  if (input.img.length) {
    showSlider(input.img); // ส่ง array ที่เก็บ(path)รูปภาพไป render
  }
  
  // ***  สำคัญ: ต้องเรียกฟังก์ชัน owlCarousel() หลังจัดเตรียม DOM เสร็จแล้วเท่านั้น  *** //
  $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:false,
    autoplay:true,
    autoplayTimeout: 2000,
    autoplayHoverPause: true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
  })
  // ***  สำคัญ: จากจุดนี้ไป ต้องไม่มีการปรับแต่ง DOM สำหรับ $('.owl-carousel') *** //
});
</script>
</head>
<body>
<!-- ใช้ theme จะมี dot -->
<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>
<br>
<!-- ไม่ใช้ theme ไม่มี dot -->
<div class="owl-carousel sec">
    <!-- $.html()/prepend()/append() -->
</div>

</body>
</html>


https://www.w3schools.com/code/tryit.asp?filename=GIUA5C5MUDNB




แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-09-18 03:01:55 By : PhrayaDev
 


 

No. 12



โพสกระทู้ ( 8,662 )
บทความ ( 2 )



สถานะออฟไลน์


https://stackoverflow.com/questions/55022106/carousel-not-working-after-adding-items-dynamically-with-jquery
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-09-18 07:03:35 By : Chaidhanan
 


 

No. 13



โพสกระทู้ ( 108 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 11 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-09-18 03:01:55
รายละเอียดของการตอบ ::
ตอบความคิดเห็นที่ : 11 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-09-18 03:01:55
รายละเอียดของการตอบ ::
ผมได้ลองนำวิธีนี้มาปรับใช้ดู ถือว่าใช่เลยครับ เเต่มีติดปัญหาอยู่นิดหน่อย คือปกติเเล้วเวลาผมจะส่งค่า จะมีการส่งไปกับตัว byg_replace จากหน้า index ซึ่งเมื่อผมกดให้มันส่งค่ามาครั้งเเรก ตัว carousel ทำได้ตามปกติครับ เเต่เมื่อผมกดส่งค่า เดิมเป็นครั้งที่ 2 ตัว carousel ก็ไม่ทำงานเหมือนเดิม ครับ ซึ่งตัวโปรเเกรมของผมเมื่อมีการกดส่งค่า มันจะขึ้น popup ขึ้นมาเพื่อเเสดงว่าที่ส่งมาครับ โดยจะมีปุ่มสำหรับปิด popup นั้นอยู่

Code (PHP)
<script>
    function byg_replace(data) {
        var md = data;
        var i;
        $(".owl-carousel.sec").html('');
        var txt = "";
        for (i = 0; i < md.mod.length; i++) {
            var mv = md.mod[i];
            var txt = ' <div class="item news-post standard-post"><div class="d-flex flex-row w-100 pb-0"><img src="' + mv.pic + '" > </div></div>';
            $('.owl-carousel.sec').append(txt);
        }
    }
</script>


ส่วนนี้จะเป็นปุ่มสำหรับปิดส่วนที่ popup เเสดงข้อมูล เพื่อให้เเสดงหน้า index

Code (PHP)
<button type="button" class="close" aria-label="Close" onclick="$('#divBuy').toggle();">
	 <span aria-hidden="true">×</span>
</button>



process ทั้งหมดจะทำงานโดยที่ไม่ได้มีการ รีเฟสหน้าจอนะครับ



แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-09-21 18:35:45 By : worapong39
 


 

No. 14



โพสกระทู้ ( 1,290 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

ตอบความคิดเห็นที่ : 13 เขียนโดย : worapong39 เมื่อวันที่ 2020-09-21 18:35:45
รายละเอียดของการตอบ ::
ผมจึงขอดูโค้ดทั้งหมดที่เกี่ยวข้องกับ carousel ทั้งที่มา วิธีการของข้อมูล เพื่อจะได้ลงตรงจุดเลย ถ้าข้อมูลมีความลับจำลองมา เอาเฉพาะโครงสร้างเดียวกัน เหมือนที่ผมทำให้ดูใน no.11 ถ้าให้ดูไม่ได้ลองสั่งอัปเดต DOM(carousel) ของหน้า index จาก popup ตอน(ก่อน) ปิด โดยดูตัวอย่างตาม no.12 ดูครับ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-09-21 20:34:52 By : PhrayaDev
 


 

No. 15



โพสกระทู้ ( 108 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 14 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-09-21 20:34:52
รายละเอียดของการตอบ ::

ตัวโคดที่เกี่ยวข้อง ประมาณนี้ครับ

//ไฟล์หน้า index
Code (PHP)
<div id="divBuy" class="hide fadeInRight ">  
    <div class="sticky-top sticky-buyer p-1" style="background: #ffffff;"> 
        <button type="button" class="close" aria-label="Close" onclick="$('#divBuy').toggle();">
            <span aria-hidden="true">&times;</span>
        </button> 
    </div> 
    <div class=""> 
        <?php
        include("popup.php");
        ?>
    </div> 
</div>


<ul class="nav flex-column">
    <li class=""> 
        <a class="" onclick="byg_replace(m_<?php echo $v['ID']; ?>);$('#divBuy').toggle();"><i class="fas fa-buy"></i><br> Detail</a>
    </li>
</ul>

//ผมได้นำค่า json_encode เก็บไว้ที่ตัวเเปร m_ นะครับ
<script>
    function byg_replace(data) {
        var md = data;
        var i;
        $(".owl-carousel.sec").html('');
        var txt = "";
        for (i = 0; i < md.mod.length; i++) {
            var mv = md.mod[i];
            var txt = ' <div class="item news-post standard-post"><div class="d-flex flex-row w-100 pb-0"><img src="' + mv.pic + '" > </div></div>';
            $('.owl-carousel.sec').append(txt);
        }

        $('.owl-carousel').owlCarousel({
            loop: true,
            margin: 10,
            nav: false,
            autoplay: true,
            autoplayTimeout: 2000,
            autoplayHoverPause: true,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 3
                },
                1000: {
                    items: 5
                }
            }
        });
    }
</script>

ไฟล์หน้า popup

<div class="owl-carousel sec">

</div>


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-09-22 10:37:57 By : worapong39
 


 

No. 16



โพสกระทู้ ( 1,290 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

ในตัวอย่างผมใส่คลาส sec เพื่ออ้างอิง carousel อันที่สอง...ถ้ามีอันเดียวลบทิ้งเลยครับ

Code (html)
<div class="owl-carousel">
</div>


จากนั้น ลองเคลียร์ / reset class ด้วย จะได้ผลอย่างไร

Code (JavaScript)
// ใน function byg_replace
//...
$(".owl-carousel").html('');
$(".owl-carousel").attr("class", "owl-carousel");
//...ที่เหลือเหมือนเดิม

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-09-22 13:48:23 By : PhrayaDev
 


 

No. 17



โพสกระทู้ ( 108 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 16 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-09-22 13:48:23
รายละเอียดของการตอบ ::
ยังคงเป็นเหมือนเดิมครับ คือเมื่อกดมาครั้งเเรก ตัว carousel ทำงานปกติ เเต่พอกดปิด popup เพื่อกลับไปกดส่งค่ามาใหม่ carousel ก็ไม่ทำงาน

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-09-22 14:15:03 By : worapong39
 


 

No. 18



โพสกระทู้ ( 1,290 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

ถ้า reflesh plugin ล่ะ

Code (JavaScript)
function byg_replace(data) {
  //...
}

$(".owl-carousel").trigger('refresh.owl.carousel');

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-09-22 14:24:21 By : PhrayaDev
 


 

No. 19



โพสกระทู้ ( 108 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 18 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-09-22 14:24:21
รายละเอียดของการตอบ ::
ไม่ได้เหมือนกันครับ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-09-22 14:28:39 By : worapong39
 


 

No. 20



โพสกระทู้ ( 1,290 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

ลองจับ DOM ของ Carousel ทั้งตอนส่งรอบแรกและรอบสองมาดูเปรียบเทียบกันหน่อยครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-09-22 14:37:32 By : PhrayaDev
 


 

No. 21



โพสกระทู้ ( 108 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 20 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-09-22 14:37:32
รายละเอียดของการตอบ ::
ผมไม่เเน่ใจว่าควรจับ อย่างไร

กดรอบเเรกครับ
a

กดรอบที่สอง
s


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-09-22 14:51:03 By : worapong39
 


   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : สอบถามเกี่ยวกับการนำค่าข้อมูลที่ append ไปใส่ในตัว carousel หน่อยครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: Voake, Comcube, รับทำเว็บไซต์ รับเขียนโปรแกรม , รับทำบัญชี , โรงงานผลิตครีม , สำนักงานบัญชี , รับจดทะเบียนบริษัท , Pangpond , รถมือสอง

Load balance : Server 03
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2020 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่