我无法将我的滑块集成到 wordpress 中

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)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</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)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</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');