Carousel Slider with TailwindCSS and jQuery

By Axel

I hope you like it. I am almost new to this so I would appreciate any comment. It changes every 8 seconds, unless you click a button. If you do, it lasts 12 seconds and returns to the 8-second loop.

Fork

/r/n <script>\r\n var cont=0;\r\nfunction loopSlider(){\r\n var xx= setInterval(function(){\r\n switch(cont)\r\n {\r\n case 0:{\r\n $(\"#slider-1\").fadeOut(400);\r\n $(\"#slider-2\").delay(400).fadeIn(400);\r\n $(\"#sButton1\").removeClass(\"bg-purple-800\");\r\n $(\"#sButton2\").addClass(\"bg-purple-800\");\r\n cont=1;\r\n \r\n break;\r\n }\r\n case 1:\r\n {\r\n \r\n $(\"#slider-2\").fadeOut(400);\r\n $(\"#slider-1\").delay(400).fadeIn(400);\r\n $(\"#sButton2\").removeClass(\"bg-purple-800\");\r\n $(\"#sButton1\").addClass(\"bg-purple-800\");\r\n \r\n cont=0;\r\n \r\n break;\r\n }\r\n \r\n \r\n }},8000);\r\n\r\n}\r\n\r\nfunction reinitLoop(time){\r\nclearInterval(xx);\r\nsetTimeout(loopSlider(),time);\r\n}\r\n\r\n\r\n\r\nfunction sliderButton1(){\r\n\r\n $(\"#slider-2\").fadeOut(400);\r\n $(\"#slider-1\").delay(400).fadeIn(400);\r\n $(\"#sButton2\").removeClass(\"bg-purple-800\");\r\n $(\"#sButton1\").addClass(\"bg-purple-800\");\r\n reinitLoop(4000);\r\n cont=0\r\n \r\n }\r\n \r\n function sliderButton2(){\r\n $(\"#slider-1\").fadeOut(400);\r\n $(\"#slider-2\").delay(400).fadeIn(400);\r\n $(\"#sButton1\").removeClass(\"bg-purple-800\");\r\n $(\"#sButton2\").addClass(\"bg-purple-800\");\r\n reinitLoop(4000);\r\n cont=1\r\n \r\n }\r\n\r\n $(window).ready(function(){\r\n $(\"#slider-2\").hide();\r\n $(\"#sButton1\").addClass(\"bg-purple-800\");\r\n \r\n\r\n loopSlider();\r\n \r\n \r\n \r\n \r\n \r\n \r\n });\r\n\r\n \r\n <\/script>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"sliderAx h-auto\">\r\n <div id=\"slider-1\" class=\"container mx-auto\">\r\n <div class=\"bg-cover bg-center h-auto text-white py-24 px-10 object-fill\" style=\"background-image: url(https://www.creative-tim.com/twcomponents/component/carousel-slider-with-tailwindcss-and-jquery\/\/images.unsplash.com\/photo-1544427920-c49ccfb85579?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1422&q=80)\">\r\n <div class=\"md:w-1\/2\">\r\n <p class=\"font-bold text-sm uppercase\">Services<\/p>\r\n <p class=\"text-3xl font-bold\">Hello world<\/p>\r\n <p class=\"text-2xl mb-10 leading-none\">Carousel with TailwindCSS and jQuery<\/p>\r\n <a href=https://www.creative-tim.com/"#\" class=\"bg-purple-800 py-4 px-8 text-white font-bold uppercase text-xs rounded hover:bg-gray-200 hover:text-gray-800\">Contact us<\/a>\r\n <\/div> \r\n <\/div> \r\n <br>\r\n <\/div>\r\n\r\n <div id=\"slider-2\" class=\"container mx-auto\">\r\n <div class=\"bg-cover bg-top h-auto text-white py-24 px-10 object-fill\" style=\"background-image: url(https://www.creative-tim.com/twcomponents/component/carousel-slider-with-tailwindcss-and-jquery\/\/images.unsplash.com\/photo-1544144433-d50aff500b91?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80)\">\r\n \r\n <p class=\"font-bold text-sm uppercase\">Services<\/p>\r\n <p class=\"text-3xl font-bold\">Hello world<\/p>\r\n <p class=\"text-2xl mb-10 leading-none\">Carousel with TailwindCSS and jQuery<\/p>\r\n <a href=https://www.creative-tim.com/"#\" class=\"bg-purple-800 py-4 px-8 text-white font-bold uppercase text-xs rounded hover:bg-gray-200 hover:text-gray-800\">Contact us<\/a>\r\n \r\n <\/div> \r\n <br>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex justify-between w-12 mx-auto pb-2\">\r\n <button id=\"sButton1\" onclick=\"sliderButton1()\" class=\"bg-purple-400 rounded-full w-4 pb-2 \" ><\/button>\r\n <button id=\"sButton2\" onclick=\"sliderButton2() \" class=\"bg-purple-400 rounded-full w-4 p-2\"><\/button>\r\n <\/div>\r\n\r\n<\/body>","author_type":"App\\User","author_id":503,"collection_id":null,"fork_id":null,"votes":36,"score":"4.3","visits":92742,"popularity":8325,"slug":"carousel-slider-with-tailwindcss-and-jquery","approved":1,"created_at":"2020-03-31T23:08:09.000000Z","updated_at":"2024-09-19T02:14:50.000000Z","downloads":1756,"code_views":27023,"center":false,"notified":1,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":994,"model_type":"App\\Component","model_id":317,"collection_name":"preview","name":"temp46551","file_name":"temp46551.png","mime_type":"image\/png","disk":"public","size":325380,"manipulations":[],"custom_properties":{"generated_conversions":{"thumb":true,"ogimage":true}},"responsive_images":{"medialibrary_original":{"urls":["temp46551___medialibrary_original_1280_957.png","temp46551___medialibrary_original_1070_799.png","temp46551___medialibrary_original_895_669.png","temp46551___medialibrary_original_749_559.png","temp46551___medialibrary_original_627_468.png","temp46551___medialibrary_original_524_391.png","temp46551___medialibrary_original_439_328.png","temp46551___medialibrary_original_367_274.png","temp46551___medialibrary_original_307_229.png","temp46551___medialibrary_original_257_192.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FGd0FmQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEErczEvYTk4RHVNaS9RajYxMzg2T1QyY2pyUEF2eDA4Ty9FQzlOdHBkMHNzZzdBMDFKTWx3Y2R6MGdIaXJJRnptZ0Q4UkxiVE5ac2RQV002UGRPL2M3VFhIT25aYUhzYzBUNlYvWVhzZFlUeC9KSmRXVTl0QmpqekFRS0tTZHpscnROSDZRRUhBeFhZY0pJblNnRGxEOExQREovNWhWdjhBOThDbFpEdXpRMG53VnBHaHkrWlpXVVZ1L3FpZ1VXUVhiTndEQXBpRm9BLy8yUT09Ij4KCTwvaW1hZ2U+Cjwvc3ZnPg=="}},"order_column":979,"created_at":"2020-03-31T23:08:16.000000Z","updated_at":"2020-09-25T21:39:18.000000Z","conversions_disk":"public","uuid":"aeadcb3c-c4a4-4ed2-8014-ce9cdd9bf65a","generated_conversions":null,"original_url":"https:\/\/tailwindcomponents.com\/storage\/994\/temp46551.png","preview_url":""}],"author":{"id":503,"name":"Axel","slug":"axel","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/faaaa05f699e13bf8b57c77a1e91d7f3","header":null,"created_at":"2020-03-31T00:55:34.000000Z","updated_at":"2020-03-31T00:55:34.000000Z"},"tags":[{"id":5,"name":{"en":"Widget"},"description":"Check out our collection of 500+ widget examples. Use our snippets to preview the code and spend less time re-inventing the wheel.","meta_description":"Check out our collection of 500+ widget examples. Use our snippets to preview the code and spend less time re-inventing the wheel.","slug":{"en":"widget"},"type":null,"order_column":14,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:16:36.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":317,"tag_id":5}},{"id":20,"name":{"en":"Carousel"},"description":"A Carousel component is used for sliding through elements (images or text). See below our collection of Carousel examples that you can add directly to your Tailwind UI project.","meta_description":"Visit our collection of Carousel examples that you can add directly to your Tailwind UI project for sliding through elements.","slug":{"en":"carousel"},"type":null,"order_column":19,"created_at":"2022-08-31T14:16:41.000000Z","updated_at":"2022-12-21T11:18:53.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":317,"tag_id":20}},{"id":65,"name":{"en":"Slider"},"description":"The Tailwind CSS Slider is used to create a draggable control for selecting values within a range. See below our collection of Slider components that you can add directly to your Tailwind UI project.","meta_description":"Visit our Tailwind CSS Slider component examples that you can add to your web project to create awesome web apps.","slug":{"en":"slider"},"type":null,"order_column":54,"created_at":"2023-10-05T07:50:43.000000Z","updated_at":"2023-10-05T07:50:43.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":317,"tag_id":65}}],"fork":null,"favorites":[{"id":4075,"name":"bajro17","slug":"bajro17","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/796e85a3ea9beb39317ff2b37e69fc9f","header":null,"created_at":"2021-06-30T12:35:21.000000Z","updated_at":"2023-01-28T23:48:32.000000Z","pivot":{"component_id":317,"user_id":4075}},{"id":4384,"name":"skyjebus","slug":"skyjebus","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/64335706?v=4","header":null,"created_at":"2021-07-26T18:10:53.000000Z","updated_at":"2021-07-26T18:10:53.000000Z","pivot":{"component_id":317,"user_id":4384}},{"id":4492,"name":"abdulmejidshemsu","slug":"abdulmejidshemsu","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/53785447?v=4","header":null,"created_at":"2021-08-04T11:08:22.000000Z","updated_at":"2021-08-04T11:08:22.000000Z","pivot":{"component_id":317,"user_id":4492}},{"id":368,"name":"khatabwedaa","slug":"khatabwedaa","bio":"Web designer & developer https:\/\/merakiui.com.","avatar":"\/storage\/avatars\/ckQ2aybMQQJgUPv1HOe9XbpNmQmltLlWyy4CSVuJ.jpg","header":"\/storage\/headers\/mGwrFeXBOBPoz7DhAt98sH59byb7HUxdsTd3tVYB.png","created_at":"2020-02-15T10:59:29.000000Z","updated_at":"2023-05-01T07:26:40.000000Z","pivot":{"component_id":317,"user_id":368}},{"id":3558,"name":"whoisthisstud","slug":"whoisthisstud","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/44807533?v=4","header":null,"created_at":"2021-05-25T15:23:04.000000Z","updated_at":"2021-05-25T15:23:04.000000Z","pivot":{"component_id":317,"user_id":3558}},{"id":4257,"name":"nkendrick101","slug":"nkendrick101","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/40567184?v=4","header":null,"created_at":"2021-07-15T17:31:18.000000Z","updated_at":"2021-07-15T17:31:18.000000Z","pivot":{"component_id":317,"user_id":4257}},{"id":7223,"name":"roma0323","slug":"roma0323","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/54255701?v=4","header":null,"created_at":"2022-03-17T01:12:46.000000Z","updated_at":"2022-03-17T01:12:46.000000Z","pivot":{"component_id":317,"user_id":7223}},{"id":6574,"name":"fachrularly","slug":"fachrularly","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/24983698?v=4","header":null,"created_at":"2022-01-19T13:34:22.000000Z","updated_at":"2022-01-19T13:34:22.000000Z","pivot":{"component_id":317,"user_id":6574}},{"id":9112,"name":"rumbis","slug":"rumbis","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/6267593?v=4","header":null,"created_at":"2022-09-21T02:01:19.000000Z","updated_at":"2022-09-21T02:01:19.000000Z","pivot":{"component_id":317,"user_id":9112}},{"id":8648,"name":"aldaspan","slug":"aldaspan","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/57620018?v=4","header":null,"created_at":"2022-08-08T04:40:13.000000Z","updated_at":"2022-08-08T04:40:13.000000Z","pivot":{"component_id":317,"user_id":8648}},{"id":6569,"name":"Glicht","slug":"glicht","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/96473dc05f9454fd44314396260fb37a","header":"\/storage\/headers\/2mQDvwOW5yMRC1ZjcsCwpzaj7NjklBMIpogbRbpA.jpg","created_at":"2022-01-18T19:50:36.000000Z","updated_at":"2022-11-25T18:03:40.000000Z","pivot":{"component_id":317,"user_id":6569}},{"id":11959,"name":"TedKoDev","slug":"tedkodev","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/116431297?v=4","header":null,"created_at":"2023-04-17T04:57:32.000000Z","updated_at":"2023-04-17T04:57:32.000000Z","pivot":{"component_id":317,"user_id":11959}},{"id":12375,"name":"Sambhav242005","slug":"sambhav242005","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/85670285?v=4","header":null,"created_at":"2023-05-16T04:50:40.000000Z","updated_at":"2023-05-16T04:50:40.000000Z","pivot":{"component_id":317,"user_id":12375}},{"id":16490,"name":"Avador Beamer","slug":"avador-beamer","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/32e5ecf413391e2e3a0022000fd92309","header":null,"created_at":"2024-01-22T08:34:11.000000Z","updated_at":"2024-01-22T08:34:11.000000Z","pivot":{"component_id":317,"user_id":16490}},{"id":17319,"name":"sonnh1106","slug":"sonnh1106","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/145078681?v=4","header":null,"created_at":"2024-03-03T02:59:46.000000Z","updated_at":"2024-03-03T02:59:46.000000Z","pivot":{"component_id":317,"user_id":17319}},{"id":19096,"name":"cole0769","slug":"cole0769","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/18558236?v=4","header":null,"created_at":"2024-05-29T23:22:47.000000Z","updated_at":"2024-05-29T23:22:47.000000Z","pivot":{"component_id":317,"user_id":19096}},{"id":17812,"name":"PsychoKillerdd","slug":"psychokillerdd","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/129336705?v=4","header":null,"created_at":"2024-03-25T02:30:05.000000Z","updated_at":"2024-03-25T02:30:05.000000Z","pivot":{"component_id":317,"user_id":17812}}]}" :edit="false"> Full screen Preview