<style>
/* =========================================================
AFRICAGAMING — MOBILE HERO 2026
ISOLATED / ID ONLY / ELEMENTOR SAFE
========================================================= */
#afgMobileHero2026,
#afgMobileHero2026 *{
box-sizing:border-box;
}
#afgMobileHero2026{
--afg-red:#ed1c24;
width:100%;
max-width:100%;
margin:0;
padding:0;
position:relative;
display:block;
overflow:hidden;
isolation:isolate;
font-family:Arial,Helvetica,sans-serif;
line-height:1;
}
/* =========================================================
VIEWPORT
========================================================= */
#afgMobileHero2026 .afg-mh-viewport{
width:100%;
height:auto;
position:relative;
overflow:hidden;
margin:0;
padding:0;
background:#080808;
touch-action:pan-y;
user-select:none;
-webkit-user-select:none;
}
/* =========================================================
TRACK
========================================================= */
#afgMobileHero2026 .afg-mh-track{
width:100%;
height:auto;
display:flex;
flex-wrap:nowrap;
overflow-x:auto;
overflow-y:hidden;
margin:0;
padding:0;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
overscroll-behavior-x:contain;
}
#afgMobileHero2026 .afg-mh-track::-webkit-scrollbar{
display:none;
}
/* =========================================================
SLIDE
========================================================= */
#afgMobileHero2026 .afg-mh-slide{
flex:0 0 100%;
width:100%;
min-width:100%;
max-width:100%;
position:relative;
scroll-snap-align:start;
scroll-snap-stop:always;
margin:0;
padding:0;
overflow:hidden;
display:block;
line-height:0;
background:#000;
}
/* =========================================================
LINK
========================================================= */
#afgMobileHero2026 .afg-mh-link{
width:100%;
height:auto;
display:block;
margin:0;
padding:0;
text-decoration:none !important;
line-height:0;
cursor:pointer;
}
/* =========================================================
IMAGE
========================================================= */
#afgMobileHero2026 .afg-mh-image{
width:100% !important;
height:auto !important;
max-width:none !important;
max-height:none !important;
min-width:0 !important;
min-height:0 !important;
display:block !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
outline:0 !important;
object-fit:contain;
object-position:center;
pointer-events:none;
user-select:none;
-webkit-user-select:none;
-webkit-user-drag:none;
line-height:0;
}
/* =========================================================
DOTS
========================================================= */
#afgMobileHero2026 .afg-mh-dots{
position:absolute;
left:0;
right:0;
bottom:10px;
width:100%;
display:flex;
justify-content:center;
align-items:center;
gap:6px;
z-index:20;
margin:0;
padding:0;
pointer-events:none;
}
#afgMobileHero2026 .afg-mh-dot{
width:7px;
height:7px;
min-width:7px;
min-height:7px;
margin:0;
padding:0;
border:0;
border-radius:50%;
background:rgba(255,255,255,.45);
opacity:1;
cursor:pointer;
pointer-events:auto;
transition:
transform .2s ease,
background .2s ease;
}
#afgMobileHero2026 .afg-mh-dot[data-active="true"]{
background:var(--afg-red);
transform:scale(1.35);
}
/* =========================================================
ARROWS
MOBILE = HIDDEN
========================================================= */
#afgMobileHero2026 .afg-mh-arrow{
display:none !important;
position:absolute;
top:50%;
z-index:30;
width:38px;
height:38px;
margin:0;
padding:0;
border:0;
border-radius:50%;
background:rgba(0,0,0,.45);
color:#fff;
font-size:24px;
line-height:38px;
text-align:center;
transform:translateY(-50%);
cursor:pointer;
}
#afgMobileHero2026 .afg-mh-prev{
left:8px;
}
#afgMobileHero2026 .afg-mh-next{
right:8px;
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
#afgMobileHero2026{
width:100vw;
max-width:100vw;
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
}
#afgMobileHero2026 .afg-mh-viewport{
width:100%;
}
#afgMobileHero2026 .afg-mh-track{
width:100%;
}
#afgMobileHero2026 .afg-mh-slide{
flex-basis:100%;
min-width:100%;
}
}
/* =========================================================
DESKTOP
========================================================= */
@media(min-width:768px){
#afgMobileHero2026{
width:100%;
max-width:1400px;
margin-left:auto;
margin-right:auto;
}
#afgMobileHero2026 .afg-mh-arrow{
display:flex !important;
align-items:center;
justify-content:center;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
#afgMobileHero2026 .afg-mh-track{
scroll-behavior:auto;
}
#afgMobileHero2026 .afg-mh-dot{
transition:none;
}
}
</style>
<div id="afgMobileHero2026">
<div class="afg-mh-viewport">
<div
class="afg-mh-track"
id="afgMobileHeroTrack"
tabindex="0"
aria-label="Promotions AFRICAGAMING"
>
<!-- =================================================
SLIDE 1
================================================== -->
<div class="afg-mh-slide">
<a
class="afg-mh-link"
href="https://africagaming.ma/pc-builder/"
aria-label="Créer votre PC Gamer au Maroc avec AFRICAGAMING"
>
<img
class="afg-mh-image"
src="https://africagaming.ma/wp-content/uploads/2023/10/df9b1422-63b7-45bf-962e-ff7f05584a93.avif"
alt="PC Gamer Maroc et PC Gamer Tanger – configuration gaming AFRICAGAMING"
width="1400"
height="480"
loading="eager"
fetchpriority="high"
decoding="async"
draggable="false"
>
</a>
</div>
<!-- =================================================
SLIDE 2
================================================== -->
<div class="afg-mh-slide">
<a
class="afg-mh-link"
href="https://africagaming.ma/nouveaux-produits/"
aria-label="Découvrir les nouveaux PC Gamer à Tanger et au Maroc"
>
<img
class="afg-mh-image"
src="https://africagaming.ma/wp-content/uploads/2023/10/562601c7-981c-43ae-8a56-2ffb9e5f03c7.avif"
alt="PC Gamer Tanger – nouveaux ordinateurs gaming au Maroc"
width="1400"
height="480"
loading="lazy"
decoding="async"
draggable="false"
>
</a>
</div>
<!-- =================================================
SLIDE 3
================================================== -->
<div class="afg-mh-slide">
<a
class="afg-mh-link"
href="https://africagaming.ma/logitech-g920-driving-force/"
aria-label="Découvrir les accessoires gaming au Maroc"
>
<img
class="afg-mh-image"
src="https://africagaming.ma/wp-content/uploads/2023/10/4519a68d-bb90-40a1-bacd-037d663cb280.avif"
alt="Matériel gaming Maroc – accessoires et équipements pour PC Gamer"
width="1400"
height="480"
loading="lazy"
decoding="async"
draggable="false"
>
</a>
</div>
<!-- =================================================
SLIDE 4
================================================== -->
<div class="afg-mh-slide">
<a
class="afg-mh-link"
href="https://africagaming.ma/gaming/pack-promo-gaming/"
aria-label="Voir les packs gaming et promotions PC Gamer au Maroc"
>
<img
class="afg-mh-image"
src="https://africagaming.ma/wp-content/uploads/2023/10/pack-promo.avif"
alt="Pack gaming en promotion au Maroc – PC Gamer et accessoires gaming"
width="1400"
height="480"
loading="lazy"
decoding="async"
draggable="false"
>
</a>
</div>
<!-- =================================================
SLIDE 5
================================================== -->
<div class="afg-mh-slide">
<a
class="afg-mh-link"
href="https://africagaming.ma/gaming/composants-pc/motherboard/"
aria-label="Acheter une carte mère PC Gamer au Maroc"
>
<img
class="afg-mh-image"
src="https://africagaming.ma/wp-content/uploads/2023/10/02b07cde-7cec-4189-9cea-fdccb7aee2b7.avif"
alt="Carte mère PC Gamer Maroc – composants PC et matériel informatique"
width="1400"
height="480"
loading="lazy"
decoding="async"
draggable="false"
>
</a>
</div>
</div>
<!-- =================================================
DESKTOP ARROWS
================================================== -->
<button
type="button"
class="afg-mh-arrow afg-mh-prev"
id="afgMobileHeroPrev"
aria-label="Slide précédente"
>
‹
</button>
<button
type="button"
class="afg-mh-arrow afg-mh-next"
id="afgMobileHeroNext"
aria-label="Slide suivante"
>
›
</button>
<!-- =================================================
DOTS
================================================== -->
<div
class="afg-mh-dots"
id="afgMobileHeroDots"
></div>
</div>
</div>
<script>
(function(){
"use strict";
/* =====================================================
UNIQUE ROOT
===================================================== */
var root =
document.getElementById(
"afgMobileHero2026"
);
if(!root){
return;
}
/* =====================================================
PREVENT DOUBLE INITIALIZATION
===================================================== */
if(root.getAttribute("data-afg-ready") === "1"){
return;
}
root.setAttribute(
"data-afg-ready",
"1"
);
/* =====================================================
ELEMENTS
===================================================== */
var track =
document.getElementById(
"afgMobileHeroTrack"
);
if(!track){
return;
}
var slides =
track.querySelectorAll(
".afg-mh-slide"
);
var prev =
document.getElementById(
"afgMobileHeroPrev"
);
var next =
document.getElementById(
"afgMobileHeroNext"
);
var dotsWrap =
document.getElementById(
"afgMobileHeroDots"
);
var total =
slides.length;
if(!total){
return;
}
/* =====================================================
STATE
===================================================== */
var current = 0;
var timer = null;
var AUTOPLAY = 5000;
var reduceMotion =
window.matchMedia &&
window.matchMedia(
"(prefers-reduced-motion: reduce)"
).matches;
/* =====================================================
DOTS
===================================================== */
var dots = [];
for(
var i = 0;
i < total;
i++
){
var dot =
document.createElement(
"button"
);
dot.type = "button";
dot.className =
"afg-mh-dot";
dot.setAttribute(
"aria-label",
"Aller à la slide " +
(i + 1)
);
dot.setAttribute(
"data-active",
i === 0 ? "true" : "false"
);
(function(index){
dot.addEventListener(
"click",
function(e){
e.preventDefault();
e.stopPropagation();
goTo(index);
restart();
}
);
})(i);
dotsWrap.appendChild(dot);
dots.push(dot);
}
/* =====================================================
NORMALIZE
===================================================== */
function normalize(index){
index =
index % total;
if(index < 0){
index += total;
}
return index;
}
/* =====================================================
ACTIVE DOT
===================================================== */
function setActive(index){
current =
normalize(index);
for(
var i = 0;
i < dots.length;
i++
){
dots[i].setAttribute(
"data-active",
i === current
? "true"
: "false"
);
}
}
/* =====================================================
GO TO
===================================================== */
function goTo(index){
index =
normalize(index);
var target =
slides[index];
if(!target){
return;
}
track.scrollTo({
left:
target.offsetLeft,
behavior:
reduceMotion
? "auto"
: "smooth"
});
setActive(index);
}
/* =====================================================
NEXT
===================================================== */
function goNext(){
goTo(
current + 1
);
}
/* =====================================================
PREVIOUS
===================================================== */
function goPrevious(){
goTo(
current - 1
);
}
/* =====================================================
ARROWS
===================================================== */
if(prev){
prev.addEventListener(
"click",
function(e){
e.preventDefault();
e.stopPropagation();
goPrevious();
restart();
}
);
}
if(next){
next.addEventListener(
"click",
function(e){
e.preventDefault();
e.stopPropagation();
goNext();
restart();
}
);
}
/* =====================================================
MANUAL SWIPE DETECTION
NATIVE SCROLL-SNAP DOES THE REAL WORK
===================================================== */
var scrollTimer = null;
track.addEventListener(
"scroll",
function(){
clearTimeout(
scrollTimer
);
scrollTimer =
setTimeout(
function(){
var width =
track.clientWidth;
if(!width){
return;
}
var index =
Math.round(
track.scrollLeft /
width
);
index =
Math.max(
0,
Math.min(
total - 1,
index
)
);
setActive(index);
},
80
);
},
{
passive:true
}
);
/* =====================================================
AUTOPLAY
===================================================== */
function stop(){
if(timer !== null){
clearInterval(timer);
timer = null;
}
}
function start(){
stop();
if(
reduceMotion ||
total < 2 ||
document.hidden
){
return;
}
timer =
setInterval(
function(){
goNext();
},
AUTOPLAY
);
}
function restart(){
stop();
start();
}
/* =====================================================
PAUSE WHILE USER TOUCHES
===================================================== */
track.addEventListener(
"touchstart",
function(){
stop();
},
{
passive:true
}
);
track.addEventListener(
"touchend",
function(){
setTimeout(
function(){
start();
},
1200
);
},
{
passive:true
}
);
/* =====================================================
KEYBOARD
===================================================== */
track.addEventListener(
"keydown",
function(e){
if(
e.key ===
"ArrowRight"
){
e.preventDefault();
goNext();
restart();
}
if(
e.key ===
"ArrowLeft"
){
e.preventDefault();
goPrevious();
restart();
}
}
);
/* =====================================================
PAGE VISIBILITY
===================================================== */
document.addEventListener(
"visibilitychange",
function(){
if(document.hidden){
stop();
}else{
start();
}
}
);
/* =====================================================
RESIZE
===================================================== */
var resizeTimer = null;
window.addEventListener(
"resize",
function(){
clearTimeout(
resizeTimer
);
resizeTimer =
setTimeout(
function(){
goTo(current);
},
150
);
}
);
/* =====================================================
INITIAL
===================================================== */
setActive(0);
goTo(0);
start();
})();
</script>
