สอบถามเกี่ยวกับการเขียน jquery craousel replace data .html หน่อยครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามเกี่ยวกับการเขียน jquery craousel replace data .html หน่อยครับ

สอบถามเกี่ยวกับการเขียน jquery craousel replace data .html หน่อยครับ
รบกวนขอตัวอย่างเกี่ยวกับการเขียน jquery กับตัว carousel เพื่อให้มีการ replace ค่าใส่ในตัว html หน่อย ครับ จากกระทู้ที่เเล้ว ผมได้มีการปรับเเก้ตามทีต้องการเรียบร้อยเเล้ว เเต่อยากจะเพิ่มลูกเล่นให้กับตัว carousel ก็คือ  เมื่อมีการเลื่อน slide ไป ก็ให้นำข้อมูลรายละเอียดของตัว ที่ active อยู่นั้น ไป replace ใส่ใน div ที่ได้มีการกำหนด ชื่อ id เอาไว้ ตรงนี้พอจะมีตัวอย่างให้ศึกษาบ้างหือเปล่าครับ

<script>
    function byg_replace(data) {
        var md = data;
        var i;
        $(".owl-carousel").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>';

            $("#div_price").html(md.price);
            $('.owl-carousel').append(txt);
        }
/// ข้อมูลที่อยู่ใน var txt จะมีมากกว่านี้นะครับ
        
        $('.owl-carousel').owlCarousel({
            loop: true,
            margin: 10,
            nav: false,
            autoplay: true,
            autoplayTimeout: 2000,
            autoplayHoverPause: true,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 1
                },
                1000: {
                    items: 5
                }
            }
        });
    }
</script>

<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();refresh();">
            <span aria-hidden="true">&times;</span>
        </button> 
    </div> 
    <div class="" > 
        <?php
        include("card_test-j.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>

<div class="owl-carousel">

</div>

<div id="div_price">

</div>


Antinew007 49.49.237.xxx 23-09-2020 23:23:33

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
ลองดูตัวอย่างนี้เป็นแนวทาง


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>owl-carousel</title>
  <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" />
</head>
<body>

  <button type="button" onclick="a(10)">10</button>
  <button type="button" onclick="a(20)">20</button>
  <div class="wrap-owl">
    <div class="owl-carousel owl-theme">

    </div>      
  </div>
  <div class="feature">
    
  </div>
  <script src="https://code.jquery.com/jquery-3.0.0.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>
  <script>
  $(function(){
    
  });
    function a(n){
      var c = '';
      for(i=0;i<=n;i++){
        c+='<div class="item"><h4> Title '+i+'</h4></div>';
      }
      $(".wrap-owl").html('');
      var owl = $( "<div></div>", {
        "class": "owl-carousel owl-theme",
      }).appendTo( "div.wrap-owl" );      
      owl.html(c);
      owl.owlCarousel({
            center: true,
            items: 3,
            autoplay: true,
            onInitialized:feature
      });
      owl.on('changed.owl.carousel',feature);   
      function feature(e){
        var item = e.item.index;
        var itemEle = $(".owl-carousel .item").eq(item).html();
        $('.feature').html(itemEle); 
      }
    }
  </script>
</body>
</html>

ตัวอย่าง DEMO

Ninenik 124.122.198.xxx 24-09-2020






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ