Blog Carousel<\/title>\r\n<\/head>\r\n<body>\r\n <section class=\"recent-news\">\r\n \r\n \r\n \r\n \r\n <div class=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\">\r\n <div class=\"blog-post\">\r\n <div class=\"date-box\">\r\n <span class=\"date\">23<\/span>\r\n <span class=\"month\">\u0646\u0648\u0641\u0645\u0628\u0631<\/span>\r\n <\/div>\r\n <div class=\"content\">\r\n <h3>Title here…<\/h3>\r\n <p>Content here……<\/p>\r\n <a href=\"https:\/\/arabian-supplies.com\/ar\/title-here\/\" class=\"read-more\">< \u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f<\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n \r\n \r\n <div class=\"blog-post\">\r\n <div class=\"date-box\">\r\n <span class=\"date\">26<\/span>\r\n <span class=\"month\">\u0633\u0628\u062a\u0645\u0628\u0631<\/span>\r\n <\/div>\r\n <div class=\"content\">\r\n <h3>\u0644\u0648\u0631\u064a\u0645 \u0625\u064a\u0628\u0633\u0648\u0645 \u062f\u0648\u0644\u0648\u0631 \u0627\u062c\u0644\u0633 \u0623\u0648\u0648<\/h3>\r\n <p>\u0627\u0644\u062a\u063a\u0630\u064a\u0629 \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u0633\u0641\u0631. \u064a\u0634\u0645\u0644 \u0630\u0644\u0643 \u0627\u0644\u0641\u0646\u0627\u062f\u0642\u060c \u0648\u062e\u062f\u0645\u0627\u062a \u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0637\u0639\u0627\u0645\u060c \u0648\u0645\u0637\u0627\u0639\u0645 \u0627\u0644\u0648\u062c\u0628\u0627\u062a \u0627\u0644\u0633\u0631\u064a\u0639\u0629\u060c \u0648\u0627\u0644\u0647\u064a\u0626\u0627\u062a \u0627\u0644\u062d\u0643\u0648\u0645\u064a\u0629\u060c \u0648\u0634\u0631\u0643\u0627\u062a \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0631\u0627\u0641\u0642\u060c \u0648\u0627\u0644\u0645\u0624\u0633\u0633\u0627\u062a \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629\u060c \u0648\u0627\u0644\u0645\u0646\u0634\u0622\u062a \u0627\u0644\u0635\u062d\u064a\u0629\u060c \u0648\u062e\u062f\u0645\u0627\u062a \u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0637\u0639\u0627\u0645<\/p>\r\n <a href=\"https:\/\/arabian-supplies.com\/ar\/lorem-ipsum-dolor-sit-amet\/\" class=\"read-more\">< \u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f<\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n \r\n \r\n <div class=\"blog-post\">\r\n <div class=\"date-box\">\r\n <span class=\"date\">25<\/span>\r\n <span class=\"month\">\u0633\u0628\u062a\u0645\u0628\u0631<\/span>\r\n <\/div>\r\n <div class=\"content\">\r\n <h3>\u0627\u0644\u0623\u062e\u0628\u0627\u0631 \u0627\u0644\u0623\u062e\u064a\u0631\u0629<\/h3>\r\n <p>\u062c\u0627\u0631\u064d \u062a\u062c\u0631\u0628\u0629 \u0625\u0636\u0627\u0641\u0629 \u0622\u062e\u0631 \u0627\u0644\u0623\u062e\u0628\u0627\u0631...<\/p>\r\n <a href=\"https:\/\/arabian-supplies.com\/ar\/lorem-ipsum-dolor-sit-amet-6\/\" class=\"read-more\">< \u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f<\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n \r\n \r\n <div class=\"blog-post\">\r\n <div class=\"date-box\">\r\n <span class=\"date\">23<\/span>\r\n <span class=\"month\">\u0633\u0628\u062a\u0645\u0628\u0631<\/span>\r\n <\/div>\r\n <div class=\"content\">\r\n <h3>\u0644\u0648\u0631\u064a\u0645 \u0625\u064a\u0628\u0633\u0648\u0645 \u062f\u0648\u0644\u0648\u0631 \u064a\u062c\u0644\u0633 \u0623\u0645\u064a\u062a<\/h3>\r\n <p>\u0627\u0644\u062a\u063a\u0630\u064a\u0629 \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u0633\u0641\u0631. \u064a\u0634\u0645\u0644 \u0630\u0644\u0643 \u0627\u0644\u0641\u0646\u0627\u062f\u0642\u060c \u0648\u062e\u062f\u0645\u0627\u062a \u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0637\u0639\u0627\u0645\u060c \u0648\u0645\u0637\u0627\u0639\u0645 \u0627\u0644\u0648\u062c\u0628\u0627\u062a \u0627\u0644\u0633\u0631\u064a\u0639\u0629\u060c \u0648\u0627\u0644\u0647\u064a\u0626\u0627\u062a \u0627\u0644\u062d\u0643\u0648\u0645\u064a\u0629\u060c \u0648\u0634\u0631\u0643\u0627\u062a \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0631\u0627\u0641\u0642\u060c \u0648\u0627\u0644\u0645\u0624\u0633\u0633\u0627\u062a \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629\u060c \u0648\u0627\u0644\u0645\u0646\u0634\u0622\u062a \u0627\u0644\u0635\u062d\u064a\u0629\u060c \u0648\u062e\u062f\u0645\u0627\u062a \u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0637\u0639\u0627\u0645<\/p>\r\n <a href=\"https:\/\/arabian-supplies.com\/ar\/lorem-ipsum-dolor-sit-amet-5\/\" class=\"read-more\">< \u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f<\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n \r\n \r\n <div class=\"blog-post\">\r\n <div class=\"date-box\">\r\n <span class=\"date\">23<\/span>\r\n <span class=\"month\">\u0633\u0628\u062a\u0645\u0628\u0631<\/span>\r\n <\/div>\r\n <div class=\"content\">\r\n <h3>\u0644\u0648\u0631\u064a\u0645 \u0625\u064a\u0628\u0633\u0648\u0645 \u062f\u0648\u0644\u0648\u0631 \u064a\u062c\u0644\u0633 \u0623\u0645\u064a\u062a<\/h3>\r\n <p>\u0627\u0644\u062a\u063a\u0630\u064a\u0629 \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u0633\u0641\u0631. \u064a\u0634\u0645\u0644 \u0630\u0644\u0643 \u0627\u0644\u0641\u0646\u0627\u062f\u0642\u060c \u0648\u062e\u062f\u0645\u0627\u062a \u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0637\u0639\u0627\u0645\u060c \u0648\u0645\u0637\u0627\u0639\u0645 \u0627\u0644\u0648\u062c\u0628\u0627\u062a \u0627\u0644\u0633\u0631\u064a\u0639\u0629\u060c \u0648\u0627\u0644\u0647\u064a\u0626\u0627\u062a \u0627\u0644\u062d\u0643\u0648\u0645\u064a\u0629\u060c \u0648\u0634\u0631\u0643\u0627\u062a \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0631\u0627\u0641\u0642\u060c \u0648\u0627\u0644\u0645\u0624\u0633\u0633\u0627\u062a \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629\u060c \u0648\u0627\u0644\u0645\u0646\u0634\u0622\u062a \u0627\u0644\u0635\u062d\u064a\u0629\u060c \u0648\u062e\u062f\u0645\u0627\u062a \u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0637\u0639\u0627\u0645<\/p>\r\n <a href=\"https:\/\/arabian-supplies.com\/ar\/lorem-ipsum-dolor-sit-amet-4\/\" class=\"read-more\">< \u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f<\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n \r\n \r\n <div class=\"blog-post\">\r\n <div class=\"date-box\">\r\n <span class=\"date\">23<\/span>\r\n <span class=\"month\">\u0633\u0628\u062a\u0645\u0628\u0631<\/span>\r\n <\/div>\r\n <div class=\"content\">\r\n <h3>\u0644\u0648\u0631\u064a\u0645 \u0625\u064a\u0628\u0633\u0648\u0645 \u062f\u0648\u0644\u0648\u0631 \u064a\u062c\u0644\u0633 \u0623\u0645\u064a\u062a<\/h3>\r\n <p>\u0627\u0644\u062a\u063a\u0630\u064a\u0629 \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u0633\u0641\u0631. \u064a\u0634\u0645\u0644 \u0630\u0644\u0643 \u0627\u0644\u0641\u0646\u0627\u062f\u0642\u060c \u0648\u062e\u062f\u0645\u0627\u062a \u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0637\u0639\u0627\u0645\u060c \u0648\u0645\u0637\u0627\u0639\u0645 \u0627\u0644\u0648\u062c\u0628\u0627\u062a \u0627\u0644\u0633\u0631\u064a\u0639\u0629\u060c \u0648\u0627\u0644\u0647\u064a\u0626\u0627\u062a \u0627\u0644\u062d\u0643\u0648\u0645\u064a\u0629\u060c \u0648\u0634\u0631\u0643\u0627\u062a \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0631\u0627\u0641\u0642\u060c \u0648\u0627\u0644\u0645\u0624\u0633\u0633\u0627\u062a \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629\u060c \u0648\u0627\u0644\u0645\u0646\u0634\u0622\u062a \u0627\u0644\u0635\u062d\u064a\u0629\u060c \u0648\u062e\u062f\u0645\u0627\u062a \u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0637\u0639\u0627\u0645<\/p>\r\n <a href=\"https:\/\/arabian-supplies.com\/ar\/lorem-ipsum-dolor-sit-amet-3\/\" class=\"read-more\">< \u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f<\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n \r\n \r\n <div class=\"blog-post\">\r\n <div class=\"date-box\">\r\n <span class=\"date\">23<\/span>\r\n <span class=\"month\">\u0633\u0628\u062a\u0645\u0628\u0631<\/span>\r\n <\/div>\r\n <div class=\"content\">\r\n <h3>\u0644\u0648\u0631\u064a\u0645 \u0625\u064a\u0628\u0633\u0648\u0645 \u062f\u0648\u0644\u0648\u0631 \u064a\u062c\u0644\u0633 \u0623\u0645\u064a\u062a<\/h3>\r\n <p>\u0627\u0644\u062a\u063a\u0630\u064a\u0629 \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u0633\u0641\u0631. \u064a\u0634\u0645\u0644 \u0630\u0644\u0643 \u0627\u0644\u0641\u0646\u0627\u062f\u0642\u060c \u0648\u062e\u062f\u0645\u0627\u062a \u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0637\u0639\u0627\u0645\u060c \u0648\u0645\u0637\u0627\u0639\u0645 \u0627\u0644\u0648\u062c\u0628\u0627\u062a \u0627\u0644\u0633\u0631\u064a\u0639\u0629\u060c \u0648\u0627\u0644\u0647\u064a\u0626\u0627\u062a \u0627\u0644\u062d\u0643\u0648\u0645\u064a\u0629\u060c \u0648\u0634\u0631\u0643\u0627\u062a \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0631\u0627\u0641\u0642\u060c \u0648\u0627\u0644\u0645\u0624\u0633\u0633\u0627\u062a \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629\u060c \u0648\u0627\u0644\u0645\u0646\u0634\u0622\u062a \u0627\u0644\u0635\u062d\u064a\u0629\u060c \u0648\u062e\u062f\u0645\u0627\u062a \u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0637\u0639\u0627\u0645<\/p>\r\n <a href=\"https:\/\/arabian-supplies.com\/ar\/lorem-ipsum-dolor-sit-amet-2\/\" class=\"read-more\">< \u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f<\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n \r\n \r\n <div class=\"blog-post\">\r\n <div class=\"date-box\">\r\n <span class=\"date\">01<\/span>\r\n <span class=\"month\">\u064a\u0648\u0646\u064a\u0648<\/span>\r\n <\/div>\r\n <div class=\"content\">\r\n <h3>\u0622\u062e\u0631 \u0643\u062a\u0644\u0629 \u0627\u0644\u0645\u0646\u0632\u0644<\/h3>\r\n <p>…<\/p>\r\n <a href=\"https:\/\/arabian-supplies.com\/ar\/post-block-home\/\" class=\"read-more\">< \u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f<\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n \r\n <\/div>\r\n \r\n \r\n <\/div>\r\n <div class=\"carousel-indicators\">\r\n \r\n \r\n <span class=\"indicator active\" data-slide=\"1\"><\/span>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n <span class=\"indicator\" data-slide=\"2\"><\/span>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n <span class=\"indicator\" data-slide=\"3\"><\/span>\r\n \r\n \r\n \r\n \r\n \r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const indicators = document.querySelectorAll('.carousel-indicators .indicator');\r\n const carouselInner = document.querySelector('.carousel-inner');\r\n let currentSlide = 0;\r\n\r\n indicators.forEach((indicator, index) => {\r\n indicator.addEventListener('click', () => {\r\n indicators[currentSlide].classList.remove('active');\r\n indicator.classList.add('active');\r\n currentSlide = index;\r\n const offset = -index * 33; \/\/ Adjusted for better slide transition\r\n carouselInner.style.transform = `translateX(${offset}%)`;\r\n });\r\n });\r\n });\r\n <\/script>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700&display=swap');\r\n\r\nbody {\r\n font-family: 'Montserrat', Arial, sans-serif;\r\n background: #f9f9f9;\r\n color: #333;\r\n margin: 0;\r\n padding: 0;\r\n width:100%;\r\n \/*background-image: url('https:\/\/novalabs.18008907990.com\/tadmur\/wp-content\/uploads\/2024\/05\/bg-07-scaled.jpg');*\/\r\n \r\n}\r\n\r\n\r\n.carousel-item.active {\r\n display: flex !important;\r\n}\r\n\r\n\r\n\r\n\r\n.carousel {\r\n position: relative;\r\n overflow: hidden;\r\n padding-top: 20px;\r\n padding-bottom: 50px;\r\n}\r\n\r\n.carousel-inner {\r\n display: flex;\r\n transition: transform 0.5s ease-in-out;\r\n width: 300%; \/* Because we have 2 slides *\/\r\n}\r\n\r\n.carousel-item {\r\n display: flex;\r\n width: 100%; \/* Each slide takes the full width *\/\r\n box-sizing: border-box;\r\n}\r\n\r\n.blog-post {\r\n flex: 1;\r\n background: #fff;\r\n padding: 20px;\r\n \r\n border-radius: 4px;\r\n margin: 0 10px;\r\n \r\n display: flex;\r\n align-items: flex-start;\r\n}\r\n\r\n.date {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 10px;\r\n background: #801518;\r\n color: #fff;\r\n text-align: center;\r\n margin-right: 20px;\r\n\r\n}\r\n.month {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n \r\n background: #fff;\r\n color: #000 !important;\r\n border-bottom: 4px solid silver;\r\n text-align: center;\r\n margin-right: 20px;\r\n\r\n}\r\n\r\n.date-box .date {\r\n font-size: 24px;\r\n font-weight: bold;\r\n}\r\n\r\n.date-box .month {\r\n font-size: 14px;\r\n text-transform: uppercase;\r\n margin-top: 5px;\r\n \r\n}\r\n\r\n.content {\r\n flex: 1;\r\n}\r\n\r\n.content h3 {\r\n margin: 0 0 10px 0;\r\n font-size: 14px;\r\n font-weight: 500;\r\n}\r\n\r\n.content p {\r\n margin: 0 0 20px 0;\r\n color: #808080;\r\n font-size: 12px;\r\n \r\n}\r\n\r\n.read-more {\r\n color: #121212;\r\n text-decoration: none;\r\n font-size: 12px;\r\n}\r\n\r\n.carousel-indicators {\r\n text-align: center;\r\n margin-top: 20px;\r\n}\r\n\r\n.carousel-indicators .indicator {\r\n display: inline-block;\r\n width: 10px;\r\n height: 10px;\r\n background: #ddd;\r\n border-radius: 50%;\r\n margin: 0 5px;\r\n cursor: pointer;\r\n}\r\n\r\n.carousel-indicators .indicator.active {\r\n background: #801518;\r\n}\r\n\r\n\/* Responsive styles *\/\r\n@media (max-width: 768px) {\r\n .carousel-inner {\r\n width: 100%; \/* Because we have 2 slides *\/\r\n }\r\n\r\n .carousel-item {\r\n width: 100%; \/* Each slide takes the full width *\/\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .carousel-inner {\r\n width: 450%; \/* Adjusted for simpler management *\/\r\n }\r\n\r\n .carousel-item {\r\n width:450%; \/* Each slide takes the full width *\/\r\n }\r\n\r\n .blog-post {\r\n margin: 0 5px; \/* Adjust the margin for smaller screens *\/\r\n }\r\n}\r\n<\/style>\r\n<\/body>\r\n<\/html>\r\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[31],"class_list":["post-4221","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-home-page-block"],"_links":{"self":[{"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/posts\/4221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/comments?post=4221"}],"version-history":[{"count":1,"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/posts\/4221\/revisions"}],"predecessor-version":[{"id":6935,"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/posts\/4221\/revisions\/6935"}],"wp:attachment":[{"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/media?parent=4221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/categories?post=4221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/tags?post=4221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\r\n\r\n\r\n \r\n \r\n \r\n Blog Carousel<\/title>\r\n<\/head>\r\n<body>\r\n <section class=\"recent-news\">\r\n \r\n \r\n \r\n \r\n <div class=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\">\r\n <div class=\"blog-post\">\r\n <div class=\"date-box\">\r\n <span class=\"date\">23<\/span>\r\n <span class=\"month\">\u0646\u0648\u0641\u0645\u0628\u0631<\/span>\r\n <\/div>\r\n <div class=\"content\">\r\n <h3>Title here…<\/h3>\r\n <p>Content here……<\/p>\r\n <a href=\"https:\/\/arabian-supplies.com\/ar\/title-here\/\" class=\"read-more\">< \u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f<\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n \r\n \r\n <div class=\"blog-post\">\r\n <div class=\"date-box\">\r\n <span class=\"date\">26<\/span>\r\n <span class=\"month\">\u0633\u0628\u062a\u0645\u0628\u0631<\/span>\r\n <\/div>\r\n <div class=\"content\">\r\n <h3>\u0644\u0648\u0631\u064a\u0645 \u0625\u064a\u0628\u0633\u0648\u0645 \u062f\u0648\u0644\u0648\u0631 \u0627\u062c\u0644\u0633 \u0623\u0648\u0648<\/h3>\r\n <p>\u0627\u0644\u062a\u063a\u0630\u064a\u0629 \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u0633\u0641\u0631. \u064a\u0634\u0645\u0644 \u0630\u0644\u0643 \u0627\u0644\u0641\u0646\u0627\u062f\u0642\u060c \u0648\u062e\u062f\u0645\u0627\u062a \u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0637\u0639\u0627\u0645\u060c \u0648\u0645\u0637\u0627\u0639\u0645 \u0627\u0644\u0648\u062c\u0628\u0627\u062a \u0627\u0644\u0633\u0631\u064a\u0639\u0629\u060c \u0648\u0627\u0644\u0647\u064a\u0626\u0627\u062a \u0627\u0644\u062d\u0643\u0648\u0645\u064a\u0629\u060c \u0648\u0634\u0631\u0643\u0627\u062a \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0631\u0627\u0641\u0642\u060c \u0648\u0627\u0644\u0645\u0624\u0633\u0633\u0627\u062a \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629\u060c \u0648\u0627\u0644\u0645\u0646\u0634\u0622\u062a \u0627\u0644\u0635\u062d\u064a\u0629\u060c \u0648\u062e\u062f\u0645\u0627\u062a \u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0637\u0639\u0627\u0645<\/p>\r\n <a href=\"https:\/\/arabian-supplies.com\/ar\/lorem-ipsum-dolor-sit-amet\/\" class=\"read-more\">< \u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f<\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n \r\n \r\n <div class=\"blog-post\">\r\n <div class=\"date-box\">\r\n <span class=\"date\">25<\/span>\r\n <span class=\"month\">\u0633\u0628\u062a\u0645\u0628\u0631<\/span>\r\n <\/div>\r\n <div class=\"content\">\r\n <h3>\u0627\u0644\u0623\u062e\u0628\u0627\u0631 \u0627\u0644\u0623\u062e\u064a\u0631\u0629<\/h3>\r\n <p>\u062c\u0627\u0631\u064d \u062a\u062c\u0631\u0628\u0629 \u0625\u0636\u0627\u0641\u0629 \u0622\u062e\u0631 \u0627\u0644\u0623\u062e\u0628\u0627\u0631...<\/p>\r\n <a href=\"https:\/\/arabian-supplies.com\/ar\/lorem-ipsum-dolor-sit-amet-6\/\" class=\"read-more\">< \u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f<\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n \r\n \r\n <div class=\"blog-post\">\r\n <div class=\"date-box\">\r\n <span class=\"date\">23<\/span>\r\n <span class=\"month\">\u0633\u0628\u062a\u0645\u0628\u0631<\/span>\r\n <\/div>\r\n <div class=\"content\">\r\n <h3>\u0644\u0648\u0631\u064a\u0645 \u0625\u064a\u0628\u0633\u0648\u0645 \u062f\u0648\u0644\u0648\u0631 \u064a\u062c\u0644\u0633 \u0623\u0645\u064a\u062a<\/h3>\r\n <p>\u0627\u0644\u062a\u063a\u0630\u064a\u0629 \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u0633\u0641\u0631. \u064a\u0634\u0645\u0644 \u0630\u0644\u0643 \u0627\u0644\u0641\u0646\u0627\u062f\u0642\u060c \u0648\u062e\u062f\u0645\u0627\u062a \u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0637\u0639\u0627\u0645\u060c \u0648\u0645\u0637\u0627\u0639\u0645 \u0627\u0644\u0648\u062c\u0628\u0627\u062a \u0627\u0644\u0633\u0631\u064a\u0639\u0629\u060c \u0648\u0627\u0644\u0647\u064a\u0626\u0627\u062a \u0627\u0644\u062d\u0643\u0648\u0645\u064a\u0629\u060c \u0648\u0634\u0631\u0643\u0627\u062a \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0631\u0627\u0641\u0642\u060c \u0648\u0627\u0644\u0645\u0624\u0633\u0633\u0627\u062a \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629\u060c \u0648\u0627\u0644\u0645\u0646\u0634\u0622\u062a \u0627\u0644\u0635\u062d\u064a\u0629\u060c \u0648\u062e\u062f\u0645\u0627\u062a \u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0637\u0639\u0627\u0645<\/p>\r\n <a href=\"https:\/\/arabian-supplies.com\/ar\/lorem-ipsum-dolor-sit-amet-5\/\" class=\"read-more\">< \u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f<\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n \r\n \r\n <div class=\"blog-post\">\r\n <div class=\"date-box\">\r\n <span class=\"date\">23<\/span>\r\n <span class=\"month\">\u0633\u0628\u062a\u0645\u0628\u0631<\/span>\r\n <\/div>\r\n <div class=\"content\">\r\n <h3>\u0644\u0648\u0631\u064a\u0645 \u0625\u064a\u0628\u0633\u0648\u0645 \u062f\u0648\u0644\u0648\u0631 \u064a\u062c\u0644\u0633 \u0623\u0645\u064a\u062a<\/h3>\r\n <p>\u0627\u0644\u062a\u063a\u0630\u064a\u0629 \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u0633\u0641\u0631. \u064a\u0634\u0645\u0644 \u0630\u0644\u0643 \u0627\u0644\u0641\u0646\u0627\u062f\u0642\u060c \u0648\u062e\u062f\u0645\u0627\u062a \u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0637\u0639\u0627\u0645\u060c \u0648\u0645\u0637\u0627\u0639\u0645 \u0627\u0644\u0648\u062c\u0628\u0627\u062a \u0627\u0644\u0633\u0631\u064a\u0639\u0629\u060c \u0648\u0627\u0644\u0647\u064a\u0626\u0627\u062a \u0627\u0644\u062d\u0643\u0648\u0645\u064a\u0629\u060c \u0648\u0634\u0631\u0643\u0627\u062a \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0631\u0627\u0641\u0642\u060c \u0648\u0627\u0644\u0645\u0624\u0633\u0633\u0627\u062a \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629\u060c \u0648\u0627\u0644\u0645\u0646\u0634\u0622\u062a \u0627\u0644\u0635\u062d\u064a\u0629\u060c \u0648\u062e\u062f\u0645\u0627\u062a \u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0637\u0639\u0627\u0645<\/p>\r\n <a href=\"https:\/\/arabian-supplies.com\/ar\/lorem-ipsum-dolor-sit-amet-4\/\" class=\"read-more\">< \u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f<\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n \r\n \r\n <div class=\"blog-post\">\r\n <div class=\"date-box\">\r\n <span class=\"date\">23<\/span>\r\n <span class=\"month\">\u0633\u0628\u062a\u0645\u0628\u0631<\/span>\r\n <\/div>\r\n <div class=\"content\">\r\n <h3>\u0644\u0648\u0631\u064a\u0645 \u0625\u064a\u0628\u0633\u0648\u0645 \u062f\u0648\u0644\u0648\u0631 \u064a\u062c\u0644\u0633 \u0623\u0645\u064a\u062a<\/h3>\r\n <p>\u0627\u0644\u062a\u063a\u0630\u064a\u0629 \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u0633\u0641\u0631. \u064a\u0634\u0645\u0644 \u0630\u0644\u0643 \u0627\u0644\u0641\u0646\u0627\u062f\u0642\u060c \u0648\u062e\u062f\u0645\u0627\u062a \u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0637\u0639\u0627\u0645\u060c \u0648\u0645\u0637\u0627\u0639\u0645 \u0627\u0644\u0648\u062c\u0628\u0627\u062a \u0627\u0644\u0633\u0631\u064a\u0639\u0629\u060c \u0648\u0627\u0644\u0647\u064a\u0626\u0627\u062a \u0627\u0644\u062d\u0643\u0648\u0645\u064a\u0629\u060c \u0648\u0634\u0631\u0643\u0627\u062a \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0631\u0627\u0641\u0642\u060c \u0648\u0627\u0644\u0645\u0624\u0633\u0633\u0627\u062a \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629\u060c \u0648\u0627\u0644\u0645\u0646\u0634\u0622\u062a \u0627\u0644\u0635\u062d\u064a\u0629\u060c \u0648\u062e\u062f\u0645\u0627\u062a \u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0637\u0639\u0627\u0645<\/p>\r\n <a href=\"https:\/\/arabian-supplies.com\/ar\/lorem-ipsum-dolor-sit-amet-3\/\" class=\"read-more\">< \u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f<\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n \r\n \r\n <div class=\"blog-post\">\r\n <div class=\"date-box\">\r\n <span class=\"date\">23<\/span>\r\n <span class=\"month\">\u0633\u0628\u062a\u0645\u0628\u0631<\/span>\r\n <\/div>\r\n <div class=\"content\">\r\n <h3>\u0644\u0648\u0631\u064a\u0645 \u0625\u064a\u0628\u0633\u0648\u0645 \u062f\u0648\u0644\u0648\u0631 \u064a\u062c\u0644\u0633 \u0623\u0645\u064a\u062a<\/h3>\r\n <p>\u0627\u0644\u062a\u063a\u0630\u064a\u0629 \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u0633\u0641\u0631. \u064a\u0634\u0645\u0644 \u0630\u0644\u0643 \u0627\u0644\u0641\u0646\u0627\u062f\u0642\u060c \u0648\u062e\u062f\u0645\u0627\u062a \u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0637\u0639\u0627\u0645\u060c \u0648\u0645\u0637\u0627\u0639\u0645 \u0627\u0644\u0648\u062c\u0628\u0627\u062a \u0627\u0644\u0633\u0631\u064a\u0639\u0629\u060c \u0648\u0627\u0644\u0647\u064a\u0626\u0627\u062a \u0627\u0644\u062d\u0643\u0648\u0645\u064a\u0629\u060c \u0648\u0634\u0631\u0643\u0627\u062a \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0631\u0627\u0641\u0642\u060c \u0648\u0627\u0644\u0645\u0624\u0633\u0633\u0627\u062a \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629\u060c \u0648\u0627\u0644\u0645\u0646\u0634\u0622\u062a \u0627\u0644\u0635\u062d\u064a\u0629\u060c \u0648\u062e\u062f\u0645\u0627\u062a \u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0637\u0639\u0627\u0645<\/p>\r\n <a href=\"https:\/\/arabian-supplies.com\/ar\/lorem-ipsum-dolor-sit-amet-2\/\" class=\"read-more\">< \u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f<\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n \r\n \r\n <div class=\"blog-post\">\r\n <div class=\"date-box\">\r\n <span class=\"date\">01<\/span>\r\n <span class=\"month\">\u064a\u0648\u0646\u064a\u0648<\/span>\r\n <\/div>\r\n <div class=\"content\">\r\n <h3>\u0622\u062e\u0631 \u0643\u062a\u0644\u0629 \u0627\u0644\u0645\u0646\u0632\u0644<\/h3>\r\n <p>…<\/p>\r\n <a href=\"https:\/\/arabian-supplies.com\/ar\/post-block-home\/\" class=\"read-more\">< \u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f<\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n \r\n <\/div>\r\n \r\n \r\n <\/div>\r\n <div class=\"carousel-indicators\">\r\n \r\n \r\n <span class=\"indicator active\" data-slide=\"1\"><\/span>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n <span class=\"indicator\" data-slide=\"2\"><\/span>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n <span class=\"indicator\" data-slide=\"3\"><\/span>\r\n \r\n \r\n \r\n \r\n \r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const indicators = document.querySelectorAll('.carousel-indicators .indicator');\r\n const carouselInner = document.querySelector('.carousel-inner');\r\n let currentSlide = 0;\r\n\r\n indicators.forEach((indicator, index) => {\r\n indicator.addEventListener('click', () => {\r\n indicators[currentSlide].classList.remove('active');\r\n indicator.classList.add('active');\r\n currentSlide = index;\r\n const offset = -index * 33; \/\/ Adjusted for better slide transition\r\n carouselInner.style.transform = `translateX(${offset}%)`;\r\n });\r\n });\r\n });\r\n <\/script>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700&display=swap');\r\n\r\nbody {\r\n font-family: 'Montserrat', Arial, sans-serif;\r\n background: #f9f9f9;\r\n color: #333;\r\n margin: 0;\r\n padding: 0;\r\n width:100%;\r\n \/*background-image: url('https:\/\/novalabs.18008907990.com\/tadmur\/wp-content\/uploads\/2024\/05\/bg-07-scaled.jpg');*\/\r\n \r\n}\r\n\r\n\r\n.carousel-item.active {\r\n display: flex !important;\r\n}\r\n\r\n\r\n\r\n\r\n.carousel {\r\n position: relative;\r\n overflow: hidden;\r\n padding-top: 20px;\r\n padding-bottom: 50px;\r\n}\r\n\r\n.carousel-inner {\r\n display: flex;\r\n transition: transform 0.5s ease-in-out;\r\n width: 300%; \/* Because we have 2 slides *\/\r\n}\r\n\r\n.carousel-item {\r\n display: flex;\r\n width: 100%; \/* Each slide takes the full width *\/\r\n box-sizing: border-box;\r\n}\r\n\r\n.blog-post {\r\n flex: 1;\r\n background: #fff;\r\n padding: 20px;\r\n \r\n border-radius: 4px;\r\n margin: 0 10px;\r\n \r\n display: flex;\r\n align-items: flex-start;\r\n}\r\n\r\n.date {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 10px;\r\n background: #801518;\r\n color: #fff;\r\n text-align: center;\r\n margin-right: 20px;\r\n\r\n}\r\n.month {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n \r\n background: #fff;\r\n color: #000 !important;\r\n border-bottom: 4px solid silver;\r\n text-align: center;\r\n margin-right: 20px;\r\n\r\n}\r\n\r\n.date-box .date {\r\n font-size: 24px;\r\n font-weight: bold;\r\n}\r\n\r\n.date-box .month {\r\n font-size: 14px;\r\n text-transform: uppercase;\r\n margin-top: 5px;\r\n \r\n}\r\n\r\n.content {\r\n flex: 1;\r\n}\r\n\r\n.content h3 {\r\n margin: 0 0 10px 0;\r\n font-size: 14px;\r\n font-weight: 500;\r\n}\r\n\r\n.content p {\r\n margin: 0 0 20px 0;\r\n color: #808080;\r\n font-size: 12px;\r\n \r\n}\r\n\r\n.read-more {\r\n color: #121212;\r\n text-decoration: none;\r\n font-size: 12px;\r\n}\r\n\r\n.carousel-indicators {\r\n text-align: center;\r\n margin-top: 20px;\r\n}\r\n\r\n.carousel-indicators .indicator {\r\n display: inline-block;\r\n width: 10px;\r\n height: 10px;\r\n background: #ddd;\r\n border-radius: 50%;\r\n margin: 0 5px;\r\n cursor: pointer;\r\n}\r\n\r\n.carousel-indicators .indicator.active {\r\n background: #801518;\r\n}\r\n\r\n\/* Responsive styles *\/\r\n@media (max-width: 768px) {\r\n .carousel-inner {\r\n width: 100%; \/* Because we have 2 slides *\/\r\n }\r\n\r\n .carousel-item {\r\n width: 100%; \/* Each slide takes the full width *\/\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .carousel-inner {\r\n width: 450%; \/* Adjusted for simpler management *\/\r\n }\r\n\r\n .carousel-item {\r\n width:450%; \/* Each slide takes the full width *\/\r\n }\r\n\r\n .blog-post {\r\n margin: 0 5px; \/* Adjust the margin for smaller screens *\/\r\n }\r\n}\r\n<\/style>\r\n<\/body>\r\n<\/html>\r\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[31],"class_list":["post-4221","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-home-page-block"],"_links":{"self":[{"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/posts\/4221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/comments?post=4221"}],"version-history":[{"count":1,"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/posts\/4221\/revisions"}],"predecessor-version":[{"id":6935,"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/posts\/4221\/revisions\/6935"}],"wp:attachment":[{"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/media?parent=4221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/categories?post=4221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/tags?post=4221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}