1#@!#!123s

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


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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />


<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: 25% !important;
        left: 50% !important;
    }

    .swiper.address-slider {
        padding-bottom: 30px !important;
		padding-top:68px !important;
    }

    .swiper-slide.swiper-slide-prev {
        transform: translateY(70px);
    }

    .swiper-slide.swiper-slide-next {
        transform: translateY(-70px);
    }

    img{
        max-width:100%;
    }

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

    .address-slider .swiper-slide h4{
      transition: 0.5s;
      color:#fff;
      text-align: left;
    }
	
	.address-slider .swiper-slide h4 {
		margin: 0;
		margin-bottom: 5px;
		font-size: 23px;
	}

    .address-slider .swiper-slide.swiper-slide-active h4{
      text-align: center;
    }

    .swiper-slide .home__slider__project{
      padding: 0px 20px;
    }
	
	@media(max-width:767px){
		.swiper.address-slider{
			padding-top:0px !important;
		}
		.swiper-pagination{
			width:90% !important;
		}
	}

  </style>

<!-- Swiper -->
  <div class="swiper address-slider">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <a href="<?php echo site_url(); ?>/projects/manor-vastu/"><div class="home__slider__project">
          <h4>Manor Vaastu (2015- 2017)</h4>
          <img src="<?php echo site_url(); ?>/wp-content/uploads/2024/01/Image-1.png">
        </div>
			</a>
      </div>
      <div class="swiper-slide">
		  <a href="<?php echo site_url(); ?>/projects/manor-greenz/">
        <div class="home__slider__project">
          <h4>Manor Greenz (2017 -2020)</h4>
          <img src="<?php echo site_url(); ?>/wp-content/uploads/2024/01/Iamge-1.png">
        </div>
		</a>
      </div>
	  <div class="swiper-slide">
		 <a href="<?php echo site_url(); ?>/projects/avion/">
        <div class="home__slider__project">
          <h4>Avion (2019 -2020)</h4>
          <img src="<?php echo site_url(); ?>/wp-content/uploads/2024/01/Avion-2019-2020-1.png">
        </div>
		  </a>
      </div>
      <div class="swiper-slide">
		<a href="<?php echo site_url(); ?>/projects/manor-maxx/"> 
        <div class="home__slider__project">
          <h4>Manor Maxx (2019 - 2020)</h4>
          <img src="<?php echo site_url(); ?>/wp-content/uploads/2024/01/Image-1-1.png">
        </div>
		  </a>
      </div>
      <div class="swiper-slide">
		 <a href="<?php echo site_url(); ?>/projects/manor-ananda/"> 
        <div class="home__slider__project">
          <h4>Manor Ananda (2022 Ongoing)</h4>
          <img src="<?php echo site_url(); ?>/wp-content/uploads/2024/01/Image-1-2.png">
        </div>
		  </a>
      </div>
      <div class="swiper-slide">
		 <a href="<?php echo site_url(); ?>/projects/centroid/">
        <div class="home__slider__project">
          <h4>Centroid (2023 Ongoing)</h4>
          <img src="<?php echo site_url(); ?>/wp-content/uploads/2024/01/Image-1-3.png">
        </div>
		  </a>
<!--       </div>
		<div class="swiper-slide">
		 <a href="<?php echo site_url(); ?>/projects/anahata-villas/">
        <div class="home__slider__project">
          <h4>Anahata Villas (2024 Ongoing)</h4>
          <img src="<?php echo site_url(); ?>/wp-content/uploads/2024/11/Anahata.jpg">
        </div>
		  </a>
      </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(".address-slider", {
      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,
          spaceBetween: 20
        },
        1024: {
          slidesPerView: 3,
          spaceBetween: 20
        }
      }
      
    });
  </script>


 <?php

  return ob_get_clean();

}
add_shortcode( 'address-slider', 'address_slider' );