How to add thumbnails from recent posts to owl-carousel in wordpress automatically?

Question

This is the site that I am working with. I need to make the green images into recent post thumbnails, to be able to have a content writer/author (non developer) designate a thumbnail to display in the carousel of recent posts. I am doing this in wordpress through a theme I am designing. I have the carousel implemented as one can see but I don't know how to make the green images show recent posts' thumbnails'.

Here is the code

    <div class="jumbotron" >
        <div class="container-fluid">
            <div class="row" id="spacer"></div>
            <div class="row" id="btn-row">
                <div class="col-md-3"></div>
                <div class="col-md-6" class="splash-btn-col">
                    <a href="http://52.35.5.149/content/content/" class="splash-btn">Content</a>
                    <a href="http://www.fractured-gaming.com/forums/" class="splash-btn">Forums</a>
                </div>
                <div class="col-md-3"></div>
            </div>
            <div class="row">
                <div id="owl-demo" class="owl-carousel owl-theme">
                     <div class="item"><h1>1</h1></div>
                     <div class="item"><h1>2</h1></div>
                     <div class="item"><h1>3</h1></div>
                     <div class="item"><h1>4</h1></div>
                     <div class="item"><h1>5</h1></div>
                     <div class="item"><h1>6</h1></div>
                     <div class="item"><h1>7</h1></div>
                     <div class="item"><h1>8</h1></div>
                     <div class="item"><h1>9</h1></div>
                     <div class="item"><h1>10</h1></div>
                     <div class="item"><h1>11</h1></div>
                     <div class="item"><h1>12</h1></div>
                     <div class="item"><h1>13</h1></div>
                     <div class="item"><h1>14</h1></div>
                     <div class="item"><h1>15</h1></div>
                     <div class="item"><h1>16</h1></div>
                </div>

                <script>
                    $(document).ready(function() {

                  var owl = $("#owl-demo");

                  owl.owlCarousel({
                      items : 10, //10 items above 1000px browser width
                      itemsDesktop : [1000,5], //5 items between 1000px and 901px
                      itemsDesktopSmall : [900,3], // betweem 900px and 601px
                      itemsTablet: [600,2], //2 items between 600 and 0
                      itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
                  });

                  // Custom Navigation Events
                  $(".next").click(function(){
                    owl.trigger('owl.next');
                  })
                  $(".prev").click(function(){
                    owl.trigger('owl.prev');
                  })
                  $(".play").click(function(){
                    owl.trigger('owl.play',1000); //owl.play event accept autoPlay speed as second parameter
                  })
                  $(".stop").click(function(){
                    owl.trigger('owl.stop');
                  })

                });
                </script>
            </div>
        </div>  
    </div>

So I tried this below and it made the screen white and when i inspect with google chrome the body is empty for some reason.

    <div class="jumbotron" >
        <div class="container-fluid">
            <div class="row" id="spacer"></div>
            <div class="row" id="btn-row-fluid">
                <div class="col-xs-3"></div>
                <div class="col-xs-6" class="splash-btn-col">
                    <div class="col-xs-5">
                        <a href="http://52.35.5.149/content/content/" class="splash-btn" id="content-btn">Content</a>
                    </div>
                    <div class="col-xs-2"></div>
                    <div class="col-xs-5">
                        <a href="http://www.fractured-gaming.com/forums/" class="splash-btn">Forums</a>
                    </div>
                </div>
                <div class="col-xs-3"></div>
            </div>
            <div class="row">
                <div id="owl-demo" class="owl-carousel owl-theme">
                 <?php 
                    $args = array(
                        'post_type' => 'post', //this tells WP what type of posts you want to get (post, page, etc..)
                        'posts_per_page' => 1, // this is the number of posts you want to get
                        'order' => 'DESC' // this is the order you want it to use
                        'orderby' => date // you want to order by date if you want the latest ones
                    );

                    // Custom query.
                    $query = new WP_Query( $args );  // creating the query

                    // Check that we have query results.
                    if ( $query->have_posts() ) { 
                        // Start looping over the query results.
                        while ( $query->have_posts() ) {

                            //get the post
                            $query->the_post();
                            $id=get_the_ID(); //getting post id (not neccessary here)
                            $url=wp_get_attachment_image_src( get_post_thumbnail_id( $id ), 'full' ); //getting the url of the post image
                            ?>     

                    <div class="item">
                        <a href="<?php the_permalink();?>"><img src="<?php echo $url;?>"></a>
                    </div>

                            <?php         
                        } 
                    } 
                    // Restore original post data.
                    wp_reset_postdata(); 
                    ?>
                </div> 

                <script>
                    $(document).ready(function() {

                  var owl = $("#owl-demo");

                  owl.owlCarousel({
                      items : 6, //10 items above 1000px browser width
                      itemsDesktop : [1000,5], //5 items between 1000px and 901px
                      itemsDesktopSmall : [900,3], // betweem 900px and 601px
                      itemsTablet: [600,2], //2 items between 600 and 0
                      itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
                  });

                  // Custom Navigation Events
                  $(".next").click(function(){
                    owl.trigger('owl.next');
                  })
                  $(".prev").click(function(){
                    owl.trigger('owl.prev');
                  })
                  $(".play").click(function(){
                    owl.trigger('owl.play',1000); //owl.play event accept autoPlay speed as second parameter
                  })
                  $(".stop").click(function(){
                    owl.trigger('owl.stop');
                  })

                });
                </script>
            </div>
        </div>  
    </div>

:

Answer 1

I can't see your site. However, based on the code you added, you could try something like this: css:

.owl-controls .owl-pagination .owl-page span{
height: 50px;
width:50px;
background-size: cover;
background-position: center;}

JS:

$('.owl-controls .owl-pagination .owl-page').each(function(index, value){
    $(this).children('span').css('background-image', "url('"+$('.owl-carousel .owl-wrapper .item').eq(index).find('img').attr('src')+"')");
});

Here is a working example: http://codepen.io/BertoMejia/pen/LRLRBg