{"id":9911,"date":"2024-03-04T10:30:00","date_gmt":"2024-03-04T10:30:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9911"},"modified":"2024-03-04T08:31:00","modified_gmt":"2024-03-04T03:31:00","slug":"javascript-autoplay-carousel-with-play-pause-controls","status":"publish","type":"post","link":"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/","title":{"rendered":"JavaScript Autoplay Carousel with Play Pause Controls"},"content":{"rendered":"

The JavaScript code snippet helps you to create an Autoplay Carousel with play pause controls and provides a carousel for slideshows<\/a>. It enables automatic slide progression and manual control using play and pause buttons. This functionality helps display content sequentially, allowing users to navigate through slides at their own pace.<\/p>\n

Moreover, the controls offer play, pause, next, and previous actions for interactive browsing through the content.<\/p>\n

How to Create Javascript Autoplay Carousel With Play Pause Controls<\/h2>\n

1. First of all, create the HTML structure as follows. Make sure you have the necessary structure in your HTML, including elements with the classes “content,” “pagination,” “state,” and “controls”.<\/p>\n

<div class=\"content\">\r\n\r\n  <div class=\"pagination\">\r\n  <\/div>\r\n\r\n  <div class=\"state\">\r\n    &nbsp;\r\n  <\/div>\r\n\r\n  <div class=\"controls\">\r\n    <button class=\"control control--prev\" aria-label=\"Previous\">\r\n      <svg class=\"icon\" viewBox=\"0 0 32 32\">\r\n        <path d=\"M20 28a1 1 0 0 1-.521-.146l-18-11a1.002 1.002 0 0 1 0-1.708l18-11A.999.999 0 0 1 21 5v6.11a1 1 0 0 1-.479.854L13.918 16l6.603 4.035c.297.182.479.506.479.854V27a1 1 0 0 1-1 1zM3.918 16 19 25.217V21.45l-7.521-4.596a1 1 0 0 1 0-1.707L19 10.55V6.783L3.918 16z\" \/>\r\n        <path d=\"M30 28a1 1 0 0 1-.521-.146l-18-11a1.002 1.002 0 0 1 0-1.708l18-11A.999.999 0 0 1 31 5v22a1 1 0 0 1-1 1zM13.918 16 29 25.217V6.783L13.918 16z\" \/>\r\n      <\/svg>\r\n    <\/button>\r\n    <button class=\"control control--play-pause\" aria-label=\"Play\/Pause\">\r\n      <svg class=\"icon icon--play\" viewBox=\"0 0 32 32\">\r\n        <path d=\"M7 28a.999.999 0 0 1-1-1V5a1 1 0 0 1 1.521-.854l18 11a1.001 1.001 0 0 1 0 1.708l-18 11A1 1 0 0 1 7 28zM8 6.783v18.434L23.082 16 8 6.783z\" \/>\r\n      <\/svg>\r\n      <svg class=\"icon icon--pause\" viewBox=\"0 0 32 32\">\r\n        <path d=\"M13 28H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v22a1 1 0 0 1-1 1zm-5-2h4V6H8v20zM25 28h-6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v22a1 1 0 0 1-1 1zm-5-2h4V6h-4v20z\" \/>\r\n      <\/svg>\r\n    <\/button>\r\n    <button class=\"control control--next\" aria-label=\"Next\">\r\n      <svg class=\"icon\" viewBox=\"0 0 32 32\">\r\n        <path d=\"M12 28a1 1 0 0 1-1-1v-6.111c0-.348.182-.672.479-.854L18.082 16l-6.603-4.035A1.001 1.001 0 0 1 11 11.11V5a1 1 0 0 1 1.521-.854l18 11a1.002 1.002 0 0 1 0 1.708l-18 11A1 1 0 0 1 12 28zm1-6.55v3.767L28.082 16 13 6.783v3.767l7.521 4.596a1.001 1.001 0 0 1 0 1.708L13 21.45z\" \/>\r\n        <path d=\"M2 28a1 1 0 0 1-1-1V5a1 1 0 0 1 1.521-.854l18 11a1.002 1.002 0 0 1 0 1.708l-18 11A1 1 0 0 1 2 28zM3 6.783v18.434L18.082 16 3 6.783z\" \/>\r\n      <\/svg>\r\n    <\/button>\r\n  <\/div>\r\n\r\n  <a target=\"_blank\" href=\"https:\/\/muffinman.io\/blog\/css-animations-instead-of-js-timers\/\">Blog post<\/a>\r\n<\/div><\/pre>\n
Replace the demo content in the HTML with your own slides. Each slide corresponds to a button in the pagination section.<\/p>\n
2. Style the carousel using the following CSS styles. You can modify the CSS to match your project’s design. You can change the colors, sizes, and styles to fit your aesthetic preferences.<\/p>\n
* {\r\n  padding: 0;\r\n  margin: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  background: #98ede0;\r\n  transition: background 500ms;\r\n  font-family: ui-rounded, \"Hiragino Maru Gothic ProN\", Quicksand, Comfortaa, Manjari, \"Arial Rounded MT\", \"Arial Rounded MT Bold\", Calibri, source-sans-pro, sans-serif;\r\n}\r\n\r\n.content {\r\n  margin: 0 auto;\r\n  max-width: 500px;\r\n  height: 100vh;\r\n  height: 100svh;\r\n  min-height: 400px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 40px 40px 80px;\r\n  justify-content: center;\r\n}\r\n\r\na {\r\n  transition: color 200ms;\r\n  color: rgba(0, 0, 0, 0.5);\r\n  border-radius: 5px;\r\n  text-decoration: none;\r\n  margin: 40px auto 0;\r\n}\r\na:hover {\r\n  color: black;\r\n  text-decoration: underline;\r\n}\r\na:focus-visible {\r\n  color: black;\r\n  outline: 3px solid rgba(255, 255, 255, 0.3);\r\n  outline-offset: 5px;\r\n}\r\n\r\n.pagination {\r\n  display: flex;\r\n  gap: 10px;\r\n  height: 4px;\r\n  min-height: 4px;\r\n}\r\n\r\n.pagination-item {\r\n  border-radius: 100px;\r\n  height: 100%;\r\n  flex: auto;\r\n  background: rgba(0, 0, 0, 0.08);\r\n  overflow: hidden;\r\n  border: 0;\r\n  cursor: pointer;\r\n}\r\n\r\n@keyframes progress {\r\n  from {\r\n    width: 0;\r\n  }\r\n  to {\r\n    width: 100%;\r\n  }\r\n}\r\n.pagination-progress {\r\n  flex: auto;\r\n  background: #333;\r\n  height: 100%;\r\n  width: 0;\r\n}\r\n.pagination-item--running .pagination-progress {\r\n  animation: progress 3s linear forwards;\r\n}\r\n.pagination-item--done .pagination-progress {\r\n  width: 100%;\r\n}\r\n.pagination--paused .pagination-progress {\r\n  animation-play-state: paused;\r\n}\r\n:-moz-window-inactive .pagination-progress {\r\n  animation-play-state: paused;\r\n}\r\n\r\n.controls {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 12px;\r\n}\r\n\r\n.control {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 100px;\r\n  border: none;\r\n  outline: none;\r\n  height: 40px;\r\n  flex: 40px 0 0;\r\n  max-width: 100px;\r\n  background: rgba(255, 255, 255, 0.3);\r\n  transition: transform 200ms, background-color 200ms;\r\n  will-change: transform, background-color;\r\n  font-size: 20px;\r\n}\r\n.control:hover {\r\n  cursor: pointer;\r\n  transform: scale(1.15);\r\n  background: rgba(255, 255, 255, 0.45);\r\n}\r\n.control:focus {\r\n  background: rgba(255, 255, 255, 0.6);\r\n}\r\n\r\n.icon {\r\n  width: 20px;\r\n}\r\n\r\n.icon--play {\r\n  margin-right: -2px;\r\n}\r\n\r\n.pagination--paused ~ .controls .icon--pause,\r\n.pagination:not(.pagination--paused) ~ .controls .icon--play {\r\n  display: none;\r\n}\r\n\r\n.state {\r\n  font-size: 120px;\r\n  text-align: center;\r\n}<\/pre>\n
3. Finally, add the following JavaScript code to your project to enable carousel functionality. Customize the colors array to match the background colors of your slides.<\/p>\n
\"use strict\";\r\nfunction getItem(index) {\r\n    const item = document.createElement('button');\r\n    item.classList.add('pagination-item');\r\n    item.addEventListener('animationend', next);\r\n    item.addEventListener('click', () => update(index));\r\n    const progress = document.createElement('div');\r\n    progress.classList.add('pagination-progress');\r\n    item.appendChild(progress);\r\n    return item;\r\n}\r\nfunction createItems(itemsCount) {\r\n    const items = [];\r\n    for (let i = 0; i < itemsCount; i++) {\r\n        items.push(getItem(i));\r\n    }\r\n    return items;\r\n}\r\nfunction jumpTo(item) {\r\n    if (isPaused) {\r\n        item.classList.remove(classNames.RUNNING);\r\n        item.classList.add(classNames.DONE);\r\n    }\r\n    else {\r\n        item.classList.add(classNames.RUNNING);\r\n        item.classList.remove(classNames.DONE);\r\n    }\r\n    let sibling = item;\r\n    while ((sibling = sibling.previousSibling)) {\r\n        sibling.classList.remove(classNames.RUNNING);\r\n        sibling.classList.add(classNames.DONE);\r\n    }\r\n    sibling = item;\r\n    while ((sibling = sibling.nextSibling)) {\r\n        sibling.classList.remove(classNames.RUNNING, classNames.DONE);\r\n    }\r\n}\r\nfunction update(index) {\r\n    activeIndex = index;\r\n    jumpTo(items[activeIndex]);\r\n    \/\/ Update slide and background color\r\n    $state.innerHTML = activeIndex + 1;\r\n   \/\/ document.body.style.backgroundColor = colors[activeIndex];\r\n\r\n    document.querySelector(\".cd__main\").style.backgroundColor = colors[activeIndex];\r\n}\r\nfunction prev() {\r\n    if (activeIndex > 0) {\r\n        update(activeIndex - 1);\r\n    }\r\n    \/\/ else {\r\n    \/\/   \/\/ Loop to the last slide\r\n    \/\/   update(ITEMS_COUNT - 1);\r\n    \/\/ }\r\n}\r\nfunction next() {\r\n    if (activeIndex < ITEMS_COUNT - 1) {\r\n        update(activeIndex + 1);\r\n    }\r\n    \/\/ else {\r\n    \/\/   \/\/ Loop to the first slide\r\n    \/\/   update(0);\r\n    \/\/ }\r\n}\r\nfunction playPause() {\r\n    $pagination.classList.toggle(classNames.PAUSED);\r\n    isPaused = !isPaused;\r\n    \/\/ When unpausing,\r\n    \/\/ if the current slide is done, jump to the next one\r\n    if (!isPaused && items[activeIndex].classList.contains(classNames.DONE)) {\r\n        next();\r\n    }\r\n}\r\nconst colors = ['#98ede0', '#74b9ff', '#a29bfe', '#fd79a8', '#ffeaa7'];\r\nconst classNames = {\r\n    RUNNING: 'pagination-item--running',\r\n    DONE: 'pagination-item--done',\r\n    PAUSED: 'pagination--paused',\r\n};\r\nlet activeIndex = 0;\r\nlet isPaused = false;\r\nconst ITEMS_COUNT = 5;\r\nconst items = createItems(ITEMS_COUNT);\r\nconst $pagination = document.querySelector('.pagination');\r\nconst $state = document.querySelector('.state');\r\nconst $prev = document.querySelector('.control--prev');\r\nconst $next = document.querySelector('.control--next');\r\nconst $playPause = document.querySelector('.control--play-pause');\r\n$pagination.replaceChildren(...items);\r\n$prev.addEventListener('click', prev);\r\n$next.addEventListener('click', next);\r\n$playPause.addEventListener('click', playPause);\r\nupdate(activeIndex);<\/pre>\n
That’s all! hopefully, you have successfully created an autoplay carousel with play pause controls. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
The JavaScript code snippet helps you to create an Autoplay Carousel with play pause controls and provides a carousel for…<\/p>\n","protected":false},"author":1,"featured_media":9923,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[59],"tags":[],"class_list":["post-9911","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-carousel"],"acf":[],"yoast_head":"\nJavaScript Autoplay Carousel with Play Pause Controls — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a JavaScript Autoplay Carousel with Play Pause Controls. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Autoplay Carousel with Play Pause Controls — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a JavaScript Autoplay Carousel with Play Pause Controls. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-04T10:30:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/JavaScript-Autoplay-Carousel-with-Play-Pause-Controls.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"JavaScript Autoplay Carousel with Play Pause Controls\",\"datePublished\":\"2024-03-04T10:30:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/\"},\"wordCount\":217,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/JavaScript-Autoplay-Carousel-with-Play-Pause-Controls.png\",\"articleSection\":[\"Carousel\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/\",\"url\":\"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/\",\"name\":\"JavaScript Autoplay Carousel with Play Pause Controls — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/JavaScript-Autoplay-Carousel-with-Play-Pause-Controls.png\",\"datePublished\":\"2024-03-04T10:30:00+00:00\",\"description\":\"Here is a free code snippet to create a JavaScript Autoplay Carousel with Play Pause Controls. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/JavaScript-Autoplay-Carousel-with-Play-Pause-Controls.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/JavaScript-Autoplay-Carousel-with-Play-Pause-Controls.png\",\"width\":1280,\"height\":960,\"caption\":\"JavaScript Autoplay Carousel with Play Pause Controls\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Carousel\",\"item\":\"https:\/\/codehim.com\/category\/carousel\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript Autoplay Carousel with Play Pause Controls\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Autoplay Carousel with Play Pause Controls — CodeHim","description":"Here is a free code snippet to create a JavaScript Autoplay Carousel with Play Pause Controls. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Autoplay Carousel with Play Pause Controls — CodeHim","og_description":"Here is a free code snippet to create a JavaScript Autoplay Carousel with Play Pause Controls. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-03-04T10:30:00+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/JavaScript-Autoplay-Carousel-with-Play-Pause-Controls.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"JavaScript Autoplay Carousel with Play Pause Controls","datePublished":"2024-03-04T10:30:00+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/"},"wordCount":217,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/JavaScript-Autoplay-Carousel-with-Play-Pause-Controls.png","articleSection":["Carousel"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/","url":"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/","name":"JavaScript Autoplay Carousel with Play Pause Controls — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/JavaScript-Autoplay-Carousel-with-Play-Pause-Controls.png","datePublished":"2024-03-04T10:30:00+00:00","description":"Here is a free code snippet to create a JavaScript Autoplay Carousel with Play Pause Controls. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/JavaScript-Autoplay-Carousel-with-Play-Pause-Controls.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/JavaScript-Autoplay-Carousel-with-Play-Pause-Controls.png","width":1280,"height":960,"caption":"JavaScript Autoplay Carousel with Play Pause Controls"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/carousel\/javascript-autoplay-carousel-with-play-pause-controls\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Carousel","item":"https:\/\/codehim.com\/category\/carousel\/"},{"@type":"ListItem","position":3,"name":"JavaScript Autoplay Carousel with Play Pause Controls"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":3082,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9911","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=9911"}],"version-history":[{"count":1,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9911\/revisions"}],"predecessor-version":[{"id":11305,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9911\/revisions\/11305"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9923"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9911"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9911"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}