I am unable to integrate my slider inside wordpress - php

Question

I have built a slider using html and css. I want to integrate it into wordpress. My slider works fine. I have added the css and JS code in custom css and JS snippet plugin. While I am placing below php code inside my theme's function.php file. Now the first image gets displayed but others are not. Also slider is kind of messed up.
I hardcoded the html in functions.php file and the slider works fine. Can someone please check my php code below to see what am i doing wrong? (css and JS are working fine. im unable to integrate html in wordpress properly).
Also Im displaying the slider on page by putting below code inside a shortcode which is working.
I am using Custom Post Type UI plugin to get images. I have created 2 posts with featured images. Now im trying to get those two featured images into my slider.
<?php //functions.php file
function mySlider(){
$args = array(
'post_type' => array('mx-slides'),
'post_status' => array('publish'),
'posts_per_page' => array('-1'),
'order' => array('DESC'),
);
$query = new WP_Query( $args );
if($query-> have_posts()){
?>
<!-- Container for the image gallery -->
<div class="container">
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<?php while ( $query->have_posts() ) {
$query->the_post();
$img = the_post_thumbnail();
?>
<?php For($i=0;$i<=2;$i++) {
?>
<img src="<?php $img; ?>" style="width:100%;">
<?php } ?>
<?php } ?>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Image text -->
<div class="caption-container">
<p id="caption"></p>
</div>
<!-- Thumbnail images -->
<div class="row">
<?php while ( $query->have_posts() ) {
$query->the_post();
$img = the_post_thumbnail();
?>
<?php // foreach ($img as $imgx)
For($i=0;$i<=5;$i++)
{
?>
<div class="column">
<img class="demo cursor" src="<?php echo $img; ?>" style="width:100%" onclick="currentSlide(1)" alt="No Image">
</div>
<?php } ?>
<?php } ?>
</div>
</div>
<?php
}
wp_reset_postdata();
}
add_shortcode('mx-slider', 'mySlider');
?>
?>

Answer 1

Please check with my fixed $arg. the format of posts_per_page is integer.
<?php //functions.php file
function mySlider() {
$args = array(
'post_type' => 'mx-slides',
'post_status' => 'publish',
'posts_per_page' => -1,
'order' => 'DESC',
);
$query = new WP_Query($args);
if ($query->have_posts()) {
?>
<!-- Container for the image gallery -->
<div class="container">
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<?php while ($query->have_posts()) {
$query->the_post();
$img = get_the_post_thumbnail_url();
?>
<?php for ($i = 0; $i <= 2; $i++) {
?>
<img src="<?php echo $img; ?>" style="width:100%;">
<?php } ?>
<?php } ?>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Image text -->
<div class="caption-container">
<p id="caption"></p>
</div>
<!-- Thumbnail images -->
<div class="row">
<?php while ($query->have_posts()) {
$query->the_post();
$img = get_the_post_thumbnail_url();
?>
<?php // foreach ($img as $imgx)
for ($i = 0; $i <= 5; $i++) {
?>
<div class="column">
<img class="demo cursor" src="<?php echo $img; ?>" style="width:100%" onclick="currentSlide(1)" alt="No Image">
</div>
<?php } ?>
<?php } ?>
</div>
</div>
<?php
}
wp_reset_postdata();
}
add_shortcode('mx-slider', 'mySlider');