<\/p>\r\n
Here is the code:<\/p>\r\n
<style type=\"text\/css\">\r\n #slidercontainer {\r\n display: flex;\r\n overflow: hidden;\r\n}\r\n\r\n#slidercontainer .item {\r\n flex: 1 0 20%;\r\n border: 1px solid #ccc;\r\n padding: 10px;\r\n box-sizing: border-box;\r\n}\r\n\r\n#slidercontainer .hide {\r\n display: none;\r\n}\r\n<\/style>\r\n<div id=\"slidercontainer\">\r\n <div class=\"item\">Item 1<\/div>\r\n <div class=\"item\">Item 2<\/div>\r\n <div class=\"item\">Item 3<\/div>\r\n <div class=\"item\">Item 4<\/div>\r\n <div class=\"item\">Item 5<\/div>\r\n <div class=\"item\">Item 6<\/div>\r\n <div class=\"item\">Item 7<\/div>\r\n <div class=\"item\">Item 8<\/div>\r\n <div class=\"item\">Item 9<\/div>\r\n <div class=\"item\">Item 10<\/div>\r\n<\/div>\r\n<button id=\"prevButton\">Previous<\/button>\r\n<button id=\"nextButton\">Next<\/button>\r\n\r\n<script type=\"text\/javascript\">\r\nconst container = document.getElementById('container');\r\nconst items = document.querySelectorAll('.item');\r\nconst nextButton = document.getElementById('nextButton');\r\nconst prevButton = document.getElementById('prevButton');\r\nconst itemsPerPage = 5;\r\nlet currentPage = 1;\r\nlet totalPages = Math.ceil(items.length \/ itemsPerPage);\r\n\r\nfunction showPage(page) {\r\n const startIndex = (page - 1) * itemsPerPage;\r\n const endIndex = startIndex + itemsPerPage;\r\n\r\n items.forEach((item, index) => {\r\n if (index >= startIndex && index < endIndex) {\r\n item.classList.remove('hide');\r\n } else {\r\n item.classList.add('hide');\r\n }\r\n });\r\n currentPage = page;\r\n updateButtonStates();\r\n}\r\n\r\nfunction showNextPage() {\r\n if (currentPage < totalPages) {\r\n showPage(currentPage + 1);\r\n }\r\n}\r\n\r\nfunction showPreviousPage() {\r\n if (currentPage > 1) {\r\n showPage(currentPage - 1);\r\n }\r\n}\r\n\r\nfunction updateButtonStates() {\r\n nextButton.disabled = currentPage === totalPages;\r\n prevButton.disabled = currentPage === 1;\r\n}\r\nnextButton.addEventListener('click', showNextPage);\r\nprevButton.addEventListener('click', showPreviousPage);\r\nitems.forEach((item) => item.classList.add('hide'));\r\nshowPage(1);\r\n<\/script><\/code><\/pre>","category_id":"10","is_private":"0","created_at":"2023-06-22T06:53:32.000000Z","updated_at":"2023-06-22T06:53:32.000000Z","category":{"id":10,"user_id":"1","name":"CSS","slug":"css-a43c","parent_id":null,"created_at":"2023-03-21T01:17:14.000000Z","updated_at":"2023-03-21T01:17:14.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":" Here is the code: <style type=\"text\/css\"> #slidercontainer { display: flex; overflow: hidden; } #slidercontainer .item { fle - Custom pure html javascript slider (Updated: June 22, 2023) - Read more about Custom pure html javascript slider at my programming site [SITE]","categories":[]}