{"id":2382,"date":"2017-05-02T18:35:01","date_gmt":"2017-05-02T18:35:01","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=2382"},"modified":"2017-05-02T18:37:50","modified_gmt":"2017-05-02T18:37:50","slug":"bootstrap-carousel-image-slider","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/bootstrap-carousel-image-slider\/","title":{"rendered":"How to Create Carousel Slider with Bootstrap"},"content":{"rendered":"

There are various jQuery slideshow plugins are available for cycling through elements. But if the web application uses Bootstrap framework, an additional jQuery plugin is not needed to slideshow elements like a carousel. Bootstrap JS Carousel<\/b> (carousel.js) provides an easy way to implement a carousel slider on the web page.<\/p>\n

In this tutorial, we’ll show you how to create a carousel image slider with Bootstrap<\/b>. Also, using our example code, you can extend the Bootstrap carousel functionality and create the different types of the slider.<\/p>\n

Before you get started with Bootstrap carousel, include the Bootstrap and jQuery library first.<\/p>\n

<!-- Compiled and minified Bootstrap CSS --><\/span>\r\n<link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\"<\/span> >\r\n<!-- Minified JS library --><\/span>\r\n<script<\/span> src<\/span>=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\"<\/span>><\/script<\/span>>\r\n<!-- Compiled and minified Bootstrap JavaScript --><\/span>\r\n<script<\/span> src<\/span>=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js\"<\/span> ><\/script<\/span>>\r\n<\/pre>\n
Carousel Slider with Bootstrap<\/h2>\n
The following example creates a basic carousel slider.<\/p>\n
<div<\/span> id<\/span>=<\/span>\"myCarousel\"<\/span> class<\/span>=\"carousel slide\"<\/span> data-ride<\/span>=\"carousel\"<\/span>>\r\n    <!-- Indicators --><\/span>\r\n    <ol<\/span> class<\/span>=\"carousel-indicators\"<\/span>>\r\n        <li<\/span> data-target<\/span>=\"#myCarousel\"<\/span> data-slide-to<\/span>=\"0\"<\/span> class<\/span>=\"active\"<\/span>><\/li<\/span>>\r\n        <li<\/span> data-target<\/span>=\"#myCarousel\"<\/span> data-slide-to<\/span>=\"1\"<\/span>><\/li<\/span>>\r\n        <li<\/span> data-target<\/span>=\"#myCarousel\"<\/span> data-slide-to<\/span>=\"2\"<\/span>><\/li<\/span>>\r\n    <\/ol<\/span>>\r\n\r\n    <!-- Wrapper for slides --><\/span>\r\n    <div<\/span> class<\/span>=\"carousel-inner\"<\/span>>\r\n        <div<\/span> class<\/span>=\"item active\"<\/span>>\r\n            <img<\/span> src<\/span>=\"images\/image-1.jpg\"<\/span> alt<\/span>=\"\"<\/span>>\r\n        <\/div<\/span>>\r\n        <div<\/span> class<\/span>=\"item\"<\/span>>\r\n            <img<\/span> src<\/span>=\"images\/image-2.jpeg\"<\/span> alt<\/span>=\"\"<\/span>>\r\n        <\/div<\/span>>\r\n        <div<\/span> class<\/span>=\"item\"<\/span>>\r\n            <img<\/span> src<\/span>=\"images\/image-3.jpeg\"<\/span> alt<\/span>=\"\"<\/span>>\r\n        <\/div<\/span>>\r\n    <\/div<\/span>>\r\n\r\n    <!-- Controls --><\/span>\r\n    <a<\/span> class<\/span>=\"left carousel-control\"<\/span> href<\/span>=\"#myCarousel\"<\/span> data-slide<\/span>=\"prev\"<\/span>>\r\n        <span<\/span> class<\/span>=\"glyphicon glyphicon-chevron-left\"<\/span>><\/span<\/span>>\r\n        <span<\/span> class<\/span>=\"sr-only\"<\/span>>Previous<\/span<\/span>>\r\n    <\/a<\/span>>\r\n    <a<\/span> class<\/span>=\"right carousel-control\"<\/span> href<\/span>=\"#myCarousel\"<\/span> data-slide<\/span>=\"next\"<\/span>>\r\n        <span<\/span> class<\/span>=\"glyphicon glyphicon-chevron-right\"<\/span>><\/span<\/span>>\r\n        <span<\/span> class<\/span>=\"sr-only\"<\/span>>Next<\/span<\/span>>\r\n    <\/a<\/span>>\r\n<\/div<\/span>>\r\n<\/pre>\n
Bootstrap Carousel Slider with Captions<\/h2>\n
The following example creates a carousel slider and adds captions to slides.<\/p>\n
<div<\/span> id<\/span>=<\/span>\"myCarousel\"<\/span> class<\/span>=\"carousel slide\"<\/span> data-ride<\/span>=\"carousel\"<\/span>>\r\n    <!-- Indicators --><\/span>\r\n    <ol<\/span> class<\/span>=\"carousel-indicators\"<\/span>>\r\n        <li<\/span> data-target<\/span>=\"#myCarousel\"<\/span> data-slide-to<\/span>=\"0\"<\/span> class<\/span>=\"active\"<\/span>><\/li<\/span>>\r\n        <li<\/span> data-target<\/span>=\"#myCarousel\"<\/span> data-slide-to<\/span>=\"1\"<\/span>><\/li<\/span>>\r\n        <li<\/span> data-target<\/span>=\"#myCarousel\"<\/span> data-slide-to<\/span>=\"2\"<\/span>><\/li<\/span>>\r\n    <\/ol<\/span>>\r\n\r\n    <!-- Wrapper for slides --><\/span>\r\n    <div<\/span> class<\/span>=\"carousel-inner\"<\/span>>\r\n        <div<\/span> class<\/span>=\"item active\"<\/span>>\r\n            <img<\/span> src<\/span>=\"images\/image-1.jpg\"<\/span> alt<\/span>=\"\"<\/span>>\r\n            <div<\/span> class<\/span>=\"carousel-caption\"<\/span>>\r\n                <h3<\/span>>First Slide<\/h3<\/span>>\r\n                <p<\/span>>This is the first image slide<\/p<\/span>>\r\n            <\/div<\/span>>\r\n        <\/div<\/span>>\r\n  \r\n        <div<\/span> class<\/span>=\"item\"<\/span>>\r\n            <img<\/span> src<\/span>=\"images\/image-2.jpeg\"<\/span> alt<\/span>=\"\"<\/span>>\r\n            <div<\/span> class<\/span>=\"carousel-caption\"<\/span>>\r\n                <h3<\/span>>Second Slide<\/h3<\/span>>\r\n                <p<\/span>>This is the second image slide<\/p<\/span>>\r\n            <\/div<\/span>>\r\n        <\/div<\/span>>\r\n        \r\n        <div<\/span> class<\/span>=\"item\"<\/span>>\r\n            <img<\/span> src<\/span>=\"images\/image-3.jpeg\"<\/span> alt<\/span>=\"\"<\/span>>\r\n            <div<\/span> class<\/span>=\"carousel-caption\"<\/span>>\r\n                <h3<\/span>>Third Slide<\/h3<\/span>>\r\n                <p<\/span>>This is the third image slide<\/p<\/span>>\r\n            <\/div<\/span>>\r\n        <\/div<\/span>>\r\n    <\/div<\/span>>\r\n\r\n    <!-- Controls --><\/span>\r\n    <a<\/span> class<\/span>=\"left carousel-control\"<\/span> href<\/span>=\"#myCarousel\"<\/span> data-slide<\/span>=\"prev\"<\/span>>\r\n        <span<\/span> class<\/span>=\"glyphicon glyphicon-chevron-left\"<\/span>><\/span<\/span>>\r\n        <span<\/span> class<\/span>=\"sr-only\"<\/span>>Previous<\/span<\/span>>\r\n    <\/a<\/span>>\r\n    <a<\/span> class<\/span>=\"right carousel-control\"<\/span> href<\/span>=\"#myCarousel\"<\/span> data-slide<\/span>=\"next\"<\/span>>\r\n        <span<\/span> class<\/span>=\"glyphicon glyphicon-chevron-right\"<\/span>><\/span<\/span>>\r\n        <span<\/span> class<\/span>=\"sr-only\"<\/span>>Next<\/span<\/span>>\r\n    <\/a<\/span>>\r\n<\/div<\/span>>\r\n<\/pre>\n
Bootstrap Carousel Slider with Custom Controls<\/h2>\n
The following example calls carousel manually and provides the custom controls to cycles previous and next item.<\/p>\n
<div<\/span> id<\/span>=<\/span>\"myCarouselCustom\"<\/span> class<\/span>=\"carousel slide\"<\/span> data-ride<\/span>=\"carousel\"<\/span>>\r\n    <!-- Indicators --><\/span>\r\n    <ol<\/span> class<\/span>=\"carousel-indicators\"<\/span>>\r\n        <li<\/span> data-target<\/span>=\"#myCarouselCustom\"<\/span> data-slide-to<\/span>=\"0\"<\/span> class<\/span>=\"active\"<\/span>><\/li<\/span>>\r\n        <li<\/span> data-target<\/span>=\"#myCarouselCustom\"<\/span> data-slide-to<\/span>=\"1\"<\/span>><\/li<\/span>>\r\n        <li<\/span> data-target<\/span>=\"#myCarouselCustom\"<\/span> data-slide-to<\/span>=\"2\"<\/span>><\/li<\/span>>\r\n    <\/ol<\/span>>\r\n\r\n    <!-- Wrapper for slides --><\/span>\r\n    <div<\/span> class<\/span>=\"carousel-inner\"<\/span>>\r\n        <div<\/span> class<\/span>=\"item active\"<\/span>>\r\n            <img<\/span> src<\/span>=\"images\/image-1.jpg\"<\/span> alt<\/span>=\"\"<\/span>>\r\n            <div<\/span> class<\/span>=\"carousel-caption\"<\/span>>\r\n                <h3<\/span>>First Slide<\/h3<\/span>>\r\n                <p<\/span>>This is the first image slide<\/p<\/span>>\r\n            <\/div<\/span>>\r\n        <\/div<\/span>>\r\n  \r\n        <div<\/span> class<\/span>=\"item\"<\/span>>\r\n            <img<\/span> src<\/span>=\"images\/image-2.jpeg\"<\/span> alt<\/span>=\"\"<\/span>>\r\n            <div<\/span> class<\/span>=\"carousel-caption\"<\/span>>\r\n                <h3<\/span>>Second Slide<\/h3<\/span>>\r\n                <p<\/span>>This is the second image slide<\/p<\/span>>\r\n            <\/div<\/span>>\r\n        <\/div<\/span>>\r\n        \r\n        <div<\/span> class<\/span>=\"item\"<\/span>>\r\n            <img<\/span> src<\/span>=\"images\/image-3.jpeg\"<\/span> alt<\/span>=\"\"<\/span>>\r\n            <div<\/span> class<\/span>=\"carousel-caption\"<\/span>>\r\n                <h3<\/span>>Third Slide<\/h3<\/span>>\r\n                <p<\/span>>This is the third image slide<\/p<\/span>>\r\n            <\/div<\/span>>\r\n        <\/div<\/span>>\r\n    <\/div<\/span>>\r\n\r\n    <!-- Controls --><\/span>\r\n    <a<\/span> class<\/span>=\"left carousel-control\"<\/span> href<\/span>=\"#myCarousel\"<\/span> data-slide<\/span>=\"prev\"<\/span>>\r\n        <span<\/span> class<\/span>=\"glyphicon glyphicon-chevron-left\"<\/span>><\/span<\/span>>\r\n        <span<\/span> class<\/span>=\"sr-only\"<\/span>>Previous<\/span<\/span>>\r\n    <\/a<\/span>>\r\n    <a<\/span> class<\/span>=\"right carousel-control\"<\/span> href<\/span>=\"#myCarousel\"<\/span> data-slide<\/span>=\"next\"<\/span>>\r\n        <span<\/span> class<\/span>=\"glyphicon glyphicon-chevron-right\"<\/span>><\/span<\/span>>\r\n        <span<\/span> class<\/span>=\"sr-only\"<\/span>>Next<\/span<\/span>>\r\n    <\/a<\/span>>\r\n<\/div<\/span>>\r\n<!-- Custom Controls --><\/span>\r\n<a<\/span> href<\/span>=\"javascript:void(0);\"<\/span> id<\/span>=<\/span>\"prevBtn\"<\/span>>Prev Slide<\/a<\/span>>\r\n<a<\/span> href<\/span>=\"javascript:void(0);\"<\/span> id<\/span>=<\/span>\"nextBtn\"<\/span>>Next Slide<\/a<\/span>>\r\n<\/pre>\n
JavaScript Code:<\/b><\/p>\n
<script<\/span> type<\/span>=\"text\/javascript\"<\/span>>\r\n\/\/ Call carousel manually<\/span>\r\n$<\/span>('#myCarouselCustom<\/span>').carousel();\r\n\r\n\/\/ Go to the previous item<\/span>\r\n$<\/span>(\"#prevBtn<\/span>\").click<\/span>(function<\/span>(){\r\n    $<\/span>(\"#myCarouselCustom<\/span>\").carousel(\"prev\"<\/span>);\r\n});\r\n\/\/ Go to the previous item<\/span>\r\n$<\/span>(\"#nextBtn<\/span>\").click<\/span>(function<\/span>(){\r\n    $<\/span>(\"#myCarouselCustom<\/span>\").carousel(\"next\"<\/span>);\r\n});\r\n<\/script<\/span>>\r\n<\/pre>\n
Carousel Options<\/h2>\n
The following options are available to configure Bootstrap Carousel as per your needs.<\/p>\n
    \n
  • interval<\/b> (number) – Specifies the amount of time to delay between automatically cycling. Set false<\/code> to stop automatically cycling. Default delay time is 5000<\/code> milliseconds. <\/li>\n
  • pause<\/b> (string | null) – Pauses the cycling on mouseenter and resumes the cycling on mouseleave. Set false<\/code> to stop pause cycling on hover. The default value is hover<\/code>.<\/li>\n
  • wrap<\/b> (boolean) – Specifies whether the carousel should cycle continuously or stop at last slide. The default value is true<\/code>.<\/li>\n
  • keyboard<\/b> (boolean) – Specifies whether the carousel should react to keyboard events. The default value is true<\/code>.<\/li>\n<\/ul>\n
    How to Use Carousel Options<\/h2>\n
    The following example shows how you can specify the carousel options.<\/p>\n
    <script<\/span> type<\/span>=\"text\/javascript\"<\/span>>\r\n$<\/span>('.carousel<\/span>').carousel({\r\n     interval: 8000<\/span>,\r\n     pause:true<\/span>,\r\n     wrap:false<\/span>\r\n});\r\n<\/script<\/span>>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
    There are various jQuery slideshow plugins are available for cycling through elements. But if the web application uses Bootstrap framework, an additional jQuery plugin is not needed to slideshow elements like a carousel. Bootstrap JS <\/p>\n","protected":false},"author":1,"featured_media":2383,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[274],"tags":[275,281,282],"class_list":["post-2382","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","tag-bootstrap","tag-carousel","tag-slider","cat-274-id","has_thumb"],"yoast_head":"\nHow to Create Carousel Slider with Bootstrap - CodexWorld<\/title>\n<meta name=\"description\" content=\"Bootstrap JS Carousel - Create carousel slider with Bootstrap carousel.js. Example code to create Bootstrap carousel slider with custom controls without any jQuery plugin.\" \/>\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.codexworld.com\/bootstrap-carousel-image-slider\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Carousel Slider with Bootstrap - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Bootstrap JS Carousel - Create carousel slider with Bootstrap carousel.js. Example code to create Bootstrap carousel slider with custom controls without any jQuery plugin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/bootstrap-carousel-image-slider\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-02T18:35:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-05-02T18:37:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/05\/create-carousel-image-slider-bootstrap-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-carousel-image-slider\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-carousel-image-slider\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"How to Create Carousel Slider with Bootstrap\",\"datePublished\":\"2017-05-02T18:35:01+00:00\",\"dateModified\":\"2017-05-02T18:37:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-carousel-image-slider\\\/\"},\"wordCount\":277,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-carousel-image-slider\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/create-carousel-image-slider-bootstrap-codexworld.png\",\"keywords\":[\"Bootstrap\",\"Carousel\",\"Slider\"],\"articleSection\":[\"Bootstrap\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-carousel-image-slider\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-carousel-image-slider\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-carousel-image-slider\\\/\",\"name\":\"How to Create Carousel Slider with Bootstrap - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-carousel-image-slider\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-carousel-image-slider\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/create-carousel-image-slider-bootstrap-codexworld.png\",\"datePublished\":\"2017-05-02T18:35:01+00:00\",\"dateModified\":\"2017-05-02T18:37:50+00:00\",\"description\":\"Bootstrap JS Carousel - Create carousel slider with Bootstrap carousel.js. Example code to create Bootstrap carousel slider with custom controls without any jQuery plugin.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-carousel-image-slider\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-carousel-image-slider\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-carousel-image-slider\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/create-carousel-image-slider-bootstrap-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/create-carousel-image-slider-bootstrap-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"create-carousel-image-slider-bootstrap-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-carousel-image-slider\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create Carousel Slider with Bootstrap\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web & Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Carousel Slider with Bootstrap - CodexWorld","description":"Bootstrap JS Carousel - Create carousel slider with Bootstrap carousel.js. Example code to create Bootstrap carousel slider with custom controls without any jQuery plugin.","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.codexworld.com\/bootstrap-carousel-image-slider\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Carousel Slider with Bootstrap - CodexWorld","og_description":"Bootstrap JS Carousel - Create carousel slider with Bootstrap carousel.js. Example code to create Bootstrap carousel slider with custom controls without any jQuery plugin.","og_url":"https:\/\/www.codexworld.com\/bootstrap-carousel-image-slider\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2017-05-02T18:35:01+00:00","article_modified_time":"2017-05-02T18:37:50+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/05\/create-carousel-image-slider-bootstrap-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/bootstrap-carousel-image-slider\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/bootstrap-carousel-image-slider\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"How to Create Carousel Slider with Bootstrap","datePublished":"2017-05-02T18:35:01+00:00","dateModified":"2017-05-02T18:37:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/bootstrap-carousel-image-slider\/"},"wordCount":277,"commentCount":0,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/bootstrap-carousel-image-slider\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/05\/create-carousel-image-slider-bootstrap-codexworld.png","keywords":["Bootstrap","Carousel","Slider"],"articleSection":["Bootstrap"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/bootstrap-carousel-image-slider\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/bootstrap-carousel-image-slider\/","url":"https:\/\/www.codexworld.com\/bootstrap-carousel-image-slider\/","name":"How to Create Carousel Slider with Bootstrap - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/bootstrap-carousel-image-slider\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/bootstrap-carousel-image-slider\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/05\/create-carousel-image-slider-bootstrap-codexworld.png","datePublished":"2017-05-02T18:35:01+00:00","dateModified":"2017-05-02T18:37:50+00:00","description":"Bootstrap JS Carousel - Create carousel slider with Bootstrap carousel.js. Example code to create Bootstrap carousel slider with custom controls without any jQuery plugin.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/bootstrap-carousel-image-slider\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/bootstrap-carousel-image-slider\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/bootstrap-carousel-image-slider\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/05\/create-carousel-image-slider-bootstrap-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/05\/create-carousel-image-slider-bootstrap-codexworld.png","width":1366,"height":768,"caption":"create-carousel-image-slider-bootstrap-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/bootstrap-carousel-image-slider\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"How to Create Carousel Slider with Bootstrap"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web & Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/05\/create-carousel-image-slider-bootstrap-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-Cq","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=2382"}],"version-history":[{"count":3,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2382\/revisions"}],"predecessor-version":[{"id":2386,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2382\/revisions\/2386"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/2383"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=2382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=2382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=2382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}