{"id":2117,"date":"2024-06-25T12:29:47","date_gmt":"2024-06-25T11:29:47","guid":{"rendered":"https:\/\/codeflarelimited.com\/blog\/?p=2117"},"modified":"2024-06-25T12:29:49","modified_gmt":"2024-06-25T11:29:49","slug":"javascript-testimonial-slider-tutorial","status":"publish","type":"post","link":"https:\/\/codeflarelimited.com\/blog\/javascript-testimonial-slider-tutorial\/","title":{"rendered":"How to Create Sliders for Testimonials or Reviews Using JavaScript"},"content":{"rendered":"\n

Creating a JavaScript testimonial slider for your website can greatly enhance the user experience by showcasing positive feedback in an interactive and visually appealing way. In this article, we’ll guide you through the process of creating a simple yet effective slider using HTML, CSS, and JavaScript. Follow this JavaScript Testimonial Slider Tutorial to get started.<\/p>\n\n\n\n

Step 1: Set Up the HTML Structure<\/strong><\/p>\n\n\n\n

First, we’ll create the basic HTML structure for our slider. This will include a container for the slider and individual slides for each testimonial or review.<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Testimonial Slider<\/title>\n    <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n    <div class=\"slider-container\">\n        <div class=\"slide\">\n            <p class=\"testimonial\">\"This is an amazing product!\"<\/p>\n            <p class=\"author\">- John Doe<\/p>\n        <\/div>\n        <div class=\"slide\">\n            <p class=\"testimonial\">\"I would highly recommend this to everyone.\"<\/p>\n            <p class=\"author\">- Jane Smith<\/p>\n        <\/div>\n        <div class=\"slide\">\n            <p class=\"testimonial\">\"A game-changer for our industry.\"<\/p>\n            <p class=\"author\">- Mike Johnson<\/p>\n        <\/div>\n        <button class=\"prev\" onclick=\"moveSlide(-1)\">❮<\/button>\n        <button class=\"next\" onclick=\"moveSlide(1)\">❯<\/button>\n    <\/div>\n    <script src=\"scripts.js\"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
Step 2: Style the Slider with CSS<\/strong><\/p>\n\n\n\n
Next, we’ll add some CSS to style the slider and its components. This includes positioning the slides, adding transitions, and styling the navigation buttons.<\/p>\n\n\n\n
\/* styles.css *\/\nbody {\n    font-family: Arial, sans-serif;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100vh;\n    margin: 0;\n    background-color: #f4f4f4;\n}\n\n.slider-container {\n    position: relative;\n    width: 80%;\n    max-width: 600px;\n    overflow: hidden;\n    background: white;\n    box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n}\n\n.slide {\n    display: none;\n    padding: 20px;\n    text-align: center;\n}\n\n.slide.active {\n    display: block;\n}\n\n.testimonial {\n    font-size: 18px;\n    margin-bottom: 10px;\n}\n\n.author {\n    font-size: 16px;\n    color: #555;\n}\n\n.prev, .next {\n    cursor: pointer;\n    position: absolute;\n    top: 50%;\n    width: auto;\n    padding: 16px;\n    margin-top: -22px;\n    color: white;\n    font-weight: bold;\n    font-size: 18px;\n    transition: 0.6s ease;\n    border-radius: 0 3px 3px 0;\n    user-select: none;\n}\n\n.next {\n    right: 0;\n    border-radius: 3px 0 0 3px;\n}\n\n.prev:hover, .next:hover {\n    background-color: rgba(0,0,0,0.8);\n}\n<\/code><\/pre>\n\n\n\n
Step 3: Add the JavaScript Functionality<\/strong><\/p>\n\n\n\n
Finally, we’ll add the JavaScript needed to make the slider functional. This includes functions to navigate between slides and initialize the slider.<\/p>\n\n\n\n
\/\/ scripts.js\nlet currentSlide = 0;\n\nfunction showSlide(index) {\n    const slides = document.querySelectorAll('.slide');\n    if (index >= slides.length) {\n        currentSlide = 0;\n    } else if (index < 0) {\n        currentSlide = slides.length - 1;\n    } else {\n        currentSlide = index;\n    }\n    slides.forEach((slide, i) => {\n        slide.style.display = 'none';\n        if (i === currentSlide) {\n            slide.style.display = 'block';\n        }\n    });\n}\n\nfunction moveSlide(n) {\n    showSlide(currentSlide + n);\n}\n\ndocument.addEventListener('DOMContentLoaded', () => {\n    showSlide(currentSlide);\n});\n<\/code><\/pre>\n\n\n\n
Here is the combined code for creating a testimonial slider with HTML, CSS, and JavaScript in a single file:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Testimonial Slider<\/title>\n    <style>\n        body {\n            font-family: Arial, sans-serif;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            height: 100vh;\n            margin: 0;\n            background-color: #f4f4f4;\n        }\n\n        .slider-container {\n            position: relative;\n            width: 80%;\n            max-width: 600px;\n            overflow: hidden;\n            background: white;\n            box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n        }\n\n        .slide {\n            display: none;\n            padding: 20px;\n            text-align: center;\n        }\n\n        .slide.active {\n            display: block;\n        }\n\n        .testimonial {\n            font-size: 18px;\n            margin-bottom: 10px;\n        }\n\n        .author {\n            font-size: 16px;\n            color: #555;\n        }\n\n        .prev, .next {\n            cursor: pointer;\n            position: absolute;\n            top: 50%;\n            width: auto;\n            padding: 16px;\n            margin-top: -22px;\n            color: white;\n            font-weight: bold;\n            font-size: 18px;\n            transition: 0.6s ease;\n            border-radius: 0 3px 3px 0;\n            user-select: none;\n        }\n\n        .next {\n            right: 0;\n            border-radius: 3px 0 0 3px;\n        }\n\n        .prev:hover, .next:hover {\n            background-color: rgba(0,0,0,0.8);\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"slider-container\">\n        <div class=\"slide active\">\n            <p class=\"testimonial\">\"This is an amazing product!\"<\/p>\n            <p class=\"author\">- John Doe<\/p>\n        <\/div>\n        <div class=\"slide\">\n            <p class=\"testimonial\">\"I would highly recommend this to everyone.\"<\/p>\n            <p class=\"author\">- Jane Smith<\/p>\n        <\/div>\n        <div class=\"slide\">\n            <p class=\"testimonial\">\"A game-changer for our industry.\"<\/p>\n            <p class=\"author\">- Mike Johnson<\/p>\n        <\/div>\n        <button class=\"prev\" onclick=\"moveSlide(-1)\">❮<\/button>\n        <button class=\"next\" onclick=\"moveSlide(1)\">❯<\/button>\n    <\/div>\n    <script>\n        let currentSlide = 0;\n\n        function showSlide(index) {\n            const slides = document.querySelectorAll('.slide');\n            if (index >= slides.length) {\n                currentSlide = 0;\n            } else if (index < 0) {\n                currentSlide = slides.length - 1;\n            } else {\n                currentSlide = index;\n            }\n            slides.forEach((slide, i) => {\n                slide.style.display = 'none';\n                if (i === currentSlide) {\n                    slide.style.display = 'block';\n                }\n            });\n        }\n\n        function moveSlide(n) {\n            showSlide(currentSlide + n);\n        }\n\n        document.addEventListener('DOMContentLoaded', () => {\n            showSlide(currentSlide);\n        });\n    <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
This code sets up a simple testimonial slider. When you open the HTML file in a web browser, you’ll see the testimonials and can navigate between them using the “previous” and “next” buttons. The CSS styles the slider, and the JavaScript handles the functionality for moving between slides.<\/p>\n\n\n\n
Here’s the outcome!<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Conclusion<\/strong><\/h3>\n\n\n\n
Creating a slider for testimonials or reviews using JavaScript is a great way to make your website more interactive and engaging. With a few lines of HTML, CSS, and JavaScript, you can create a dynamic slider that enhances the presentation of user feedback on your site. Follow this JavaScript Testimonial Slider Tutorial to customize the styles and functionality to better suit your needs and branding.<\/p>\n\n\n\n
Understanding UIKIT frameworks and comparison<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Creating a JavaScript testimonial slider for your website can greatly enhance the user experience by showcasing positive feedback<\/p>\n","protected":false},"author":3,"featured_media":2119,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[11],"tags":[8],"class_list":["post-2117","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-programming"],"yoast_head":"\nJavaScript Testimonial Slider Tutorial<\/title>\n<meta name=\"description\" content=\"Learn how to create a JavaScript testimonial slider with our step-by-step tutorial, perfect for showcasing reviews on your website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codeflarelimited.com\/blog\/javascript-testimonial-slider-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Testimonial Slider Tutorial\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a JavaScript testimonial slider with our step-by-step tutorial, perfect for showcasing reviews on your website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codeflarelimited.com\/blog\/javascript-testimonial-slider-tutorial\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-25T11:29:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-25T11:29:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2024\/06\/IMG-20240625-WA0003.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"607\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kene Samuel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-testimonial-slider-tutorial\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-testimonial-slider-tutorial\\\/\"},\"author\":{\"name\":\"Kene Samuel\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/c501609bab46c16807eb32106074f206\"},\"headline\":\"How to Create Sliders for Testimonials or Reviews Using JavaScript\",\"datePublished\":\"2024-06-25T11:29:47+00:00\",\"dateModified\":\"2024-06-25T11:29:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-testimonial-slider-tutorial\\\/\"},\"wordCount\":295,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-testimonial-slider-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/IMG-20240625-WA0003.jpg\",\"keywords\":[\"programming\"],\"articleSection\":[\"javascript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-testimonial-slider-tutorial\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-testimonial-slider-tutorial\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-testimonial-slider-tutorial\\\/\",\"name\":\"JavaScript Testimonial Slider Tutorial\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-testimonial-slider-tutorial\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-testimonial-slider-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/IMG-20240625-WA0003.jpg\",\"datePublished\":\"2024-06-25T11:29:47+00:00\",\"dateModified\":\"2024-06-25T11:29:49+00:00\",\"description\":\"Learn how to create a JavaScript testimonial slider with our step-by-step tutorial, perfect for showcasing reviews on your website.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-testimonial-slider-tutorial\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-testimonial-slider-tutorial\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-testimonial-slider-tutorial\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/IMG-20240625-WA0003.jpg\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/IMG-20240625-WA0003.jpg\",\"width\":1080,\"height\":607},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-testimonial-slider-tutorial\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"javascript\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create Sliders for Testimonials or Reviews Using JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"name\":\"\",\"description\":\"Sustainable solutions\",\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\",\"name\":\"Codeflare Limited\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"width\":1040,\"height\":263,\"caption\":\"Codeflare Limited\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/c501609bab46c16807eb32106074f206\",\"name\":\"Kene Samuel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3e1716cd715a5b5491e1f2da373b52f2f73aeb37d268baff34719116e386d848?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3e1716cd715a5b5491e1f2da373b52f2f73aeb37d268baff34719116e386d848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3e1716cd715a5b5491e1f2da373b52f2f73aeb37d268baff34719116e386d848?s=96&d=mm&r=g\",\"caption\":\"Kene Samuel\"},\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/author\\\/kene\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Testimonial Slider Tutorial","description":"Learn how to create a JavaScript testimonial slider with our step-by-step tutorial, perfect for showcasing reviews on your website.","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:\/\/codeflarelimited.com\/blog\/javascript-testimonial-slider-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Testimonial Slider Tutorial","og_description":"Learn how to create a JavaScript testimonial slider with our step-by-step tutorial, perfect for showcasing reviews on your website.","og_url":"https:\/\/codeflarelimited.com\/blog\/javascript-testimonial-slider-tutorial\/","article_published_time":"2024-06-25T11:29:47+00:00","article_modified_time":"2024-06-25T11:29:49+00:00","og_image":[{"width":1080,"height":607,"url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2024\/06\/IMG-20240625-WA0003.jpg","type":"image\/jpeg"}],"author":"Kene Samuel","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/codeflarelimited.com\/blog\/javascript-testimonial-slider-tutorial\/#article","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/javascript-testimonial-slider-tutorial\/"},"author":{"name":"Kene Samuel","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/c501609bab46c16807eb32106074f206"},"headline":"How to Create Sliders for Testimonials or Reviews Using JavaScript","datePublished":"2024-06-25T11:29:47+00:00","dateModified":"2024-06-25T11:29:49+00:00","mainEntityOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/javascript-testimonial-slider-tutorial\/"},"wordCount":295,"commentCount":0,"publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/javascript-testimonial-slider-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2024\/06\/IMG-20240625-WA0003.jpg","keywords":["programming"],"articleSection":["javascript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codeflarelimited.com\/blog\/javascript-testimonial-slider-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codeflarelimited.com\/blog\/javascript-testimonial-slider-tutorial\/","url":"https:\/\/codeflarelimited.com\/blog\/javascript-testimonial-slider-tutorial\/","name":"JavaScript Testimonial Slider Tutorial","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/javascript-testimonial-slider-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/javascript-testimonial-slider-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2024\/06\/IMG-20240625-WA0003.jpg","datePublished":"2024-06-25T11:29:47+00:00","dateModified":"2024-06-25T11:29:49+00:00","description":"Learn how to create a JavaScript testimonial slider with our step-by-step tutorial, perfect for showcasing reviews on your website.","breadcrumb":{"@id":"https:\/\/codeflarelimited.com\/blog\/javascript-testimonial-slider-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codeflarelimited.com\/blog\/javascript-testimonial-slider-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/javascript-testimonial-slider-tutorial\/#primaryimage","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2024\/06\/IMG-20240625-WA0003.jpg","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2024\/06\/IMG-20240625-WA0003.jpg","width":1080,"height":607},{"@type":"BreadcrumbList","@id":"https:\/\/codeflarelimited.com\/blog\/javascript-testimonial-slider-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codeflarelimited.com\/blog\/"},{"@type":"ListItem","position":2,"name":"javascript","item":"https:\/\/codeflarelimited.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"How to Create Sliders for Testimonials or Reviews Using JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codeflarelimited.com\/blog\/#website","url":"https:\/\/codeflarelimited.com\/blog\/","name":"","description":"Sustainable solutions","publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codeflarelimited.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codeflarelimited.com\/blog\/#organization","name":"Codeflare Limited","url":"https:\/\/codeflarelimited.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","width":1040,"height":263,"caption":"Codeflare Limited"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/c501609bab46c16807eb32106074f206","name":"Kene Samuel","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3e1716cd715a5b5491e1f2da373b52f2f73aeb37d268baff34719116e386d848?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3e1716cd715a5b5491e1f2da373b52f2f73aeb37d268baff34719116e386d848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3e1716cd715a5b5491e1f2da373b52f2f73aeb37d268baff34719116e386d848?s=96&d=mm&r=g","caption":"Kene Samuel"},"url":"https:\/\/codeflarelimited.com\/blog\/author\/kene\/"}]}},"jetpack_featured_media_url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2024\/06\/IMG-20240625-WA0003.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/2117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/comments?post=2117"}],"version-history":[{"count":1,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/2117\/revisions"}],"predecessor-version":[{"id":2120,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/2117\/revisions\/2120"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media\/2119"}],"wp:attachment":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media?parent=2117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/categories?post=2117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/tags?post=2117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}