index.js

let partnershipData = [
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/1516992/Image/1660817736_078_commonarea_07_min.jpg",
    title: "GOSTOPS",
    description:
      "Experience The Best Of Monsoon With These Trendy GoSTOPS Stays Under Rs 2,000",
  },
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/1516992/Image/1659608221_d0f7de4a_b1d9_40e0_bba0_d0527a824e78.jpg",
    title: "GOSTOPS",
    description:
      "Experience The Best Of Monsoon With These Trendy GoSTOPS Stays Under Rs 2,000",
  },
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/1516992/Image/1660808085_shutterstock_1611239635_min.jpg",
    title: "GOSTOPS",
    description:
      "Experience The Best Of Monsoon With These Trendy GoSTOPS Stays Under Rs 2,000",
  },
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/1516992/Image/1660310642_j_1.jpg",
    title: "GOSTOPS",
    description:
      "Experience The Best Of Monsoon With These Trendy GoSTOPS Stays Under Rs 2,000",
  },
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/1516992/Image/1660628672_131902158_8404856472920890_2578227520681040006_n.jpg",
    title: "GOSTOPS",
    description:
      "Experience The Best Of Monsoon With These Trendy GoSTOPS Stays Under Rs 2,000",
  },
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/1516992/Image/1653562686_275721311_336154091889496_2451172917242741439_n.jpg",
    title: "GOSTOPS",
    description:
      "Experience The Best Of Monsoon With These Trendy GoSTOPS Stays Under Rs 2,000",
  },
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/1516992/Image/1658236943_1200px_har_ki_dun.jpg",
    title: "GOSTOPS",
    description:
      "Experience The Best Of Monsoon With These Trendy GoSTOPS Stays Under Rs 2,000",
  },
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/1516992/Image/1659609068_292964698_360983962777135_5575874099652238243_n.jpg",
    title: "GOSTOPS",
    description:
      "Experience The Best Of Monsoon With These Trendy GoSTOPS Stays Under Rs 2,000",
  },
];

let augSepData1 = [
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/2215463/Image/1658862164_1455274435_udaipur3_jpg.jpg",
    description: "Tripotos best Destination Of Month: Udaipur",
    name: "Tripoto",
  },
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/2215463/Image/1659027857_1658481747_depositphotos_95512066_stock_illustration_incredible_india_background.jpeg",
    description: "Tripotos best Destination Of Month: Udaipur",
    name: "Tripoto",
  },
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/2215463/Image/1658862269_1467796889_1467796887893_5_2.jpg",
    description: "Tripotos best Destination Of Month: Udaipur",
    name: "Tripoto",
  },
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/2215463/Image/1658863582_1657213046_satyan_chawla_pti5yh3a4l8_unsplash.jpg",
    description: "Tripotos best Destination Of Month: Udaipur",
    name: "Tripoto",
  },
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/2215463/Image/1658862360_1470344082_14410876714_8fb5c0e392_o.png",
    description: "Tripotos best Destination Of Month: Udaipur",
    name: "Tripoto",
  },
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/2215463/Image/1658862537_1658847371_mg_7852.jpg",
    description: "Tripotos best Destination Of Month: Udaipur",
    name: "Tripoto",
  },
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/2215463/Image/1656331454_1560494791_motorcycle_2937056_1280.jpg",
    description: "Tripotos best Destination Of Month: Udaipur",
    name: "Tripoto",
  },
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/2215463/Image/1656331979_1465388810_mussoorie_goa_634.jpg",
    description: "Tripotos best Destination Of Month: Udaipur",
    name: "Tripoto",
  },
];

let augSepData2 = [
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/2215463/Image/1658864126_1657780099_cover1.jpg",
    description: "Tripotos best Destination Of Month: Udaipur",
    name: "Tripoto",
  },
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/2215463/Image/1658863969_1493707507_15798144758_5a93457ae4_o.jpg",
    description: "Tripotos best Destination Of Month: Udaipur",
    name: "Tripoto",
  },
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/2215463/Image/1653585757_1648645960_5.jpg",
    description: "Tripotos best Destination Of Month: Udaipur",
    name: "Tripoto",
  },
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/2215463/Image/1651046452_1545558276_erdap_2129568_1280.jpg",
    description: "Tripotos best Destination Of Month: Udaipur",
    name: "Tripoto",
  },
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/2215463/Image/1651046452_1545558276_erdap_2129568_1280.jpg",
    description: "Tripotos best Destination Of Month: Udaipur",
    name: "Tripoto",
  },
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/2215463/Image/1658863871_1499420095_800px_kawah_ijen_ijen_crater_7540434086.jpg",
    description: "Tripotos best Destination Of Month: Udaipur",
    name: "Tripoto",
  },
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/2215463/Image/1658864265_1658819571_9.jpg",
    description: "Tripotos best Destination Of Month: Udaipur",
    name: "Tripoto",
  },
  {
    img: "https://cdn1.tripoto.com/media/filter/tst/img/2215463/Image/1658864365_1529568428_1469857553_1.jpg",
    description: "Tripotos best Destination Of Month: Udaipur",
    name: "Tripoto",
  },
];

let nexBtn = document.getElementById("next");
nexBtn.addEventListener("click", () => {
  next(partnershipData);
  console.log("clicked me");
});

let next = (arr) => {
  document.getElementById("divs").innerHTML = null;
  for (let i = 4; i < arr.length; i++) {
    let div = document.createElement("div");
    let imge = document.createElement("img");
    imge.src = arr[i].img;
    let name = document.createElement("h4");
    name.innerText = arr[i].title;
    let p = document.createElement("h5");
    p.innerText = arr[i].description;
    div.append(imge, name, p);
    document.getElementById("divs").append(div);
  }
  nexBtn.style.visibility = "hidden";
  preBtn.style.visibility = "visible";
};

let preBtn = document.getElementById("prev");
preBtn.addEventListener("click", () => {
  prev(partnershipData);
  console.log("clicked me");
});
preBtn.style.visibility = "hidden";
let prev = (arr) => {
  document.getElementById("divs").innerHTML = null;
  for (let i = 0; i < 4; i++) {
    let div = document.createElement("div");
    let imge = document.createElement("img");
    imge.src = arr[i].img;
    let name = document.createElement("h4");
    name.innerText = arr[i].title;
    let p = document.createElement("h5");
    p.innerText = arr[i].description;
    div.append(imge, name, p);
    document.getElementById("divs").append(div);
  }
  preBtn.style.visibility = "hidden";
  nexBtn.style.visibility = "visible";
};

// This is for the first slidder

let nexBtn1 = document.getElementById("next1");

nexBtn1.addEventListener("click", () => {
  next1(augSepData1);
  console.log("clicked me");
});

let next1 = (arr) => {
  console.log(arr);
  document.getElementById("divs1").innerHTML = null;
  for (let i = 4; i < arr.length; i++) {
    let div = document.createElement("div");
    let imge = document.createElement("img");
    imge.src = arr[i].img;
    let name = document.createElement("h4");
    name.innerText = arr[i].description;
    let p = document.createElement("p");
    p.innerText = `By ${arr[i].name}`;
    div.append(imge, name, p);
    document.getElementById("divs1").append(div);
  }
  nexBtn1.style.visibility = "hidden";
  preBtn1.style.visibility = "visible";
};

let preBtn1 = document.getElementById("prev1");
preBtn1.addEventListener("click", () => {
  prev1(augSepData1);
  console.log("clicked me");
});
preBtn1.style.visibility = "hidden";
let prev1 = (arr) => {
  document.getElementById("divs1").innerHTML = null;
  for (let i = 0; i < 4; i++) {
    let div = document.createElement("div");
    let imge = document.createElement("img");
    imge.src = arr[i].img;
    let name = document.createElement("h4");
    name.innerText = arr[i].description;
    let p = document.createElement("p");
    p.innerText = `By ${arr[i].name}`;
    div.append(imge, name, p);
    document.getElementById("divs1").append(div);
  }
  preBtn1.style.visibility = "hidden";
  nexBtn1.style.visibility = "visible";
};

// Below is for the second slider

let nexBtn2 = document.getElementById("next2");

nexBtn2.addEventListener("click", () => {
  next2(augSepData2);
  console.log("clicked me");
});

let next2 = (arr) => {
  console.log(arr);
  document.getElementById("divs2").innerHTML = null;
  for (let i = 4; i < arr.length; i++) {
    let div = document.createElement("div");
    let imge = document.createElement("img");
    imge.src = arr[i].img;
    let name = document.createElement("h4");
    name.innerText = arr[i].description;
    let p = document.createElement("p");
    p.innerText = `By ${arr[i].name}`;
    div.append(imge, name, p);
    document.getElementById("divs2").append(div);
  }
  nexBtn2.style.visibility = "hidden";
  preBtn2.style.visibility = "visible";
};

let preBtn2 = document.getElementById("prev2");
preBtn2.addEventListener("click", () => {
  prev2(augSepData2);
  console.log("clicked me");
});
preBtn2.style.visibility = "hidden";
let prev2 = (arr) => {
  document.getElementById("divs2").innerHTML = null;
  for (let i = 0; i < 4; i++) {
    let div = document.createElement("div");
    let imge = document.createElement("img");
    imge.src = arr[i].img;
    let name = document.createElement("h4");
    name.innerText = arr[i].description;
    let p = document.createElement("p");
    p.innerText = `By ${arr[i].name}`;
    div.append(imge, name, p);
    document.getElementById("divs2").append(div);
  }
  preBtn2.style.visibility = "hidden";
  nexBtn2.style.visibility = "visible";
};