if (document.querySelector(".index")) {
let yStyle = document.createElement("style");
yStyle.innerHTML = `
.y-links ,
.y-feat{
margin: 40px 0px 20px;
padding: 0px 15px;
}
.y-links .y-links-container {
display: grid;
grid-template-columns: repeat(5, minmax(0px, 500px));
gap: 10px;
justify-content: center;
align-items: start;
}
@media (max-width: 1024px) {
.y-links .y-links-container {
grid-template-columns: repeat(3, minmax(0px, 1fr));
}
}
.y-links-container a ,
.y-feat-container a {
display: flex;
width: 100%;
justify-content: center;
transition: .3s linear;
}
.y-links-container a img ,
.y-feat-container a img{
max-width: 100%;
}
.y-links-container a:hover ,
.y-feat-container a:hover {
transform: scale(1.04);
}
/* features section styles */
.y-feat .y-feat-container {
display: grid;
grid-template-columns: repeat(3, minmax(0px, 600px));
gap: 10px;
justify-content: center;
align-items: start;
}
@media (max-width: 1024px) {
.y-feat .y-feat-container {
grid-template-columns: repeat(2, minmax(0px, 1fr));
}
.y-feat-container a:nth-of-type(2) {
grid-row: 1;
grid-column: span 2;
}
}
`;
document.head.appendChild(yStyle);
let linksCont = document.createElement("div");
linksCont.classList.add("y-links");
linksCont.innerHTML = `
`;
document.querySelectorAll(".s-block--fixed-banner")[0].after(linksCont);
// features sections
let ftCont = document.createElement("div");
ftCont.classList.add("y-feat");
ftCont.innerHTML = `
`;
document.querySelector("footer").before(ftCont);
}
setTimeout(() => {
let sl2 = document.createElement("li");
sl2.classList.add("s-social-link");
sl2.innerHTML = `
`;
let sl1 = document.createElement("li");
sl1.classList.add("s-social-link");
sl1.innerHTML = `
`;
document.querySelectorAll(".s-social-list")[0].append(sl2);
document.querySelectorAll(".s-social-list")[1].append(sl1);
},1000)
const carImages = [
{ slug: "/اودي", url: "https://i.postimg.cc/nrjZ0NRg/png-transparent-audi-logo-audi-a3-car-emblem-logo-audi-car-logo-brand-text-candle-automobile-repair.png" },
{ slug: "/بي-ام-دبليو/c86747298", url: "https://i.postimg.cc/qBSpzMgT/png-transparent-bmw-car-logo-bmw-logo-trademark-logo-desktop-wallpaper-thumbnail.png" },
{ slug: "/تويوتا/c1426028977", url: "https://i.postimg.cc/vTJyjXCB/png-transparent-car-dealership-toyota-honda-logo-used-car-car-emblem-trademark-logo-thumbnail.png" },
{ slug: "/جيب/c1749635752", url: "https://i.postimg.cc/W12pPYhF/png-transparent-car-logo-jeep-logos-2018-jeep-grand-cherokee-jeep-cherokee-text-number-thumbnail.png" },
{ slug: null, url: "https://i.postimg.cc/dtCwdPTT/png-transparent-cars-mater-lightning-mcqueen-pixar-disney-cars-logo-emblem-logo-car-thumbnail.png" },
{ slug: null, url: "https://i.postimg.cc/RF0vnWcM/png-transparent-chery-qq3-car-dongfeng-motor-corporation-logo-car-thumbnail.png" },
{ slug: null, url: "https://i.postimg.cc/nhtZGRvS/png-transparent-chevrolet-impala-car-general-motors-logo-chevrolet-logo-car-desktop-wallpaper-thumbn.png" },
{ slug: null, url: "https://i.postimg.cc/Dwdhjr6v/png-transparent-citroen-car-logo-brand-angle-candle-activity-thumbnail.png" },
{ slug: "/دودج/c1283921070", url: "https://i.postimg.cc/YSrHJvD1/png-transparent-dodge-ram-logo-dodge-ram-pickup-logo-symbol-car-dodge-angle-emblem-text-thumbnail.png" },
{ slug: null, url: "https://i.postimg.cc/rmb20QVJ/png-transparent-fiat-automobiles-car-chrysler-fiat-500-cars-logo-brands-emblem-trademark-logo-thumbn.png" },
{ slug: "/فورد/c1458616227", url: "https://i.postimg.cc/43WgZXjj/png-transparent-ford-motor-company-car-ford-mustang-ford-mondeo-ford-car-logo-brand-emblem-text-labe.png" },
{ slug: null, url: "https://i.postimg.cc/gJrP2fWj/png-transparent-hino-logo-hino-motors-toyota-car-hino-contessa-truck-the-lock-of-the-car-emblem-comp.png" },
{ slug: "/هونداي/c1924855213", url: "https://i.postimg.cc/3Nv5gmWH/png-transparent-honda-logo-car-honda-s2000-honda-car-logo-brand-compact-car-angle-emblem-thumbnail.png" },
{ slug: "/هونداي/c1924855213", url: "https://i.postimg.cc/Y9yMNt3Q/png-transparent-hyundai-motor-company-car-logo-hyundai-emblem-text-trademark-thumbnail.png" },
{ slug: null, url: "https://i.postimg.cc/K8Fj8vsY/png-transparent-lamborghini-logo-lamborghini-sports-car-audi-logo-lamborghini-emblem-car-gold-thumbn.png" },
{ slug: "/مازدا/c1035873446", url: "https://i.postimg.cc/nVjCdWDn/png-transparent-mazda-logo-mazda3-car-mazda-capella-mazda-cx-5-mazda-car-logo-brand-emblem-trademark.png" },
{ slug: "/ميتسوبيشي/c974549417", url: "https://i.postimg.cc/vDwRXT6x/png-transparent-mitsubishi-motors-logo-car-mitsubishi-angle-text-rectangle-thumbnail.png" },
{ slug: null, url: "https://i.postimg.cc/Df9mRcrL/png-transparent-mustang-logo-car-logos-thumbnail.png" },
{ slug: "/نيسان/c726567329", url: "https://i.postimg.cc/jdyCTJc9/png-transparent-nissan-logo-nissan-altima-car-nissan-titan-nissan-quest-nissan-nissan-car-standard-l.png" },
{ slug: null, url: "https://i.postimg.cc/Nj4M9qWk/png-transparent-opel-logo-logo-opel-brand-emblem-opel-car-logo-brand-angle-text-trademark-thumbnail.png" },
{ slug: null, url: "https://i.postimg.cc/GpgmKP3B/png-transparent-peugeot-logo-peugeot-logo-peugeot-car-logo-brand-white-text-monochrome-thumbnail.png" },
{ slug: "/بورش/c866574004", url: "https://i.postimg.cc/ncKVgfcf/png-transparent-porsche-911-car-porsche-944-porsche-car-logo-brand-emblem-label-candle-thumbnail.png" },
{ slug: null, url: "https://i.postimg.cc/GpmpvgRw/png-transparent-red-and-white-bugatti-logo-2011-bugatti-veyron-car-logo-bugatti-chiron-bugatti-logo.png" },
{ slug: null, url: "https://i.postimg.cc/50HNRHjs/png-transparent-renault-logo-renault-symbol-jaguar-cars-peugeot-renault-angle-logo-car-thumbnail.png" },
{ slug: null, url: "https://i.postimg.cc/tRx4dVKT/png-transparent-skoda-auto-logo-koda-auto-car-logo-volkswagen-group-skoda-logo-emblem-sign-koda-fa.png" },
{ slug: null, url: "https://i.postimg.cc/GhnhXmRj/png-transparent-subaru-logo-subaru-impreza-wrx-car-subaru-xv-fuji-heavy-industries-car-logo-emblem-t.png" },
{ slug: "/سزوكي/c650483890", url: "https://i.postimg.cc/0jD59LYm/png-transparent-suzuki-sj-car-suzuki-swift-logo-suzuki-text-motorcycle-business-thumbnail.png" },
{ slug: "/فولكس-واجن/c691354551", url: "https://i.postimg.cc/YCbr2NWX/png-transparent-volkswagen-group-car-logo-volkswagen-car-logo-brand-emblem-trademark-volkswagen-thum.png" },
{ slug: null, url: "https://i.postimg.cc/25yz1qdC/png-transparent-volvo-emblem-ab-volvo-volvo-cars-logo-volvo-logo-emblem-text-trademark-thumbnail.png" },
{ slug: null, url: "https://i.postimg.cc/HkJbDtjg/png-transparent-cars-logo-lightning-mcqueen-cars-pixar-the-walt-disney-company-logo-seat-transport-f.png" }
];
const style = document.createElement("style");
style.textContent = `
.cars-section {
margin: 40px 0;
padding: 0 15px;
overflow: hidden;
width: 100%;
height: auto;
direction: ltr;
}
.carousel-container {
position: relative;
width: 100%;
}
.carousel-track {
display: flex;
transition: transform 0.5s ease-in-out;
height:auto;
}
.carousel-slide-group {
display: flex;
flex-wrap: wrap;
flex: 0 0 100%;
}
.carousel-slide {
flex: 0 0 20%;
box-sizing: border-box;
height: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.carousel-slide img {
max-width: 90%;
max-height: 100px;
object-fit: contain;
transition: 0.3s ease;
}
.carousel-slide img:hover {
transform: scale(1.1);
}
.carousel-buttons {
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
}
.carousel-buttons button {
background: rgba(0,0,0,0.5);
color: white;
border: none;
font-size: 20px;
padding: 4px 12px;
cursor: pointer;
border-radius: 50%;
}
/* Desktop */
@media(min-width: 1028px){
.cars-section {
height: auto;
padding:10px 0;
}
.carousel-slide-group {
display: flex;
flex-wrap: wrap;
flex: 0 0 100%;
height:440px!important;
}
.carousel-slide {
flex: 0 0 20%;
margin:10px 0;
}
.carousel-slide img {
max-height: 100px;
}
}
/* Tablet */
@media(max-width: 1027px) {
.cars-section {
height: auto;
}
.carousel-slide {
flex: 0 0 20%;
margin:5px 0;
}
.carousel-slide img {
max-height: 90px;
}
}
/* Mobile */
@media(max-width: 768px){
.cars-section {
margin: 10px 0;
height: auto;
}
.carousel-slide {
flex: 0 0 20%;
}
.carousel-slide img {
max-height: 70px;
}
.carousel-buttons button {
display: none;
}
}
@media(max-width: 480px){
.carousel-slide {
flex: 0 0 20%;
height: auto;
}
.carousel-slide img {
max-height: 60px;
}
}
`;
document.head.appendChild(style);
// 1. Create section
const section = document.createElement("div");
section.className = "cars-section";
section.innerHTML = `
`;
document.querySelector(".y-links")?.after(section);
const track = section.querySelector(".carousel-track");
const logosPerGroup = 10;
for (let i = 0; i < carImages.length; i += logosPerGroup) {
const group = document.createElement("div");
group.className = "carousel-slide-group";
const groupImages = carImages.slice(i, i + logosPerGroup);
groupImages.forEach(car => {
const slide = document.createElement("div");
slide.className = "carousel-slide";
if (car.slug) {
slide.innerHTML = `
`;
} else {
slide.innerHTML = ``;
}
group.appendChild(slide);
});
while (group.children.length < logosPerGroup) {
const empty = document.createElement("div");
empty.className = "carousel-slide";
group.appendChild(empty);
}
track.appendChild(group);
}
// 3. Slide logic
const slideGroups = track.children;
let currentIndex = 0;
function updateSlider() {
track.style.transform = `translateX(-${currentIndex * 100}%)`;
}
section.querySelector("#next").addEventListener("click", () => {
currentIndex = (currentIndex + 1) % slideGroups.length;
updateSlider();
});
section.querySelector("#prev").addEventListener("click", () => {
currentIndex = (currentIndex - 1 + slideGroups.length) % slideGroups.length;
updateSlider();
});
// Optional autoplay
setInterval(() => {
currentIndex = (currentIndex + 1) % slideGroups.length;
updateSlider();
}, 4000);
// Initial load
updateSlider();
