How to display posts with images in fullscreen slider

Question

Im beginner in wordpress.I need to realize posts image as background image slider with links on that post.I have slider like this one.look at first slideshow. But i cant take all images from all posts i only take image from 1st post and gave him as background please help. This is header.php

<div class="slideshow">
    <div class="banner-image">
        <a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail('banner-image'); ?></a> <!--фотка -->
    </div>
    <div class="banner-image">
        <a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail('banner-image'); ?></a> <!--фотка -->
    </div>  
    <div class="banner-image">
        <a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail('banner-image'); ?></a> <!--фотка -->
    </div>    
    <button class="button display-right animate-opacity" onclick="plusDivs(-1)">&#10094;</button>
    <button class="button display-left  animate-opacity"  onclick="plusDivs(1)">&#10095;</button>
            </div>
<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("banner-image");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.opacity = "0"  
  }
  x[slideIndex-1].style.opacity = "1";  
}   
</script>

This one is functions.php

<?php

function learningCode(){
    wp_enqueue_style('style?v=30', get_stylesheet_uri());
    wp_enqueue_style('fonts', get_template_directory_uri() . '/css/fonts/fonts.css' , array(), '1.0.0');
    wp_enqueue_script('customjs', get_template_directory_uri() . '/js/common.js' , array(), '1.0.2');
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'learningCode');

function theme_setup(){
// navigation menu
register_nav_menus(array(
    'primary' => __( 'Primary Menu'),
    'footer' => __( 'Footer Menu'),
));

// adding images
add_theme_support('post-thumbnails');
add_image_size('small-thumbnail', 180, 120, true);
add_image_size('banner-image');
}

add_action('after_setup_theme', 'theme_setup');

As u can see theres 2 buttons right and left wherever i clicked i see 1 pick in different places.default this image in up then middle and in the last 3rd click its down.

Answer 1

You can use this code bellow with Query:

   <div class="w3-content w3-display-container">
<?php
  $slider = new WP_Query(array(
      'post_type' => 'post',
      'posts_per_page' => 5,
      'post_status' => 'publish',        


  ));

  if($slider->have_posts()) :
  while($slider->have_posts()) : $slider->the_post();
?>

<div class="w3-display-container mySlides">
<a href="">
  <?php the_post_thumbnail('large'); ?>
  <div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
    Trolltunga, Norway
  </div>
  </a>
</div>

  <?php 

  endwhile;
  endif;

  ?>


<button class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">&#10094;</button>
<button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">&#10095;</button>

</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
</script>