when im not clicked

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)">❮</button>
    <button class="button display-left  animate-opacity"  onclick="plusDivs(1)">❯</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.

Read more here: How to display posts with images in fullscreen slider


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: