Установить по клику активную картинку owl карусель

есть список radio button по клику получаю ссылку на картинку

$(document).ready(function () {  
 $('.color-label').click(function () {
        let href = $(this).attr('data-color');
    });
});

Как можно подставить полученную картинку в

   let outs = document.querySelectorAll('.owl-out');

    for (let out of outs) {

        let owl = out.querySelector('.owl-carousel');
        let btns = out.querySelectorAll(':scope .thumb');
        let owlJq = $(owl);
        owlJq.owlCarousel({
            items: 2,
            loop: false,
            margin: 10,
            dots:true,
            nav: true,
            navText: [
                '<span class="arrow-owl arrow-left"></span>', '<span class="arrow-owl arrow-right"></span>'
            ],
            dots: false
        });

        for (let btn of btns) {
            btn.addEventListener('click', function () {
                owlJq.trigger('to.owl.carousel', [$(this).index()]);
                $(".thumbs .image").removeClass('active');
                $(this).addClass('active');
            })
        }
    };

 <div class="owl-carousel owl-theme owl-product">
<div class="product-layout">
 <div class="product-thumb option_image{{ option_image.product_option_value_id }}">
   <div class="image">
     <a href="{{ option_image.image_option_popup }}" class="thumbnail headpopup" title="{{ heading_title }}">
      <img src="{{ option_image.image_option_popup  }}" width="464" height="358" alt="{{ heading_title }}" title="{{ heading_title }}">
       </a>
     </div>
  </div>
</div>

Что бы полученная картинка была показалась в слайдере ?