* {
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: auto;
height: auto;
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;
}

A Team of Officers led by Sh. Ashok Kumar V. Director, Appraisal, MSO CWC visited 2 HO sites namely Billigundulu maintained under SRD, Coimbatore and Neeleeshwaram HO site maintained under SWRD Kochi on 23rd and 24th Jan, 2025 under Inter Organisation Competition and evaluation of model HO sites under C&SRO. Officers of C&SRO actively assisted in the visit.

❮❯

2025 MSO Image Slider Collection

Click thumbnails to view different images

const sliderData = [
{
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnCs900op2TCU...(8).jpg",
caption: ""
},
{
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy0UB73LumEno...(7).jpg",
caption: ""
},

{
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwLZ7Xg0FRzBa...(6).jpg",
caption: ""
},
{
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8tkhA_qVrDqS...(5).jpg",
caption: ""
},
{
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLXwfN5KUmRfj...(4).jpg",
caption: ""
},
{
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Wx3T76I0IqQ...(3).jpg",
caption: ""
},
{
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlTOEf5-bPOIX...(2).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);