загрузка Dynami c JS / jquery со страницы WordPress API в angular 8 - PullRequest
Новая
       17

загрузка Dynami c JS / jquery со страницы WordPress API в angular 8

0 голосов
/ 22 апреля 2020

Я использую wordpress для создания страниц и wordpress page api для получения контента в angular. Страница содержит js и jquery для слайдера, который не работает в angular. Я использую shadowDom в моем компоненте.

Подскажите, пожалуйста, как я могу использовать виджет Wordpress с js и jquery в angular Ниже приведен код jquery в содержимом страницы. 

    jQuery(document).ready(function () {
     jQuery('#slider_244').owlCarousel({
      responsive: {
        0: { items: 1 },
        480: { items: 2 },
        768: { items: 2 },
        980: { items: 3 },
        1200: { items: 3 },
        1500: { items: 3 }
      },
      autoplay: true,
      autoplayTimeout: 5000,
      autoplayHoverPause: true,
      smartSpeed: 200,
      fluidSpeed: 200,
      autoplaySpeed: 200,
      navSpeed: 200,
      dotsSpeed: 200,
      loop: true,
      nav: true,
      navText: ['', ''],
      dots: true,
      responsiveRefreshRate: 200,
      slideBy: 1,
      mergeFit: true,
      autoHeight: false,
      mouseDrag: false,
      touchDrag: true
    });
    jQuery('#slider_244').css('visibility', 'visible');
    sa_resize_slider_244();
    window.addEventListener('resize', sa_resize_slider_244);
    function sa_resize_slider_244() {
      var min_height = '50';
      var win_width = jQuery(window).width();
      var slider_width = jQuery('#slider_244').width();
      if (win_width < 480) {
        var slide_width = slider_width / 1;
      } else if (win_width < 768) {
        var slide_width = slider_width / 2;
      } else if (win_width < 980) {
        var slide_width = slider_width / 2;
      } else if (win_width < 1200) {
        var slide_width = slider_width / 3;
      } else if (win_width < 1500) {
        var slide_width = slider_width / 3;
      } else {
        var slide_width = slider_width / 3;
      }
      slide_width = Math.round(slide_width);
      var slide_height = '0';
      if (min_height == 'aspect43') {
        slide_height = (slide_width / 4) * 3; slide_height = Math.round(slide_height);
      } else if (min_height == 'aspect169') {
        slide_height = (slide_width / 16) * 9; slide_height = Math.round(slide_height);
      } else {
        slide_height = (slide_width / 100) * min_height; slide_height = Math.round(slide_height);
      }
      jQuery('#slider_244 .owl-item .sa_hover_container').css('min-height', slide_height + 'px');
    }
  });
...