+91 93104 94842 Contact@tripvedas.in

Login

Sign Up

After creating an account, you'll be able to track your payment status, track the confirmation and you can also rate the tour after you finished the tour.
Username*
Password*
Confirm Password*
First Name*
Last Name*
Birth Date*
Email*
Phone*
Country*
* Creating an account means you're okay with our Terms of Service and Privacy Statement.
Please agree to all the terms and conditions before proceeding to the next step

Already a member?

Login
+91 93104 94842 Contact@tripvedas.in

Login

Sign Up

After creating an account, you'll be able to track your payment status, track the confirmation and you can also rate the tour after you finished the tour.
Username*
Password*
Confirm Password*
First Name*
Last Name*
Birth Date*
Email*
Phone*
Country*
* Creating an account means you're okay with our Terms of Service and Privacy Statement.
Please agree to all the terms and conditions before proceeding to the next step

Already a member?

Login

instagram

Instagram Embed Slider with Icons and Comment

Instagram Slider Example

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
<div class="wp-block-column" style="flex-basis:100%"><!-- wp:html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Instagram Embed Slider with Icons and Comment</title>

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

<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background: #f4f4f4;
}
.swiper {
width: 100%;
max-width: 1200px;
margin: auto;
padding: 20px 0;
}
.swiper-slide {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.post-container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.post-content iframe {
width: 100%;
height: 600px;
border: none;
border-radius: 10px 10px 0 0;
background: white;
}
.post-actions {
padding: 10px 15px;
display: flex;
align-items: center;
justify-content: space-between;
}
.left-icons {
display: flex;
gap: 15px;
}
.left-icons img,
.right-icon img {
width: 24px;
height: 24px;
cursor: pointer;
}
.right-icon {
margin-left: auto;
}
.swiper-button-next,
.swiper-button-prev {
color: #333;
}
</style>
</head>
<body>

<h1 style="text-align:center;">Instagram Slider Example</h1>

<!-- Swiper -->
<div class="swiper insta-slide">
<div class="swiper-wrapper">

<!-- Slide 1 -->
<div class="swiper-slide">
<div class="post-container">
<div class="post-content">
<iframe src="https://www.instagram.com/p/C9eYdzMylWt/embed"
allowtransparency="true" allowfullscreen="true" scrolling="no">
</iframe>
</div>
</div>
</div>

<!-- Slide 2 -->
<div class="swiper-slide">
<div class="post-container">
<div class="post-content">
<iframe src="https://www.instagram.com/p/C-ApxpAy-ec/embed"
allowtransparency="true" allowfullscreen="true" scrolling="no">
</iframe>
</div>
</div>
</div>

<!-- Slide 3 -->
<div class="swiper-slide">
<div class="post-container">
<div class="post-content">
<iframe src="https://www.instagram.com/p/CvsE9lZJeXf/embed"
allowtransparency="true" allowfullscreen="true" scrolling="no">
</iframe>
</div>
</div>
</div>

</div>

<!-- Navigation buttons -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>

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

<!-- Initialize Swiper -->
<script>
const swiper = new Swiper('.insta-slide', {
slidesPerView: 1,
spaceBetween: 20,
loop: true,
autoHeight: true,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
768: { slidesPerView: 2 },
1024: { slidesPerView: 3 },
},
});
</script>

</body>
</html>
<!-- /wp:html --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Proceed Booking