* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

{
font-family: Arial, sans-serif;
background-color: #f0f0f0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}

.slider-wrapper {
max-width: 1200px;
width: 100%;
}

.slider-header {
background: #5575ff;
color: white;
padding: 20px;
text-align: center;
border-radius: 10px 10px 0 0;
}

.slider-footer {
background: #333;
color: white;
padding: 20px;
text-align: center;
border-radius: 0 0 10px 10px;
}

.slider-container {
max-width: 1200px;
width: 100%;
position: relative;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.slides {
display: flex;
width: 100%;
height: 500px;
transition: transform 0.5s ease-in-out;
}

.slide {
flex: 0 0 100%;
position: relative;
}

.slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
color: white;
padding: 20px;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
}

.slide.active .caption {
opacity: 1;
transform: translateY(0);
}

.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
cursor: pointer;
font-size: 24px;
transition: background 0.3s;
}

.prev:hover, .next:hover {
background: rgba(0, 0, 0, 0.8);
}

.prev {
left: 10px;
border-radius: 50% 0 0 50%;
}

.next {
right: 10px;
border-radius: 0 50% 50% 0;
}

.thumbnails {
display: flex;
justify-content: center;
gap: 10px;
padding: 15px 0;
background: rgba(225, 227, 255, 0.9);
}

.thumbnail {
width: 100px;
height: 60px;
cursor: pointer;
opacity: 0.6;
transition: all 0.3s;
border-radius: 5px;
overflow: hidden;
}

.thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}

.thumbnail:hover {
opacity: 0.8;
}

.thumbnail.active {
opacity: 1;
border: 2px solid #007bff;
}

@media (max-width: 100%) {
.slides {
height: flex;
}

.caption {
padding: 15px;
font-size: 14px;
}

.prev, .next {
width: 40px;
height: 40px;
font-size: 20px;
}

.thumbnail {
width: 80px;
height: 48px;
}

.slider-header, .slider-footer {
padding: 15px;
font-size: 14px;
}
}

@media (max-width: flex) {
.slides {
height: flex;
}

.caption {
padding: 10px;
font-size: 12px;
}

.thumbnail {
width: 60px;
height: 36px;
}

.slider-header, .slider-footer {
padding: 10px;
font-size: 12px;
}
}
.slider-container {
max-width: 1200px;
width: 100%;
position: relative;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
}

.controls {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
padding: 0 10px;
z-index: 10;
}

.prev, .next {
position: static;
transform: none;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
cursor: pointer;
font-size: 24px;
transition: background 0.3s;
border-radius: 50%;
}

.thumbnails {
display: flex;
justify-content: center;
gap: 10px;
padding: 15px 0;
background: rgba(225, 227, 255, 0.9);
position: relative;
z-index: 5;
}

@media (max-width: 768px) {
.prev, .next {
width: 40px;
height: 40px;
font-size: 20px;
}
}
.button-container {
display: flex;
justify-content: center;
gap: 10px;
}

5Monitoring visit of 138 SMI schemes of Kalaburagi & Yadgir Districts of Karnataka - 05-08 February
8 SMI schemes under PMKSY-HKKP of 2 taluks viz Aland and Sedam of Kalaburagi district were visited for monitoring from 05.02.2025 to 08.02.2025 by Director, DD & AD, Appraisal Dte, MSO, CWC, Bengaluru accompanied by SE, EE, AEE and concerned officials of MI department, Govt of Karnataka

❮❯

2025 MSO Image Slider Collection

Click thumbnails to view different images

const sliderData = [
{
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis7Wfmtyw8sOa...(2).jpg",
caption: ""
},
{
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOglHBmJVzeCe...(1).jpg",
caption: ""
},

{
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib_Qlujz_kfSD...(3).jpg",
caption: ""
},
{
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZODizKWdsGml...(4).jpg",
caption: ""
},
{
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsCPJ37Av99uB...(5).jpg",
caption: ""
},
{
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4xyTWYPI653a...(6).jpg",
caption: ""
},
{
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Olx9zRbBgQl...(7).jpg",
caption: ""
},
{
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaIfzDEHU5-Gq...(8).jpg",
caption: ""
}

];

const slidesContainer = document.querySelector('.slides');
const thumbnailsContainer = document.querySelector('.thumbnails');
let currentIndex = 0;
let intervalId;

sliderData.forEach((slide, index) => {
const slideElement = document.createElement('div');
slideElement.classList.add('slide');
slideElement.innerHTML = `

${slide.caption}
`;
slidesContainer.appendChild(slideElement);

const thumbnail = document.createElement('div');
thumbnail.classList.add('thumbnail');
thumbnail.dataset.index = index;
thumbnail.innerHTML = `

`;
thumbnailsContainer.appendChild(thumbnail);
});

const slides = document.querySelectorAll('.slide');
const thumbnails = document.querySelectorAll('.thumbnail');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
const sliderContainer = document.querySelector('.slider-container');

function updateSlider() {
slidesContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
slides.forEach(slide => slide.classList.remove('active'));
thumbnails.forEach(thumbnail => thumbnail.classList.remove('active'));
slides[currentIndex].classList.add('active');
thumbnails[currentIndex].classList.add('active');
}

function nextSlide() {
currentIndex = (currentIndex + 1) % slides.length;
updateSlider();
}

function prevSlide() {
currentIndex = (currentIndex - 1 + slides.length) % slides.length;
updateSlider();
}

nextBtn.addEventListener('click', () => {
clearInterval(intervalId);
nextSlide();
startAutoSlide();
});

prevBtn.addEventListener('click', () => {
clearInterval(intervalId);
prevSlide();
startAutoSlide();
});

thumbnails.forEach(thumbnail => {
thumbnail.addEventListener('click', () => {
clearInterval(intervalId);
currentIndex = parseInt(thumbnail.dataset.index);
updateSlider();
startAutoSlide();
});
});

function startAutoSlide() {
intervalId = setInterval(nextSlide, 5000);
}

updateSlider();
startAutoSlide();

sliderContainer.addEventListener('mouseenter', () => clearInterval(intervalId));
sliderContainer.addEventListener('mouseleave', startAutoSlide);