Title: slider doesn’t work using WP REST API
Last modified: March 15, 2021

---

# slider doesn’t work using WP REST API

 *  Resolved [maemaemae3](https://wordpress.org/support/users/maemaemae3/)
 * (@maemaemae3)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/slider-doesnt-work-using-wp-rest-api/)
 * Hi, I’m making blog site using [WP REST API](https://developer.wordpress.org/rest-api/).
   
   When I put shortcode generated by metaslider, just single image appears and slider
   doesn’t work.
 * I’m getting post contents by accessing to
    [http://www.tempesandbox.shop/wp/wp-json/wp/v2/posts?slug=this-is-test-page](http://www.tempesandbox.shop/wp/wp-json/wp/v2/posts?slug=this-is-test-page)
   and rendering `response.content.rendered`.
 * Is there any solution of that?
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fslider-doesnt-work-using-wp-rest-api%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Thread Starter [maemaemae3](https://wordpress.org/support/users/maemaemae3/)
 * (@maemaemae3)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/slider-doesnt-work-using-wp-rest-api/#post-14181589)
 * 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](https://wordpress.org/support/users/maemaemae3/).
 *  [mohammedeisa](https://wordpress.org/support/users/mohammedeisa/)
 * (@mohammedeisa)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/slider-doesnt-work-using-wp-rest-api/#post-14187283)
 * Hi,
 * I checked this page [http://www.tempesandbox.shop/wp/](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](https://wordpress.org/support/users/maemaemae3/)
 * (@maemaemae3)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/slider-doesnt-work-using-wp-rest-api/#post-14187306)
 * 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](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](https://wordpress.org/support/users/kbat82/)
 * (@kbat82)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/slider-doesnt-work-using-wp-rest-api/#post-14187313)
 * 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](https://wordpress.org/support/users/maemaemae3/)
 * (@maemaemae3)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/slider-doesnt-work-using-wp-rest-api/#post-14193894)
 * 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](https://wordpress.org/support/users/maemaemae3/).
 *  [mohammedeisa](https://wordpress.org/support/users/mohammedeisa/)
 * (@mohammedeisa)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/slider-doesnt-work-using-wp-rest-api/#post-14294362)
 * 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.

 * ![](https://ps.w.org/ml-slider/assets/icon.svg?rev=3568997)
 * [Slider, Gallery, and Carousel by MetaSlider - Image Slider, Video Slider](https://wordpress.org/plugins/ml-slider/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/ml-slider/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/ml-slider/)
 * [Active Topics](https://wordpress.org/support/plugin/ml-slider/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/ml-slider/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/ml-slider/reviews/)

 * 6 replies
 * 3 participants
 * Last reply from: [mohammedeisa](https://wordpress.org/support/users/mohammedeisa/)
 * Last activity: [5 years, 2 months ago](https://wordpress.org/support/topic/slider-doesnt-work-using-wp-rest-api/#post-14294362)
 * Status: resolved