单击更改图像urls时，Owl Carousel不会更新

Question

我有一个带有图像和产品描述的产品页面，所有这些都是从json文件动态加载的。除了单击prev/next箭头时的owl carousel之外，一切都运行得很好。主图像和数据按其应有的方式更新，但carousel不会。

我记录了新的图像urls，它们正在被正确更新。

我试着在代码中的任何地方使用它

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

这是页面的javascript

// ========== Compile Product Data =======================================
$.getJSON("../../json/guitars.json", function(data) {
  var jsonLength = data.length

  // -------  Parse & Returns URL Parameters -----------------------------
  function getUrlVars(guitar) {
    var vars = {}
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
      vars[key] = value;
    })
    return vars
  }

  // ------------ Append Clicked Image -------------------------------------
  var guitar = parseInt(getUrlVars()["product"], 10)

  loadGuitar(guitar)

  function loadGuitar(guitar) {
    // Images
    var image1 = data[guitar].img1
    var image2 = data[guitar].img2
    var image3 = data[guitar].img3
    var image4 = data[guitar].img4
    var alt = data[guitar].alt

    // description
    var title = data[guitar].title
    var brand = data[guitar].brand
    var code = data[guitar].code
    var price = data[guitar].price
    var description = data[guitar].description
    var specs = data[guitar].specs

    $('#clickImg').attr({src: `../${image1}`, alt: `${alt}`})
    $('#img1').attr({src: `../${image1}`, alt: `${alt}`})
    $('#img2').attr({src: `../${image2}`, alt: `${alt}`})
    $('#img3').attr({src: `../${image3}`, alt: `${alt}`})
    $('#img4').attr({src: `../${image4}`, alt: `${alt}`})

    $('#title').html(title)
    $('#brand').html(brand)
    $('#variant-sku').html(code)
    $('#price').html(price)
    $('#description').html(description)

    $('#specs').empty();

    specs.forEach(spec => {
      $("#specs"). append(`<li>${spec}</li>`)
    })
  }

  // -------------- Owl Carousel -------------------------------------------
  $(document).ready(function () {
    $('#owl-focus').owlCarousel({
      loop: true,
      margin: 10,
      nav: true,
      navText: [$('.owl-navigation .owl-nav-prev'), $('.owl-navigation .owl-nav-next')],
      responsiveClass: true,
      responsive: {
        0: {
            items: 3,
        },
        1050: {
            items: 4,
        }
      }
    })
  })

  // -------- Next / Previous Arrows -------------------------------------
  $("#prev-btn").click(function() {
    if (guitar === 0) {
      guitar = jsonLength - 1
    } else {
      guitar = guitar - 1
    }
    loadGuitar(guitar)
    onPageChg()
  })

  $("#next-btn").click(function() {
    if (guitar === jsonLength - 1) {
      guitar = 0
    } else {
      guitar = guitar + 1
    }
    loadGuitar(guitar)
    onPageChg()
  })

})
// ========== Compile Product Data End ===================================

Answer 1

我想通了。我没有尝试重新加载owl，而是使用新数据重新加载了页面。类似的功能，首先将我带到产品页面，但进行了一些调整。

$("#prev-btn").on("click", function(e) {
    $.getJSON("../../json/guitars.json", function(json) {
      if (guitar === 0) {
        new_id = jsonLength - 1
      } else {
        new_id = guitar - 1
      }
      window.location.href = "product.html?product=" + new_id
    })
  })

  $("#next-btn").on("click", function(e) {
    $.getJSON("../../json/guitars.json", function(json) {
      if (guitar === jsonLength - 1) {
        new_id = 0
      } else {
        new_id = guitar + 1
      }
      window.location.href = "product.html?product=" + new_id
    })
  })

在我只是更改照片、描述等的属性之前