Как добавить миниатюры из последних сообщений в сова-карусель в WordPress автоматически?

Это сайт, с которым я работаю . Мне нужно сделать зеленые изображения в недавних миниатюрах сообщений, чтобы иметь автора / автора (не разработчика) для создания эскиза, отображаемого в карусели недавних сообщений. Я делаю это в WordPress через тему, которую я разрабатываю. У меня есть карусель, который можно увидеть, но я не знаю, как заставить зеленые изображения показывать миниатюры недавних сообщений.

Вот код

<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> 

Поэтому я попробовал это ниже, и он сделал экран белым, и когда я проверяю с помощью Google Chrome, по какой-то причине тело пусто.

  <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> 

:

Solutions Collecting From Web of "Как добавить миниатюры из последних сообщений в сова-карусель в WordPress автоматически?"

Я не вижу ваш сайт. Однако, основываясь на добавленном вами коде, вы можете попробовать что-то вроде этого: 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')+"')"); }); 

Вот рабочий пример: http://codepen.io/BertoMejia/pen/LRLRBg