ZabdiBen/slider.php

## slider.php
<!DOCTYPE html>
 <head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
 </head>
 <body>

  <style>
      .swiper-container {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        /*background: #fff;*/

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }
      .outside{
        width:300px;
        height:450px;
        overflow: hidden;
        border-radius: 28px;
      }
        .inside {
         width: 100%;
         height: 100%;
         z-index:3;
         font-size:32px;
         font-weight:800;
         color:white;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgb(0 0 0 / 40%);
        }
        .div-iframe{
            z-index:1;
        }
        .div-iframe iframe{
            height:800px;
            left: 0px;
            top: -140px;
            width: 100%;
            border:none;
        }
      .position-absolute{
          position: absolute;
      }
      .position-relative{
          position:relative;
      }
      @media (min-width:680px){
          .outside{
            width:400px;
            height:600px;
          }
          .div-iframe iframe{
              top:-100px;
            height:800px;
          }
      }
     </style>

  <?php
  $args = array(
      'post_type' => 'projects',  // Specify the custom post type name
      'posts_per_page' => -1,     // Number of posts to retrieve (-1 retrieves all)
      'post_status' => 'publish', // Consider only published posts
      // Add any additional parameters as needed, such as 'orderby', 'order', 'meta_query', etc.
  );

  $projects_query = new WP_Query($args);

  if ($projects_query->have_posts()) :
  ?>
      <div class="swiper mySwiper">
          <div class="swiper-wrapper">
              <?php
              while ($projects_query->have_posts()) :
                  $projects_query->the_post();
                  $photo = get_post_meta(get_the_ID(), 'pic1', true);
                  $video = jet_engine()->listings->data->get_meta('video');
              ?>
                  <div class="swiper-slide">
                      <a href="<?php the_permalink() ?>">
                          <div class="position-relative outside">
                              <?php if ($video) : ?>
                                  <div class="position-absolute inside">
                                      <?php the_title(); ?>
                                  </div>
                                  <div class="position-relative div-iframe">
                                      <img class="img_place" src="<?= $photo ?>" alt="Principal image">
                                      <div id="iframeContainer">
                                          <iframe class="position-absolute player " src="https://player.vimeo.com/video/<?= $video ?>?muted=1&autoplay=1&loop=1&transparent=0&background=1" ></iframe>
                                      </div>
                                     <!--<div class="swiper-lazy-preloader"></div>-->
                                  </div>
                              <?php else : ?>
                                  <img class="img_place" src="<?= $photo ?>" alt="Principal image">
                              <?php endif; ?>

                          </div>
                      </a>
                  </div>

              <?php
              endwhile;
              ?>
          </div>
          <!--<div class="swiper-pagination"></div>-->
      </div>
  <?php
  endif;

  wp_reset_postdata(); // Restore original post metadata_exists
  ?>

  <!-- Swiper JS -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <!-- Initialize Swiper -->
  <script>

      var swiper = new Swiper(".mySwiper", {
          // slidesPerView: auto,
          spaceBetween: 20,
          draggable: true,
          width: 300,
          freeMode: {
              enabled: true,
              momentumRatio: 1.5,
              momentumVelocityRatio: 1.5
          },
          breakpoints: {
              640: {
                  width: 400
              }
          }
      });


  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<head>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	</head>
	<body>

	<style>
	.swiper-container {
	width: 100%;
	height: 100%;
	}

	.swiper-slide {
	text-align: center;
	/background: #fff;/

	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	}
	.outside{
	width:300px;
	height:450px;
	overflow: hidden;
	border-radius: 28px;
	}
	.inside {
	width: 100%;
	height: 100%;
	z-index:3;
	font-size:32px;
	font-weight:800;
	color:white;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(0 0 0 / 40%);
	}
	.div-iframe{
	z-index:1;
	}
	.div-iframe iframe{
	height:800px;
	left: 0px;
	top: -140px;
	width: 100%;
	border:none;
	}
	.position-absolute{
	position: absolute;
	}
	.position-relative{
	position:relative;
	}
	@media (min-width:680px){
	.outside{
	width:400px;
	height:600px;
	}
	.div-iframe iframe{
	top:-100px;
	height:800px;
	}
	}
	</style>

	<?php
	$args = array(
	'post_type' => 'projects', // Specify the custom post type name
	'posts_per_page' => -1, // Number of posts to retrieve (-1 retrieves all)
	'post_status' => 'publish', // Consider only published posts
	// Add any additional parameters as needed, such as 'orderby', 'order', 'meta_query', etc.
	);

	$projects_query = new WP_Query($args);

	if ($projects_query->have_posts()) :
	?>
	<div class="swiper mySwiper">
	<div class="swiper-wrapper">
	<?php
	while ($projects_query->have_posts()) :
	$projects_query->the_post();
	$photo = get_post_meta(get_the_ID(), 'pic1', true);
	$video = jet_engine()->listings->data->get_meta('video');
	?>
	<div class="swiper-slide">
	<a href="<?php the_permalink() ?>">
	<div class="position-relative outside">
	<?php if ($video) : ?>
	<div class="position-absolute inside">
	<?php the_title(); ?>
	</div>
	<div class="position-relative div-iframe">
	<img class="img_place" src="<?= $photo ?>" alt="Principal image">
	<div id="iframeContainer">
	<iframe class="position-absolute player " src="https://player.vimeo.com/video/<?= $video ?>?muted=1&autoplay=1&loop=1&transparent=0&background=1" ></iframe>
	</div>
	<!--<div class="swiper-lazy-preloader"></div>-->
	</div>
	<?php else : ?>
	<img class="img_place" src="<?= $photo ?>" alt="Principal image">
	<?php endif; ?>

	</div>
	</a>
	</div>

	<?php
	endwhile;
	?>
	</div>
	<!--<div class="swiper-pagination"></div>-->
	</div>
	<?php
	endif;

	wp_reset_postdata(); // Restore original post metadata_exists
	?>

	<!-- Swiper JS -->
	<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
	<!-- Initialize Swiper -->
	<script>

	var swiper = new Swiper(".mySwiper", {
	// slidesPerView: auto,
	spaceBetween: 20,
	draggable: true,
	width: 300,
	freeMode: {
	enabled: true,
	momentumRatio: 1.5,
	momentumVelocityRatio: 1.5
	},
	breakpoints: {
	640: {
	width: 400
	}
	}
	});


	</script>
	</body>
	</html>