<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nieskończona karuzela</title>
<style>
.smigacz {
overflow: hidden;
display: flex;
white-space: nowrap;
}
.marka {
flex: 0 0 200px; /* Każdy div 'marka' ma stałą szerokość 300px */
width: 200px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: white;
background: #ccc; /* Tło dla lepszej widoczności */
box-shadow: inset #000 10px 10px;
}
</style>
</head>
<body>
<div class="smigacz">
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_tvp.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_tvn.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_tok-fm.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_showmax.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_polskie-radio.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_polsat.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_player.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_netflix.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_hbo.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_amazon-prime-video.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_disney-plus.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_radio-zet.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_rmf-fm.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_canal-plus.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_cinemax.jpg" class="markaimg">
</div>
</div>
<div class="smigacz">
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_zalando.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_t-mobile.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_samsung.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_rossmann.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_pzu.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_play.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_pko-bp.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_orange.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_mcdonalds.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_loreal.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_ikea.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_decathlon.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_coca-cola.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_audi.jpg" class="markaimg">
</div>
<div class="marka">
<img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_allegro.jpg" class="markaimg">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
const szerokoscMarki = 200; // Stała szerokość jednej marki
const czasAnimacji = 500; // Czas trwania animacji przewijania w milisekundach
const czasPauzy = 500; // Czas pauzy między kolejnymi animacjami w milisekundach
jQuery('.smigacz').each(function() { // Pętla po każdej instancji .smigacz
const jQuerysmigacz = jQuery(this);
const marki = jQuerysmigacz.find('.marka').clone(); // Klonujemy marki wewnątrz tego śmigacza
// Funkcja dodająca marki do śmigacza i ustawiająca odpowiednią szerokość
function setupCarousel() {
jQuerysmigacz.empty().append(marki).append(marki.clone()); // Dodajemy sklonowane marki do zapewnienia płynności
}
// Funkcja odpowiedzialna za przewijanie marek
function przesunMarki() {
function autoScroll() {
jQuerysmigacz.animate({scrollLeft: '+=' + szerokoscMarki}, czasAnimacji, 'linear', function() {
// Przenosimy pierwszą markę na koniec listy
const firstMark = jQuerysmigacz.find('.marka:first');
firstMark.appendTo(jQuerysmigacz);
jQuerysmigacz.scrollLeft(jQuerysmigacz.scrollLeft() - szerokoscMarki);
// Ustawiamy kolejną animację po określonym czasie pauzy
setTimeout(autoScroll, czasPauzy);
});
}
autoScroll();
}
setupCarousel(); // Konfigurujemy karuzelę przy ładowaniu strony
przesunMarki(); // Rozpoczynamy przewijanie marek
});
});
</script>
</body>
</html>
