Here's a **completely different approach** - a **floating iframe carousel** that moves around the screen with dynamic resizing and interactive controls:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Iframe Carousel</title>
<style>
body {
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
background: #f0f2f5;
}
/* Floating container */
.floating-carousel {
position: fixed;
width: 300px;
height: 200px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
overflow: hidden;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 1000;
display: flex;
flex-direction: column;
background: white;
}
/* Header with draggable area */
.carousel-header {
padding: 10px 15px;
background: #4a6baf;
color: white;
cursor: move;
display: flex;
justify-content: space-between;
align-items: center;
}
.carousel-title {
font-weight: bold;
font-size: 14px;
}
.carousel-controls {
display: flex;
gap: 8px;
}
.control-btn {
background: rgba(255,255,255,0.2);
border: none;
color: white;
width: 24px;
height: 24px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
transition: all 0.2s;
}
.control-btn:hover {
background: rgba(255,255,255,0.3);
transform: scale(1.1);
}
/* Iframe container */
.carousel-iframe-container {
flex: 1;
position: relative;
}
.carousel-iframe {
width: 100%;
height: 100%;
border: none;
background: white;
}
/* Resize handle */
.resize-handle {
position: absolute;
bottom: 0;
right: 0;
width: 15px;
height: 15px;
cursor: nwse-resize;
background: linear-gradient(135deg, #4a6baf 50%, transparent 50%);
z-index: 10;
}
/* Minimized state */
.floating-carousel.minimized {
height: 40px !important;
}
.floating-carousel.minimized .carousel-iframe-container,
.floating-carousel.minimized .resize-handle {
display: none;
}
/* Fullscreen state */
.floating-carousel.fullscreen {
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
border-radius: 0;
}
/* Progress indicator */
.progress-container {
height: 3px;
background: rgba(0,0,0,0.1);
width: 100%;
}
.progress-bar {
height: 100%;
background: #4a6baf;
width: 0%;
transition: width linear;
}
</style>
</head>
<body>
<div class="floating-carousel" id="floatingCarousel">
<div class="carousel-header" id="carouselHeader">
<div class="carousel-title">Web Carousel</div>
<div class="carousel-controls">
<button class="control-btn" id="prevBtn">◄</button>
<button class="control-btn" id="playPauseBtn">❚❚</button>
<button class="control-btn" id="nextBtn">►</button>
<button class="control-btn" id="minimizeBtn">−</button>
<button class="control-btn" id="closeBtn">×</button>
</div>
</div>
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="carousel-iframe-container">
<iframe class="carousel-iframe" id="carouselIframe" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
</div>
<div class="resize-handle" id="resizeHandle"></div>
</div>
<script>
// URL list with titles
const sites = [
{ url: 'https://advertica13.blogspot.com/', title: 'Advertica 13' },
{ url: 'https://advertica12.blogspot.com/', title: 'Advertica 12' },
{ url: 'https://advertica08.blogspot.com/', title: 'Advertica 08' },
{ url: 'https://advertica07.blogspot.com/', title: 'Advertica 07' },
{ url: 'https://advertica06.blogspot.com/', title: 'Advertica 06' },
{ url: 'https://www.softmod.shop/', title: 'Softmod Shop' }
];
// DOM elements
const floatingCarousel = document.getElementById('floatingCarousel');
const carouselIframe = document.getElementById('carouselIframe');
const carouselHeader = document.getElementById('carouselHeader');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const playPauseBtn = document.getElementById('playPauseBtn');
const minimizeBtn = document.getElementById('minimizeBtn');
const closeBtn = document.getElementById('closeBtn');
const resizeHandle = document.getElementById('resizeHandle');
const progressBar = document.getElementById('progressBar');
const carouselTitle = document.querySelector('.carousel-title');
// State variables
let currentIndex = 0;
let rotationInterval;
let isPlaying = true;
let isDragging = false;
let isResizing = false;
let startX, startY, startWidth, startHeight, startLeft, startTop;
const rotationSpeed = 10000; // 10 seconds
// Initialize carousel
function initCarousel() {
// Position randomly on screen
const maxX = window.innerWidth - 300;
const maxY = window.innerHeight - 200;
floatingCarousel.style.left = `${Math.max(0, Math.floor(Math.random() * maxX))}px`;
floatingCarousel.style.top = `${Math.max(0, Math.floor(Math.random() * maxY))}px`;
loadCurrentSite();
startRotation();
// Setup drag and resize
setupDrag();
setupResize();
}
// Load current site
function loadCurrentSite() {
if (currentIndex >= 0 && currentIndex < sites.length) {
carouselIframe.src = sites[currentIndex].url;
carouselTitle.textContent = sites[currentIndex].title;
}
}
// Start rotation
function startRotation() {
if (rotationInterval) clearInterval(rotationInterval);
// Reset progress bar
progressBar.style.width = '0%';
progressBar.style.transition = `width ${rotationSpeed/1000}s linear`;
setTimeout(() => {
progressBar.style.width = '100%';
}, 10);
rotationInterval = setInterval(() => {
if (isPlaying) {
nextSite();
}
}, rotationSpeed);
}
// Next site
function nextSite() {
currentIndex = (currentIndex + 1) % sites.length;
loadCurrentSite();
startRotation(); // Restart timer with new progress bar
}
// Previous site
function prevSite() {
currentIndex = (currentIndex - 1 + sites.length) % sites.length;
loadCurrentSite();
startRotation(); // Restart timer with new progress bar
}
// Toggle play/pause
function togglePlayPause() {
isPlaying = !isPlaying;
playPauseBtn.textContent = isPlaying ? '❚❚' : '►';
if (isPlaying) {
startRotation();
} else {
clearInterval(rotationInterval);
progressBar.style.transition = 'none';
}
}
// Toggle minimize
function toggleMinimize() {
floatingCarousel.classList.toggle('minimized');
minimizeBtn.textContent = floatingCarousel.classList.contains('minimized') ? '+' : '−';
}
// Toggle fullscreen
function toggleFullscreen() {
floatingCarousel.classList.toggle('fullscreen');
}
// Setup drag functionality
function setupDrag() {
carouselHeader.addEventListener('mousedown', (e) => {
if (e.target.classList.contains('control-btn')) return;
isDragging = true;
startX = e.clientX;
startY = e.clientY;
startLeft = floatingCarousel.offsetLeft;
startTop = floatingCarousel.offsetTop;
document.body.style.userSelect = 'none';
floatingCarousel.style.cursor = 'grabbing';
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const dx = e.clientX - startX;
const dy = e.clientY - startY;
floatingCarousel.style.left = `${Math.max(0, Math.min(window.innerWidth - floatingCarousel.offsetWidth, startLeft + dx))}px`;
floatingCarousel.style.top = `${Math.max(0, Math.min(window.innerHeight - floatingCarousel.offsetHeight, startTop + dy))}px`;
});
document.addEventListener('mouseup', () => {
isDragging = false;
document.body.style.userSelect = '';
floatingCarousel.style.cursor = '';
});
}
// Setup resize functionality
function setupResize() {
resizeHandle.addEventListener('mousedown', (e) => {
e.preventDefault();
isResizing = true;
startX = e.clientX;
startY = e.clientY;
startWidth = floatingCarousel.offsetWidth;
startHeight = floatingCarousel.offsetHeight;
document.body.style.userSelect = 'none';
});
document.addEventListener('mousemove', (e) => {
if (!isResizing) return;
const dx = e.clientX - startX;
const dy = e.clientY - startY;
const newWidth = Math.max(300, Math.min(800, startWidth + dx));
const newHeight = Math.max(200, Math.min(600, startHeight + dy));
floatingCarousel.style.width = `${newWidth}px`;
floatingCarousel.style.height = `${newHeight}px`;
});
document.addEventListener('mouseup', () => {
isResizing = false;
document.body.style.userSelect = '';
});
}
// Event listeners
prevBtn.addEventListener('click', () => {
prevSite();
if (!isPlaying) isPlaying = true;
playPauseBtn.textContent = '❚❚';
});
nextBtn.addEventListener('click', () => {
nextSite();
if (!isPlaying) isPlaying = true;
playPauseBtn.textContent = '❚❚';
});
playPauseBtn.addEventListener('click', togglePlayPause);
minimizeBtn.addEventListener('click', toggleMinimize);
closeBtn.addEventListener('click', () => {
floatingCarousel.style.display = 'none';
});
// Double click header to toggle fullscreen
carouselHeader.addEventListener('dblclick', toggleFullscreen);
// Initialize on load
window.addEventListener('load', initCarousel);
// Keep within window bounds on resize
window.addEventListener('resize', () => {
const left = floatingCarousel.offsetLeft;
const top = floatingCarousel.offsetTop;
const width = floatingCarousel.offsetWidth;
const height = floatingCarousel.offsetHeight;
if (left + width > window.innerWidth) {
floatingCarousel.style.left = `${window.innerWidth - width}px`;
}
if (top + height > window.innerHeight) {
floatingCarousel.style.top = `${window.innerHeight - height}px`;
}
});
</script>
</body>
</html>
```
### Key Features of This Floating Carousel:
1. **Interactive Floating Window**:
- Draggable anywhere on screen
- Resizable with corner handle
- Minimize/maximize functionality
- Double-click header for fullscreen
2. **Visual Progress Indicator**:
- Progress bar shows time remaining for current site
- Smooth animation synchronized with rotation
3. **Enhanced Controls**:
- Play/pause auto-rotation
- Previous/next navigation
- Minimize and close buttons
4. **Dynamic Behavior**:
- Random initial positioning
- Stays within screen bounds
- Adjusts to window resizing
5. **Smooth Animations**:
- Movement and resizing transitions
- Progress bar animation
- State changes (minimize/fullscreen)
6. **Modern UI**:
- Clean, professional design
- Proper shadow effects
- Intuitive controls
This implementation creates a more engaging and interactive experience compared to traditional popups. The floating window can be moved around the screen as needed, resized according to user preference, and provides clear visual feedback about the rotation progress.
You can customize:
- The initial size and position
- Rotation speed
- Color scheme
- Button behaviors
- The sites list with proper thumbnails if desired
