1#@!#!123s

: / home / sanghavirealty / www / wp-content / plugins / project-slider /
Filename : project-slider.php
back
<?php
/**
 * Plugin Name: project_slider
 * Plugin URI: http://www.gems.com/project_slider
 * Description: The very first plugin that I have ever created.
 * Version: 1.0
 * Author: project_slider
 * Author URI: http://www.gems.com
 */


// Add Shortcode
function project_slider() {
  ob_start();
  ?>


  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
      padding:0px;
      margin:0px;

    }

    .swiper-pagination {
        transform: translateY(93%) translateX(-50%) !important;
        top: 97% !important;
        z-index: 999;
        background:
        rgba(255 255 255/20%) !important;
        width: 37% !important;
        left: 50% !important;
    }

    .swiper.mySwiper {
        padding-bottom: 30px !important;
    }

    img{
        max-width:100%;
    }

    span.swiper-pagination-progressbar-fill {
        background: #fff !important;
    }


  </style>


   <!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
          <img src="<?php echo site_url(); ?>/wp-content/uploads/2024/01/MANOR-ANANDA-image-1.png">
      </div>
      <div class="swiper-slide">
        <img src="<?php echo site_url(); ?>/wp-content/uploads/2024/01/MANOR-GREENZ-image-1.png">
      </div>
      <div class="swiper-slide">
          <img src="<?php echo site_url(); ?>/wp-content/uploads/2024/01/MANOR-MAXX-image-1.png">
      </div>
      <div class="swiper-slide">
        <img src="<?php echo site_url(); ?>/wp-content/uploads/2024/01/MANOR-VASTU-image-1.png">
      </div>
		
		<div class="swiper-slide">
        <img src="<?php echo site_url(); ?>/wp-content/uploads/2024/01/AVION-image-1.png">
      </div>
		<div class="swiper-slide">
        <img src="<?php echo site_url(); ?>/wp-content/uploads/2024/01/CENTROID-image-1.png">
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

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

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      centeredSlides: true,
      slidesPerView: 1,
      grabCursor: true,
      freeMode: false,
      loop: true,
      mousewheel: false,
      keyboard: {
        enabled: true
      },

       // Enabled autoplay mode

      // autoplay: {
      //   delay: 3000,
      //   disableOnInteraction: false
      // },


      pagination: {
        el: ".swiper-pagination",
        clickable: true,
        renderBullet: function (index, className) {
          return '<span class="' + className + '">' + (index + 1) + "</span>";
        },
        type: "progressbar",
      },


      // Responsive breakpoints
      breakpoints: {
        640: {
          slidesPerView: 1.25,
          spaceBetween: 20
        },
        1024: {
          slidesPerView: 2,
          spaceBetween: 20
        }
      }
      
    });
  </script>




 <?php

  return ob_get_clean();

}
add_shortcode( 'project-slider', 'project_slider' );