{"id":18434,"date":"2017-09-07T16:15:11","date_gmt":"2017-09-07T13:15:11","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=18434"},"modified":"2018-01-08T13:00:52","modified_gmt":"2018-01-08T11:00:52","slug":"bootstrap-image-slider-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/","title":{"rendered":"Bootstrap Image Slider Example"},"content":{"rendered":"

In this post we will look at the Bootstrap Carousel Component also known as Image Slider. This component is also available as an independent plugin as well. All that is required is adding the carousel.js<\/code> file. But if the bootstrap.js<\/code> or the minified version of it is included, there is no need for this file to be added. The bootstrap js file already contains all the plugins.<\/p>\n

We will learn both ways of using the carousel component, viz., via data attributes and via JavaScript. Although nesting of carousels is not supported we can have more than one of these on a page. With both approaches there is really no restrictions on the feature set that we can leverage with this component. As far as browser compatibility is concerned there are some issues with IE9 and below. This is because it uses CSS3 transitions for animating and that is not supported in IE9 & 8.<\/p>\n

So, let us get started with the tasks on hand.
\n[ulp id=’57DHuNTHJ2qczaGz’]
\n <\/p>\n

1. Tools & Technologies<\/h2>\n

We use the following tools & technologies to implement this example:<\/p>\n

    \n
  1. Bootstrap v3.3.7<\/a><\/li>\n
  2. JQuery v1.12.4<\/a><\/li>\n
  3. Nodejs v6.3.0<\/a><\/li>\n
  4. Express<\/a><\/li>\n
  5. Visual Studio Code IDE<\/a><\/li>\n<\/ol>\n

    2. Project Structure<\/h2>\n

    To start off we need to organize our project structure as below.<\/p>\n

    \"\"<\/a>
    Project Structure<\/figcaption><\/figure>\n

    css<\/em><\/strong>
    \nThe css files from Bootstrap package reside in this folder. All the css stylesheets created by us would reside here as well.
    \nfonts<\/em><\/strong>
    \nAll the font files that came with Bootstrap are located in this folder.
    \njs<\/em><\/strong>
    \nThe Bootstrap JavaScript files are placed here along with the file we will create, namely, bootstrap.image.slider.js<\/code>
    \nindex.html<\/em><\/strong>
    \nThe file is based on the template at     Bootstrap Getting Started<\/a> section. It holds the HTML markup and is our landing page. All the other files are referenced in this one and they come together in the browser and make things happen.
    \nindex.js<\/em><\/strong>
    \nOur barebones web server is built using Node.js and Express module resides in this file.<\/p>\n

    3. Carousel via Data Attributes<\/h2>\n

    3.1 About data attributes<\/h3>\n

    Data attributes are a part of the HTML5 and they can be used to associate data with elements. Prefixing data-*<\/code> to attribute name we maintain semantics instead of using non standard attributes. To read such data associated with elements all we need to do is read the property name of off the dataset property of the DOM element. For example, consider the below markup:<\/p>\n

    \r\n<li id=\"litem\" data-target=\"#carousel-first-one\" class=\"active\"><\/li>\r\n<\/pre>\n
    Now as you can see that the above markup has a list item with data- attributes<\/code>. To access this value programmatically I can write on JavaScript as below:<\/p>\n
    \r\nvar litem = document.getElementById(\"litem\");\r\nlitem.dataset.target; \/\/#carousel-first-one\r\n<\/pre>\n
    3.2 Carousel Implementation<\/h3>\n
    To use just the data attributes to create an instance of a Carousel we need to follow the following Html structure:<\/p>\n
    index.html<\/em><\/span><\/p>\n
    \r\n...\r\n<div id=\"carousel-first-one\" class=\"carousel\" data-ride=\"carousel\">\r\n<!-- Carousel Indicators which allow user to jump to specific slide -->\r\n    <ol class=\"carousel-indicators\">\r\n        <li data-target=\"#carousel-first-one\" data-slide-to=\"0\" class=\"active\"><\/li>\r\n        <li data-target=\"#carousel-first-one\" data-slide-to=\"1\"><\/li>\r\n        <li data-target=\"#carousel-first-one\" data-slide-to=\"2\"><\/li>\r\n    <\/ol>\r\n\r\n<!-- Individual slides of the carousel -->\r\n    <div class=\"carousel-inner\" role=\"listbox\" >\r\n        <div class=\"item active\" style=\"text-align: center\" >\r\n            <img src=\"\/images\/puppy.jpeg\" alt=\"Puppy\" class=\"img-responsive\" \/>\r\n            <div class=\"carousel-caption\">\r\n                Bow Wow\r\n            <\/div>\r\n        <\/div>\r\n       ...\r\n    <\/div>\r\n\r\n<!-- Controls Previous, Next -->\r\n    <a class=\"left carousel-control\" href=\"#carousel-first-one\" role=\"button\" data-slide=\"prev\">\r\n        <span class=\"glyphicon glyphicon-chevron-left\" aria-hidden=\"true\"><\/span>\r\n        <span class=\"sr-only\">Previous<\/span>\r\n    <\/a>\r\n    <a class=\"right carousel-control\" href=\"#carousel-first-one\" role=\"button\" data-slide=\"next\">\r\n        <span class=\"glyphicon glyphicon-chevron-right\" aria-hidden=\"true\"><\/span>\r\n        <span class=\"sr-only\">Next<\/span>\r\n    <\/a>\r\n<\/div>\r\n...\r\n<\/pre>\n
    The key classes that enable the carousel above are:
    \ncarousel<\/code>: This class is decorated on the div<\/code> containing the entire markup of the Carousel. The data-ride<\/code> with value “carousel” causes the carousel to slide on page load. If removed, the carousel will no longer start automatically slide through the various slides.<\/p>\n
    carousel-indicators<\/code>: An ordered list is decorated with this class to display the series of dots at the bottom of the carousel. They allow the user to switch to any slide as desired. The dot representing the current slide displayed is styled visibly different from the others. The individual dots or list items are decorated with data-target<\/code> attribute with the value of #<\/code> followed by the id of the top most element of carousel. They also have a data-slide-to<\/code> attribute with a numerical value representing the slide’s order to which the carousel will slide to upon clicking it. The item which is to be initially is decorated with an active<\/code> class as well.<\/p>\n
    carousel-inner<\/code>: This class is used on the div<\/code> housing the individual slides to be displayed. It contains each slide as a div<\/code> decorated with the item<\/code> class.<\/p>\n
    item<\/code>: This class is decorated on each div<\/code> hosting the contents of individual slides of the carousel.<\/p>\n
    carousel-caption<\/code>: An optional caption can be provided apart from the image as content of each slide. The caption or content is housed in a div<\/code> decorated with this CSS class.<\/p>\n
    left\/right carousel-control<\/code>: The arrows you see on either side of each slide are created by a<\/code> tags decorated with either the right carousel-control<\/code> or the left carousel-control<\/code> CSS classes.<\/p>\n
    This pretty much is all that is required to display a carousel exclusively via data attributes. The result of the above markup looks as follows:<\/p>\n
    \"\"<\/a>
    Project Slider<\/figcaption><\/figure>\n
    4. Carousel via JavaScript<\/h2>\n
    Now let us look at the programmatic way of using the carousel plugin. Firstly, we will borrow the entire Html Markup from the previous section sans the data attributes. We will create a new Html page with markup as below:<\/p>\n
    carousel.html<\/em><\/span><\/p>\n
    \r\n...\r\n<!-- First carousel exclusively using data atttributes -->\r\n<div id=\"carousel-first-one\" class=\"carousel\" >\r\n\r\n<!-- Carousel Indicators which allow user to jump to specific slide -->\r\n    <ol class=\"carousel-indicators\">\r\n        <li id=\"first\" class=\"active\"><\/li>\r\n        <li id=\"second\"><\/li>\r\n        <li id=\"third\"><\/li>\r\n    <\/ol>\r\n\r\n<!-- Individual slides of the carousel -->\r\n    <div class=\"carousel-inner\" role=\"listbox\" >\r\n        <div class=\"item active\" style=\"text-align: center\" >\r\n            <img src=\"\/images\/puppy.jpeg\" alt=\"Puppy\" class=\"img-responsive\" \/>\r\n            <div class=\"carousel-caption\">\r\n                Bow Wow\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"item\" style=\"text-align: center\">\r\n            <img src=\"\/images\/cat-big.jpg\" alt=\"Cat\" class=\"img-responsive\"\/>\r\n            <div class=\"carousel-caption\">\r\n                Meow\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"item\" style=\"text-align: center\">\r\n            <img src=\"\/images\/Unicorn.jpeg\" alt=\"Unicorn\" class=\"img-responsive\"\/>\r\n            <div class=\"carousel-caption\">\r\n                Neigh\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<!-- Controls -->\r\n    <a id=\"prev\" class=\"left carousel-control\" href=\"#carousel-first-one\" role=\"button\" >\r\n        <span class=\"glyphicon glyphicon-chevron-left\" aria-hidden=\"true\"><\/span>\r\n        <span class=\"sr-only\">Previous<\/span>\r\n    <\/a>\r\n    <a id=\"next\" class=\"right carousel-control\" href=\"#carousel-first-one\" role=\"button\">\r\n        <span class=\"glyphicon glyphicon-chevron-right\" aria-hidden=\"true\"><\/span>\r\n        <span class=\"sr-only\">Next<\/span>\r\n    <\/a>\r\n<\/div>\r\n...\r\n<\/pre>\n
    As you can see we have got rid of the various data-*<\/code> attributes from the markup and added id<\/code> attributes. The id<\/code> attribute helps us as we program these tags which was earlier done by data-*<\/code> attributes. Now, create a JavaScript file named bootstrap.image.slider.js<\/code> under the js<\/code> folder and reference it in our new file carousel.html<\/code>. In this file we write code to handle the click events of all three carousel-indicators<\/code> as well as the Left\/Previous <\/code> controls. Our JavaScript file will look like:<\/p>\n
    bootstrap.image.slider.js<\/em><\/span><\/p>\n
    var car = document.getElementsByClassName(\"carousel\")[0];\r\nvar first = document.getElementById(\"first\");\r\nvar second = document.getElementById(\"second\");\r\nvar third = document.getElementById(\"third\");\r\nvar prev = document.getElementById(\"prev\");\r\nvar next = document.getElementById(\"next\");\r\n\r\n\/\/Call to setup carousel initially\r\n$(car).carousel();\r\n\r\nfirst.addEventListener(\"click\", function(){\r\n    switchTo(0);\r\n});\r\nsecond.addEventListener(\"click\", function(){\r\n    switchTo(1);\r\n});\r\nthird.addEventListener(\"click\", function(){\r\n    switchTo(2);\r\n});\r\nprev.addEventListener(\"click\", function(){\r\n    $(car).carousel(\"prev\");\r\n});\r\nnext.addEventListener(\"click\", function(){\r\n    $(car).carousel(\"next\");\r\n});\r\nfunction switchTo(slideNo){\r\n    $(car).carousel(slideNo);\r\n}\r\n<\/pre>\n
    Here we attach an event listener to each of the three carousel-indicators, and call the carousel function with the 0 based index of the slide to switch to. We also attach event listeners to both the carousel-controls to implement the previous and next slide behavior of each.<\/p>\n
    5. Run the Source Code<\/h2>\n
    To run the application and see it in action, we need to run the following two commands, in this order, at the root of the project.<\/p>\n
    > npm install\r\n<\/pre>\n
    > node index.js\r\n<\/pre>\n
    Then, we need to navigate to the following URLs in a browser:
    \nhttp:\/\/localhost:8090\/<\/code>
    \nand
    \nhttp:\/\/localhost:8090\/carousel.html<\/code><\/p>\n
    6. Download the Source Code<\/h2>\n
    This source code for this example is available for download below:<\/p>\n
    Download<\/strong>
    \nYou can download the full source code of this example here : WCG – Bootstrap Image Slider Example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
    In this post we will look at the Bootstrap Carousel Component also known as Image Slider. This component is also available as an independent plugin as well. All that is required is adding the carousel.js file. But if the bootstrap.js or the minified version of it is included, there is no need for this file …<\/p>\n","protected":false},"author":213,"featured_media":8515,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[284],"tags":[376],"class_list":["post-18434","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","tag-bootstrap"],"yoast_head":"\nBootstrap Image Slider Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this post we will look at the Bootstrap Carousel Component also known as Image Slider. This component is also available as an independent plugin as\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Image Slider Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this post we will look at the Bootstrap Carousel Component also known as Image Slider. This component is also available as an independent plugin as\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-07T13:15:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T11:00:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Siddharth Seth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Siddharth Seth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/\"},\"author\":{\"name\":\"Siddharth Seth\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592\"},\"headline\":\"Bootstrap Image Slider Example\",\"datePublished\":\"2017-09-07T13:15:11+00:00\",\"dateModified\":\"2018-01-08T11:00:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/\"},\"wordCount\":977,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"keywords\":[\"bootstrap\"],\"articleSection\":[\"Bootstrap\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/\",\"name\":\"Bootstrap Image Slider Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"datePublished\":\"2017-09-07T13:15:11+00:00\",\"dateModified\":\"2018-01-08T11:00:52+00:00\",\"description\":\"In this post we will look at the Bootstrap Carousel Component also known as Image Slider. This component is also available as an independent plugin as\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Bootstrap\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/bootstrap\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Bootstrap Image Slider Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592\",\"name\":\"Siddharth Seth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"caption\":\"Siddharth Seth\"},\"description\":\"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.\",\"sameAs\":[\"https:\/\/www.webcodegeeks.com\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap Image Slider Example - Web Code Geeks - 2026","description":"In this post we will look at the Bootstrap Carousel Component also known as Image Slider. This component is also available as an independent plugin as","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:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap Image Slider Example - Web Code Geeks - 2026","og_description":"In this post we will look at the Bootstrap Carousel Component also known as Image Slider. This component is also available as an independent plugin as","og_url":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2017-09-07T13:15:11+00:00","article_modified_time":"2018-01-08T11:00:52+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","type":"image\/jpeg"}],"author":"Siddharth Seth","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Siddharth Seth","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/"},"author":{"name":"Siddharth Seth","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592"},"headline":"Bootstrap Image Slider Example","datePublished":"2017-09-07T13:15:11+00:00","dateModified":"2018-01-08T11:00:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/"},"wordCount":977,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","keywords":["bootstrap"],"articleSection":["Bootstrap"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/","name":"Bootstrap Image Slider Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","datePublished":"2017-09-07T13:15:11+00:00","dateModified":"2018-01-08T11:00:52+00:00","description":"In this post we will look at the Bootstrap Carousel Component also known as Image Slider. This component is also available as an independent plugin as","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-image-slider-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"Bootstrap","item":"https:\/\/www.webcodegeeks.com\/category\/css\/bootstrap\/"},{"@type":"ListItem","position":4,"name":"Bootstrap Image Slider Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592","name":"Siddharth Seth","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","caption":"Siddharth Seth"},"description":"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.","sameAs":["https:\/\/www.webcodegeeks.com"],"url":"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/18434","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/213"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=18434"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/18434\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/8515"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=18434"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=18434"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=18434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}