slider doesn’t work using WP REST API

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter maemaemae3

    (@maemaemae3)

    5 years, 3 months ago

    P.S.
    I implemented this by making custom theme.

    I checked CSS, and it looks like working well.
    But I found some difference in HTML.

    (HTML of that doesn’t work)

    <div id="metaslider-id-9" style="width: 100%;" class="ml-slider-3-20-3 metaslider metaslider-flex metaslider-9 ml-slider ml-slider-lightbox-1-11-3 lightbox-disabled ms-theme-bubble has-dots-nav">
  <div id="metaslider_container_9">
      <div id="metaslider_9">
          <ul aria-live="polite" class="slides">
              <li style="display: block; width: 100%;" class="slide-13 ms-image"><img src="http://www.tempesandbox.shop/wp/wp-content/uploads/2021/03/photo-1614876753060-0751185c9289-700x300.jpeg" height="300" width="700" alt="" class="slider-9 slide-13" title="photo-1614876753060-0751185c9289"></li>
              <li style="display: none; width: 100%;" class="slide-14 ms-image"><img src="http://www.tempesandbox.shop/wp/wp-content/uploads/2021/03/photo-1614703524015-037a6d681848-700x300.jpeg" height="300" width="700" alt="" class="slider-9 slide-14" title="photo-1614703524015-037a6d681848"></li>
              <li style="display: none; width: 100%;" class="slide-15 ms-image"><img src="http://www.tempesandbox.shop/wp/wp-content/uploads/2021/03/photo-1615559130605-bb46b0af4dc7-700x300.jpeg" height="300" width="700" alt="" class="slider-9 slide-15" title="photo-1615559130605-bb46b0af4dc7"></li>
          </ul>
      </div>
  </div>
</div>

    (HTML of that works correctly)

    <div id="metaslider-id-9" style="width: 100%;" class="ml-slider-3-20-3 metaslider metaslider-flex metaslider-9 ml-slider ml-slider-lightbox-1-11-3 lightbox-disabled ms-theme-bubble has-dots-nav">
  <div id="metaslider_container_9">
      <div id="metaslider_9" class="flexslider">
          <ul aria-live="polite" class="slides">
              <li style="display: block; width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; z-index: 2;" class="slide-13 ms-image flex-active-slide" data-thumb-alt=""><img src="http://www.tempesandbox.shop/wp/wp-content/uploads/2021/03/photo-1614876753060-0751185c9289-700x300.jpeg" height="300" width="700" alt="" class="slider-9 slide-13" title="photo-1614876753060-0751185c9289" draggable="false"></li>
              <li style="display: block; width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; z-index: 1;" class="slide-14 ms-image" aria-hidden="true" data-thumb-alt=""><img src="http://www.tempesandbox.shop/wp/wp-content/uploads/2021/03/photo-1614703524015-037a6d681848-700x300.jpeg" height="300" width="700" alt="" class="slider-9 slide-14" title="photo-1614703524015-037a6d681848" draggable="false"></li>
              <li style="display: block; width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; z-index: 1;" class="slide-15 ms-image" aria-hidden="true" data-thumb-alt=""><img src="http://www.tempesandbox.shop/wp/wp-content/uploads/2021/03/photo-1615559130605-bb46b0af4dc7-700x300.jpeg" height="300" width="700" alt="" class="slider-9 slide-15" title="photo-1615559130605-bb46b0af4dc7" draggable="false"></li>
          </ul>
      <ol class="flex-control-nav flex-control-paging"><li><a href="#" class="flex-active">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ol><ul class="flex-direction-nav"><li class="flex-nav-prev"><a class="flex-prev" href="#">前へ</a></li><li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li></ul></div>
  </div>
</div>

    I replaced the not working block to working HTML block, but it doesn’t help.
    So, I think some Javascript code is not working, but I can’t find the way to fetch those codes by WP REST API.

    • This reply was modified 5 years, 3 months ago by maemaemae3.
    mohammedeisa

    (@mohammedeisa)

    5 years, 3 months ago

    Hi,

    I checked this page http://www.tempesandbox.shop/wp/ and found that MetaSlider JS and CSS files haven’t been loaded.

    I’m not sure if this is the only issue and I don’t know how to force loading them.

    I’m going to consult the plugin developer.

    Thread Starter maemaemae3

    (@maemaemae3)

    5 years, 3 months ago

    Hi,
    thank you for the reply.

    I found a near question to this, and He solved it by copy-pasting JS and CSS to external site
    (in my case, it need in theme I think)
    https://stackoverflow.com/questions/49296555/enabling-jetpack-slideshow-plugin-on-a-website

    I copy pasted script tag and css from the working site, but it doesn’t work.

    Kevin Batdorf

    (@kbat82)

    5 years, 3 months ago

    You need the contents of wp_footer() which you can’t get through the REST Api. You’ll have to write a custom endpoint to get that, OR you will have to load and initialize the JS scripts yourself.

    Should be pretty easy to load in FlexSlider and initialize it.

    If you are interested in loading it via an iFrame as I did in the Preview window, you can check out the code in ml-slider/admin/slideshows/Slideshows.php snd the method preview. I think you might even be able to just call that method directly in a custom REST endpoint (which you can see in ml-slider/admin/routes/api.php on the method get_preview)

    Thread Starter maemaemae3

    (@maemaemae3)

    5 years, 3 months ago

    thank you for your reply.
    Just loading FlexSlider script into the page doesn’t solve the problem, and I’m taking a look deeper.

    Just copy pasting scripts doesn’t work because HTML comes AFTER page load (from REST API), so the script didn’t work.
    Anyway, loading script after HTML content loaded (for example, using window.onload) make it work.
    Loading scripts from custom endpoint can be done, but it means every time if I add plugins and faced similar problem, I have to add new custom endpoint.
    Looks too hard to maintain.

    I’ll give up doing it for now, hope that useful structure added to solve this problem more easily.
    I really appreciate your help, thank you!

    • This reply was modified 5 years, 3 months ago by maemaemae3.
    mohammedeisa

    (@mohammedeisa)

    5 years, 2 months ago

    Hi,

    Thanks for your kind communication and for the information you shared.

    Please don’t hesitate to post a new ticket in case you needed any help.

    Thanks.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘slider doesn’t work using WP REST API’ is closed to new replies.