blog code

</div>

<h2 class="m-slide-title">Digital Marketing Trends in 2026</h2>

</div>

</a>

</div>

<h2 class="m-slide-title">Mastering Clean Code Practices</h2>

</div>

</a>

</div>

<h2 class="m-slide-title">Web Development Frameworks</h2>

</div>

</a>

</div>

<h2 class="m-slide-title">SEO Optimization Guide</h2>

</div>

</a>

</div>

<h2 class="m-slide-title">UI/UX Design Principles</h2>

</div>

</a>

</div>

<style>

:root {

--m-slider-gap: 12px; /* Margins slightly reduced for multi-item grid */

--m-speed: 0.4s;

}

.m-slider-wrapper {

width: 100%;

box-sizing: border-box;

padding: 15px 0;

overflow: hidden;

}

.m-slider-wrapper * {

box-sizing: border-box;

}

.m-slider-container {

width: 100%;

overflow: hidden;

position: relative;

cursor: grab;

}

.m-slider-container:active {

cursor: grabbing;

}

.m-slider-track {

display: flex;

transition: transform var(--m-speed) ease-out;

will-change: transform;

}

/* Link Wrapper Reset */

.m-slide-item {

text-decoration: none !important;

color: inherit !important;

display: flex;

flex-direction: column;

background: transparent;

outline: none;

-webkit-tap-highlight-color: transparent;

}

/* Default Desktop view: 4 items on screen */

.m-slide-item {

flex: 0 0 calc((100% / 4) - (var(--m-slider-gap) * 3 / 4));

margin-right: var(--m-slider-gap);

}

.m-slide-item:last-child {

margin-right: 0;

}

/* Perfect Square Images */

.m-slide-image-box {

width: 100%;

position: relative;

padding-top: 100%;

overflow: hidden;

border-radius: 6px;

background-color: #f5f5f5;

}

.m-slide-image-box img {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

object-fit: cover;

object-position: center;

display: block;

}

/* Left Aligned Content */

.m-slide-content {

padding: 8px 2px;

text-align: left;

}

.m-slide-title {

margin: 0;

font-size: 0.95rem; /* Balanced size for 4-column layout */

font-weight: 700 !important;

line-height: 1.3;

color: #222222;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

overflow: hidden;

}

/* Responsive Breakpoints */

/* Tablets / Small Desktops: 3 items */

@media (max-width: 900px) {

.m-slide-item {

flex: 0 0 calc((100% / 3) - (var(--m-slider-gap) * 2 / 3));

}

/* Mobile Screens: Strict 3 items (images auto shrink) */

@media (max-width: 600px) {

.m-slide-item {

flex: 0 0 calc((100% / 3) - (var(--m-slider-gap) * 2 / 3));

margin-right: var(--m-slider-gap);

}

.m-slide-title {

font-size: 0.8rem; /* Mobile friendly smaller text */

}

</style>

document.addEventListener("DOMContentLoaded", function() {

const track = document.getElementById('mSliderTrack');

const container = track.parentElement;

let slides = document.querySelectorAll('.m-slide-item');

let currentIndex = 0;

let startX = 0;

let currentX = 0;

let isDragging = false;

let startTranslate = 0;

let currentTranslate = 0;

let autoplayTimer;

// Responsive dynamic columns check

function getItemsPerView() {

if (window.innerWidth <= 900) return 3; // Mobile aur tablet dono par 3 dikhenge

return 4; // Desktop par 4 dikhenge

}

function getSlideWidth() {

const item = document.querySelector('.m-slide-item');

if (!item) return 0;

const style = window.getComputedStyle(item);

const marginRight = parseFloat(style.marginRight) || 0;

return item.offsetWidth + marginRight;

}

function maxIndex() {

return Math.max(0, slides.length - getItemsPerView());

}

function updateSliderPosition() {

const slideWidth = getSlideWidth();

currentTranslate = -currentIndex * slideWidth;

track.style.transition = 'transform 0.4s ease-out';

track.style.transform = `translateX(${currentTranslate}px)`;

}

function nextSlide() {

if (currentIndex < maxIndex()) {

currentIndex++;

} else {

currentIndex = 0;

}

updateSliderPosition();

}

function prevSlide() {

if (currentIndex > 0) {

currentIndex--;

} else {

currentIndex = maxIndex();

}

updateSliderPosition();

}

function startAutoplay() {

stopAutoplay();

autoplayTimer = setInterval(nextSlide, 4000);

}

function stopAutoplay() {

if (autoplayTimer) clearInterval(autoplayTimer);

}

// Prevent link dragging glitching on desktop

slides.forEach(slide => {

slide.addEventListener('click', function(e) {

if (Math.abs(currentX - startX) > 10) {

e.preventDefault(); // Agar user swipe kar raha hai to link open nahi hoga

}

});

// Touch & Mouse Events

container.addEventListener('touchstart', touchStart, { passive: true });

container.addEventListener('touchend', touchEnd);

container.addEventListener('touchmove', touchMove, { passive: true });

container.addEventListener('mousedown', touchStart);

container.addEventListener('mouseup', touchEnd);

container.addEventListener('mouseleave', touchEnd);

container.addEventListener('mousemove', touchMove);

function touchStart(event) {

stopAutoplay();

isDragging = true;

startX = getPositionX(event);

currentX = startX;

track.style.transition = 'none';

startTranslate = -currentIndex * getSlideWidth();

}

function touchMove(event) {

if (!isDragging) return;

currentX = getPositionX(event);

const currentPosition = startTranslate + (currentX - startX);

track.style.transform = `translateX(${currentPosition}px)`;

}

function touchEnd() {

if (!isDragging) return;

isDragging = false;

const movedBy = currentX - startX;

if (movedBy < -40) {

nextSlide();

} else if (movedBy > 40) {

prevSlide();

} else {

updateSliderPosition();

}

startAutoplay();

}

function getPositionX(event) {

return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX;

}

window.addEventListener('resize', () => {

if (currentIndex > maxIndex()) {

currentIndex = maxIndex();

}

updateSliderPosition();

});

// Init

updateSliderPosition();

startAutoplay();

});

</script>

blog code

Contact Form