สอบถามเกี่ยวกับการเขียน 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 23-09-2020 23:23:33

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

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

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

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

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

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 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 24-09-2020

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน