{"id":5425,"date":"2018-01-21T02:30:40","date_gmt":"2018-01-21T02:30:40","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=5425"},"modified":"2023-10-27T13:11:42","modified_gmt":"2023-10-27T13:11:42","slug":"9-examples-learn-bootstrap-4-carouselslider-slideshows","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/9-examples-learn-bootstrap-4-carouselslider-slideshows\/","title":{"rendered":"Bootstrap 4 Carousel\/Slider Component"},"content":{"rendered":"<p>For creating slideshows of images or marketing text or some other content, you may use the carousel component of Bootstrap 4 Framework.<\/p>\n<div id='stb-container-4074' class='stb-container-css stb-info-container stb-no-caption stb-image-big stb-ltr stb-corners stb-shadow stb-border stb-side' style='border: 2px solid #e31717;'><aside class='stb-icon'><img src='https:\/\/www.jquery-az.com\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-dark\/info.png'><\/aside><div id='stb-box-4074' class='stb-info_box stb-box' ><strong>Note:<\/strong> A newer tutorial based on Bootstrap 5 is available: <a href=\"\/bootstrap-5-carousel\/\">Bootstrap 5 Carousel<\/a><\/div><\/div>\n<p>The built-in features allow you to create a carousel where images or custom content can slide. Optionally, you may also include controls for moving slides manually. You may also add indicators to let the users know which slide they are on by using built-in features.<\/p>\n<p>I will show all these examples plus how to customize the <a href=\"https:\/\/www.jquery-az.com\/bootstrap-carousel-5-single-multiple-horizontal-and-vertical-sliding-demos\/\">carousel in Bootstrap<\/a> 4 for multiple images, vertical sliders, and more; so keep reading.<\/p>\n<h3><strong>An example of simple sliding carousel<\/strong><\/h3>\n<p>Let us go step by step for using various built-in capabilities of the Bootstrap 4 carousel. The first example simply slides three images with default speed. The default interval for sliding image\/content is <strong>5000 MS<\/strong> (5 seconds). Have a look:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-5426\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/17-1-Bootstrap-4-carousel-images.jpg\" alt=\"Bootstrap 4 carousel images\" width=\"493\" height=\"524\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/17-1-Bootstrap-4-carousel-images.jpg 493w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/17-1-Bootstrap-4-carousel-images-282x300.jpg 282w\" sizes=\"(max-width: 493px) 100vw, 493px\" \/><\/p>\n<h6><a href=\"\/bootstrap4\/demo.php?ex=85.0_1\" target=\"_blank\" rel=\"noopener nofollow\"><strong>Online demo and code<\/strong><\/a><\/h6>\n<p><strong>The code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div id=\"bs4-slide-carousel\" class=\"carousel slide\" data-ride=\"carousel\" &gt;\r\n\r\n\u00a0 &lt;div class=\"carousel-inner\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"carousel-item active\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;img class=\"d-block w-50\" src=\"images\/BS-slide-1.jpeg\" alt=\"Slide One\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"carousel-item\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;img class=\"d-block w-50\" src=\"images\/BS-slide-2.jpg\" alt=\"Slide Two\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"carousel-item\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;img class=\"d-block w-50\" src=\"images\/BS-slide-3.jpeg\" alt=\"Slide Three\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n\r\n&lt;\/div&gt;<\/pre>\n<p>For creating a simple slider, use the <strong><em>.carousel<\/em><\/strong> and <strong><em>.slider<\/em><\/strong> classes in the main &lt;div&gt; element. In that div element, assign the ID that is unique and can be used in JavaScript (as I will show in the examples below).<\/p>\n<p>The inner div elements are assigned the<em><strong> .carousel-item<\/strong><\/em> classes. To make a slide default as the web page loads, use the <strong><em>active<\/em><\/strong> class.<\/p>\n<h3><strong>Changing the slider interval example<\/strong><\/h3>\n<p>Five seconds sounds so high for a simple image slider or still want to increase the interval between two slides? No problem, use the <strong><em>data-interval=&#8221;&#8221;<\/em><\/strong> data attribute or <em><strong>interval<\/strong> <\/em>option in the jQuery code.<\/p>\n<p>See the demo where I used <strong>2000 ms<\/strong> value in JavaScript. There I used the ID of the carousel as follows.<\/p>\n<p>The markup remains the same as in the above example. Only this code of jQuery is added above the &lt;\/body&gt; tag:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">&lt;script&gt;\r\n\r\n$('#bs4-slide-carousel').carousel({\r\n\r\n\u00a0 interval: 2000\r\n\r\n})\r\n\r\n&lt;\/script&gt;<\/pre>\n<h3><strong>Adding the next\/previous controls in the carousel example<\/strong><\/h3>\n<p>The &lt;a&gt; tags are used for linking the slides navigation with the <strong>div ID<\/strong> of the carousel component. The icons are specified in the &lt;span&gt; tag. You may use third-party icons like font-awesome there as well.<\/p>\n<p>Have a look:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-5427\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/17-2-Bootstrap-4-carousel-controls.jpg\" alt=\"Bootstrap 4 carousel controls\" width=\"535\" height=\"216\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/17-2-Bootstrap-4-carousel-controls.jpg 535w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/17-2-Bootstrap-4-carousel-controls-300x121.jpg 300w\" sizes=\"(max-width: 535px) 100vw, 535px\" \/><\/p>\n<p><strong>The markup for the demo:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"container\"&gt;\r\n\r\n\u00a0 &lt;h3&gt;Bootstrap 4 Carousel Demo&lt;\/h2&gt;\r\n\r\n\r\n\r\n&lt;div id=\"bs4-slide-carousel\" class=\"carousel slide\" data-ride=\"carousel\" &gt;\r\n\r\n\u00a0 &lt;div class=\"carousel-inner\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"carousel-item active\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;img class=\"d-block w-100\" src=\"images\/BS-slide-1.jpeg\" alt=\"Slide One\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"carousel-item\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;img class=\"d-block w-100\" src=\"images\/BS-slide-2.jpg\" alt=\"Slide Two\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"carousel-item\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;img class=\"d-block w-100\" src=\"images\/BS-slide-3.jpeg\" alt=\"Slide Three\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 &lt;a class=\"carousel-control-prev\" href=\"#bs4-slide-carousel\" role=\"button\" data-slide=\"prev\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"&gt;&lt;\/span&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;span class=\"sr-only\"&gt;Previous&lt;\/span&gt;\r\n\r\n\u00a0 &lt;\/a&gt;\r\n\r\n\u00a0 &lt;a class=\"carousel-control-next\" href=\"#bs4-slide-carousel\" role=\"button\" data-slide=\"next\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;span class=\"carousel-control-next-icon\" aria-hidden=\"true\"&gt;&lt;\/span&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;span class=\"sr-only\"&gt;Next&lt;\/span&gt;\r\n\r\n\u00a0 &lt;\/a&gt;\u00a0\r\n\r\n&lt;\/div&gt;\r\n\r\n\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;script&gt;\r\n\r\n$('#bs4-slide-carousel').carousel({\r\n\r\n\u00a0 interval: 3000\r\n\r\n})\r\n\r\n&lt;\/script&gt;<\/pre>\n<p>You can also see that a second interval is used for this example.<\/p>\n<h3><strong>The example of adding indicators in the carousel<\/strong><\/h3>\n<p>The indicators will help the visitors know which slides they are currently on and if they wish can move quickly to the desired slide by next\/previous arrows.<\/p>\n<p>The indicators are added by using the &lt;ul&gt; and &lt;ol&gt; tags and using the<em><strong> .carousel-indicators<\/strong><\/em>\u00a0class in the &lt;ul&gt; tag as follows:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-5428\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/17-3-Bootstrap-4-carousel-ind.jpg\" alt=\"Bootstrap 4 carousel indicators\" width=\"553\" height=\"391\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/17-3-Bootstrap-4-carousel-ind.jpg 553w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/17-3-Bootstrap-4-carousel-ind-300x212.jpg 300w\" sizes=\"(max-width: 553px) 100vw, 553px\" \/><\/p>\n<p><strong>Complete code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0\/css\/bootstrap.min.css\" integrity=\"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW\/dAiS6JXm\" crossorigin=\"anonymous\"&gt;\r\n  \r\n&lt;script src=\"https:\/\/code.jquery.com\/jquery-3.2.1.slim.min.js\" integrity=\"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr\/rE9\/Qpg6aAZGJwFDMVNA\/GpGFF93hXpG5KkN\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.12.9\/umd\/popper.min.js\" integrity=\"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K\/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0\/js\/bootstrap.min.js\" integrity=\"sha384-JZR6Spejh4U02d8jOt6vLEHfe\/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;  \r\n\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;div class=\"container\"&gt;\r\n  &lt;h3&gt;Bootstrap 4 Carousel Demo&lt;\/h2&gt;\r\n \r\n&lt;div id=\"bs4-slide-carousel\" class=\"carousel slide\" data-ride=\"carousel\" &gt;\r\n  &lt;ol class=\"carousel-indicators\"&gt;\r\n    &lt;li data-target=\"#bs4-slide-carousel\" data-slide-to=\"0\" class=\"active\"&gt;&lt;\/li&gt;\r\n    &lt;li data-target=\"#bs4-slide-carousel\" data-slide-to=\"1\"&gt;&lt;\/li&gt;\r\n    &lt;li data-target=\"#bs4-slide-carousel\" data-slide-to=\"2\"&gt;&lt;\/li&gt;\r\n  &lt;\/ol&gt;\r\n  &lt;div class=\"carousel-inner\"&gt;\r\n    &lt;div class=\"carousel-item active\"&gt;\r\n      &lt;img class=\"d-block mx-auto img-fluid\" src=\"images\/BS-slide-1.jpeg\" alt=\"Slide One\"&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"carousel-item\"&gt;\r\n      &lt;img class=\"d-block mx-auto img-fluid\" src=\"images\/BS-slide-2.jpg\" alt=\"Slide Two\"&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"carousel-item\"&gt;\r\n      &lt;img class=\"d-block mx-auto img-fluid\" src=\"images\/BS-slide-3.jpeg\" alt=\"Slide Three\"&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;a class=\"carousel-control-prev\" href=\"#bs4-slide-carousel\" role=\"button\" data-slide=\"prev\"&gt;\r\n    &lt;span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"&gt;&lt;\/span&gt;\r\n    &lt;span class=\"sr-only\"&gt;Previous&lt;\/span&gt;\r\n  &lt;\/a&gt;\r\n  &lt;a class=\"carousel-control-next\" href=\"#bs4-slide-carousel\" role=\"button\" data-slide=\"next\"&gt;\r\n    &lt;span class=\"carousel-control-next-icon\" aria-hidden=\"true\"&gt;&lt;\/span&gt;\r\n    &lt;span class=\"sr-only\"&gt;Next&lt;\/span&gt;\r\n  &lt;\/a&gt;  \r\n&lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n&lt;script&gt;\r\n$('#bs4-slide-carousel').carousel({\r\n  interval: 3000\r\n})\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n\r\n<\/pre>\n<h3><strong>Next thing \u2013 adding captions to slides example<\/strong><\/h3>\n<p>Use the <strong><em>.carousel-caption<\/em><\/strong> in the element where the carousel item is created by using<strong> .carousel-item<\/strong> class (generally a div).<\/p>\n<p>There, you may use any headings, paragraphs, buttons, links, etc as part of the content for the specific slide in the carousel.<\/p>\n<p>In the following demo, I have used the same carousel as in the above example and added headings, text in a paragraph, and a button by using various classes of Bootstrap 4:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-5429\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/17-4-Bootstrap4-carousel-captions.jpg\" alt=\"Bootstrap4 carousel captions\" width=\"554\" height=\"403\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/17-4-Bootstrap4-carousel-captions.jpg 554w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/17-4-Bootstrap4-carousel-captions-300x218.jpg 300w\" sizes=\"(max-width: 554px) 100vw, 554px\" \/><\/p>\n<p>The markup:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"container\"&gt;\r\n\r\n\u00a0 &lt;h3&gt;Bootstrap 4 Carousel Demo&lt;\/h2&gt;\r\n\r\n\r\n\r\n&lt;div id=\"bs4-slide-carousel\" class=\"carousel slide\" data-ride=\"carousel\" &gt;\r\n\r\n\u00a0 &lt;ol class=\"carousel-indicators\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;li data-target=\"#bs4-slide-carousel\" data-slide-to=\"0\" class=\"active\"&gt;&lt;\/li&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;li data-target=\"#bs4-slide-carousel\" data-slide-to=\"1\"&gt;&lt;\/li&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;li data-target=\"#bs4-slide-carousel\" data-slide-to=\"2\"&gt;&lt;\/li&gt;\r\n\r\n\u00a0 &lt;\/ol&gt;\r\n\r\n\u00a0 &lt;div class=\"carousel-inner\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"carousel-item active\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;img class=\"d-inline w-100\" src=\"images\/BS-slide-1.jpeg\" alt=\"Slide One\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;!--Captions for the slides go here --&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"carousel-caption text-success d-none d-sm-block\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;h5&gt;The demo of using text in carousel Bootstrap&lt;\/h5&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;p class=\"text-light\"&gt;Another caption line goes here\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;button class=\"btn btn-outline-primary btn-lg\"&gt;More info&lt;\/button&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/p&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;!--Captions ending here for slide 1--&gt;\u00a0\r\n\r\n\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"carousel-item\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;img class=\"d-inline w-100\" src=\"images\/BS-slide-2.jpg\" alt=\"Slide Two\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;!--Captions for the slides go here --&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"carousel-caption text-white d-none d-sm-block\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;h5&gt;The demo of using text in carousel Bootstrap&lt;\/h5&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;p class=\"text-light\"&gt;Another caption line goes here\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;button class=\"btn btn-primary btn-lg\"&gt;More info&lt;\/button&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/p&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;!--Captions ending here for slide 2--&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"carousel-item\"&gt;\r\n\r\n\u00a0 \u00a0\u00a0\u00a0\u00a0&lt;img class=\"d-block w-100\" src=\"images\/BS-slide-3.jpeg\" alt=\"Slide Three\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;!--Captions for the slides go here --&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"carousel-caption text-warning d-none d-sm-block\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;h5&gt;The demo of using text in carousel Bootstrap&lt;\/h5&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;p class=\"text-light\"&gt;Another caption line goes here\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;button class=\"btn btn-outline-warning btn-lg\"&gt;More info&lt;\/button&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/p&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;!--Captions ending here for slide 3--&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 &lt;a class=\"carousel-control-prev\" href=\"#bs4-slide-carousel\" role=\"button\" data-slide=\"prev\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"&gt;&lt;\/span&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;span class=\"sr-only\"&gt;Previous&lt;\/span&gt;\r\n\r\n\u00a0 &lt;\/a&gt;\r\n\r\n\u00a0 &lt;a class=\"carousel-control-next\" href=\"#bs4-slide-carousel\" role=\"button\" data-slide=\"next\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;span class=\"carousel-control-next-icon\" aria-hidden=\"true\"&gt;&lt;\/span&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;span class=\"sr-only\"&gt;Next&lt;\/span&gt;\r\n\r\n\u00a0 &lt;\/a&gt;\u00a0\r\n\r\n&lt;\/div&gt;\r\n\r\n\r\n\r\n&lt;\/div&gt;<\/pre>\n<h3><strong>A demo of Bootstrap 4 vertical slider\/carousel<\/strong><\/h3>\n<p>There is no specific built-in CSS or JavaScript in Bootstrap 4 for creating a vertical slider like a carousel. So, you have to use custom stuff if you intend to create a carousel based on Bootstrap 4 where slides move vertically.<\/p>\n<p>See the demo below where custom CSS is used for moving the slides vertically. The captions and other custom content for the demo are added to the fourth carousel item. The indicators are also used in the above horizontal sliders:<\/p>\n<h6><a href=\"\/bootstrap4\/demo.php?ex=85.0_6\" target=\"_blank\" rel=\"noopener nofollow\"><strong>See online demo and code<\/strong><\/a><\/h6>\n<p><strong>The markup and script for the example:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"container\"&gt;\r\n\r\n&lt;h3 class=\"text-success\"&gt;A demo of vertical carousel in BS4&lt;\/h3&gt;\r\n\r\n\r\n\r\n&lt;div class=\"container\"&gt;\r\n\r\n&lt;div id=\"bs4-vertical-slide-carousel\" class=\"carousel bs-vertical-slider slide\" data-ride=\"carousel\"&gt;\r\n\r\n&lt;ol class=\"carousel-indicators\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;li data-target=\"#bs4-vertical-slide-carousel\" data-slide-to=\"0\" class=\"active\"&gt;&lt;\/li&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;li data-target=\"#bs4-vertical-slide-carousel\" data-slide-to=\"1\"&gt;&lt;\/li&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;li data-target=\"#bs4-vertical-slide-carousel\" data-slide-to=\"2\"&gt;&lt;\/li&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;li data-target=\"#bs4-vertical-slide-carousel\" data-slide-to=\"3\"&gt;&lt;\/li&gt;\r\n\r\n&lt;\/ol&gt;\r\n\r\n\r\n\r\n&lt;div class=\"carousel-inner\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"carousel-item active\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;img class=\"d-block mx-auto img-fluid\" src=\"images\/BS-slide-1.jpeg\" alt=\"Slide Number 1\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"carousel-item\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;img class=\"d-block mx-auto img-fluid\" src=\"images\/BS-slide-2.jpg\" alt=\"Slide Number 2\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"carousel-item\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;img class=\"d-block mx-auto img-fluid\" src=\"images\/BS-slide-3.jpeg\" alt=\"Slide Number 3\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"carousel-item\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;img class=\"d-block mx-auto img-fluid\" src=\"images\/BS-slide-4.jpeg\" alt=\"Slide Number 4\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;!--Captions for the slides go here --&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"carousel-caption text-danger d-none d-sm-block\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;h5&gt;Vertical Carousel Demo&lt;\/h5&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;p class=\"text-light\"&gt;Slides moving vertically rather default horizontal\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;button class=\"btn btn-outline-info btn-lg\"&gt;More info&lt;\/button&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/p&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;!--Captions ending here for slide 3--&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n\r\n\r\n&lt;script&gt;\r\n\r\n$('#bs4-vertical-slide-carousel').carousel({\r\n\r\n\u00a0 interval: 2000\r\n\r\n})\r\n\r\n&lt;\/script&gt;<\/pre>\n<p>Get the full code including the required CSS on the demo page\u2019s code section.<\/p>\n<h3><strong>Next \/ Previous \/ Pause methods example<\/strong><\/h3>\n<p>We have seen using the controls for moving to the next or previous slides. You may also use the carousel built-in methods: <em><strong>next, previous and pause<\/strong><\/em> for moving to the next or previous slide while the pause method can be used to stop the sliding.<\/p>\n<p>You may attach these methods to buttons outside of the carousel or use other elements e.g. links.<\/p>\n<p>In this example, three buttons are created where these methods are attached.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-5431\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/17-6-Bootstrap4-carousel-bu.jpg\" alt=\"Bootstrap4 carousel buttons\" width=\"564\" height=\"359\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/17-6-Bootstrap4-carousel-bu.jpg 564w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/17-6-Bootstrap4-carousel-bu-300x191.jpg 300w\" sizes=\"(max-width: 564px) 100vw, 564px\" \/><\/p>\n<p>The carousel with buttons markup:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"container\"&gt;\r\n\r\n\u00a0 &lt;h3 class=\"text-success\"&gt;Carousel with Buttons Demo&lt;\/h3&gt;\r\n\r\n\r\n\r\n&lt;div id=\"bs4-slide-carousel\" class=\"carousel slide\" data-ride=\"carousel\" &gt;\r\n\r\n\u00a0 &lt;ol class=\"carousel-indicators\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;li data-target=\"#bs4-slide-carousel\" data-slide-to=\"0\" class=\"active\"&gt;&lt;\/li&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;li data-target=\"#bs4-slide-carousel\" data-slide-to=\"1\"&gt;&lt;\/li&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;li data-target=\"#bs4-slide-carousel\" data-slide-to=\"2\"&gt;&lt;\/li&gt;\r\n\r\n\u00a0 &lt;\/ol&gt;\r\n\r\n\u00a0 &lt;div class=\"carousel-inner\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"carousel-item active\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;img class=\"d-block mx-auto\" src=\"images\/BS-slide-1.jpeg\" alt=\"Slide One\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;!--Captions for the slides go here --&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"carousel-caption text-success d-none d-sm-block\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;h5&gt;The demo of using text in carousel Bootstrap&lt;\/h5&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;p class=\"text-light\"&gt;Another caption line goes here\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;button class=\"btn btn-outline-primary btn-lg\"&gt;More info&lt;\/button&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/p&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;!--Captions ending here for slide 1--&gt;\u00a0\r\n\r\n\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"carousel-item\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;img class=\"d-block mx-auto\" src=\"images\/BS-slide-2.jpg\" alt=\"Slide Two\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;!--Captions for the slides go here --&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"carousel-caption text-white d-none d-sm-block\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;h5&gt;The demo of using text in carousel Bootstrap&lt;\/h5&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;p class=\"text-light\"&gt;Another caption line goes here\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;button class=\"btn btn-primary btn-lg\"&gt;More info&lt;\/button&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0&lt;\/p&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;!--Captions ending here for slide 2--&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"carousel-item\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;img class=\"d-block mx-auto\" src=\"images\/BS-slide-3.jpeg\" alt=\"Slide Three\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;!--Captions for the slides go here --&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"carousel-caption text-warning d-none d-sm-block\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;h5&gt;The demo of using text in carousel Bootstrap&lt;\/h5&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;p class=\"text-light\"&gt;Another caption line goes here\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;button class=\"btn btn-outline-warning btn-lg\"&gt;More info&lt;\/button&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/p&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;!--Captions ending here for slide 3--&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 &lt;a class=\"carousel-control-prev\" href=\"#bs4-slide-carousel\" role=\"button\" data-slide=\"prev\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"&gt;&lt;\/span&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;span class=\"sr-only\"&gt;Previous&lt;\/span&gt;\r\n\r\n\u00a0 &lt;\/a&gt;\r\n\r\n\u00a0 &lt;a class=\"carousel-control-next\" href=\"#bs4-slide-carousel\" role=\"button\" data-slide=\"next\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;span class=\"carousel-control-next-icon\" aria-hidden=\"true\"&gt;&lt;\/span&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;span class=\"sr-only\"&gt;Next&lt;\/span&gt;\r\n\r\n\u00a0 &lt;\/a&gt;\u00a0\r\n\r\n\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"text-center mt-4\"&gt;\r\n\r\n&lt;button class=\"btn btn-success\" id=\"btnPrev\"&gt;Prev&lt;\/button&gt;\r\n\r\n&lt;button class=\"btn btn-danger\" id=\"btnPause\"&gt;Pause&lt;\/button&gt;\u00a0\r\n\r\n&lt;button class=\"btn btn-success\" id=\"btnNext\"&gt;Next&lt;\/button&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/div&gt;<\/pre>\n<p><strong>The script for associating buttons with actions:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">&lt;script&gt;\r\n\r\n$('#bs4-slide-carousel').carousel({\r\n\r\n\u00a0 interval: 3000\r\n\r\n})\r\n\r\n\r\n\r\n$('#btnPrev').on('click', function () {\r\n\r\n\u00a0 $('#bs4-slide-carousel').carousel('prev');\r\n\r\n})\r\n\r\n$('#btnPause').on('click', function () {\r\n\r\n\u00a0 $('#bs4-slide-carousel').carousel('pause');\r\n\r\n})\r\n\r\n$('#btnNext').on('click', function () {\r\n\r\n\u00a0 $('#bs4-slide-carousel').carousel('next');\r\n\r\n})\r\n\r\n&lt;\/script&gt;<\/pre>\n<h3><strong>Adding button controls in vertical carousel example<\/strong><\/h3>\n<p>Similarly, these buttons can be attached to the vertical carousel to enable visitors to navigate and pause the slideshow. Have a look:<\/p>\n<h6><a href=\"\/bootstrap4\/demo.php?ex=85.0_8\" target=\"_blank\" rel=\"noopener nofollow\"><strong>See the online demo and code<\/strong><\/a><\/h6>\n<p>You can see and grab the complete code on the example page.<\/p>\n<h3><strong>An example of creating a multi-item carousel<\/strong><\/h3>\n<p>By using grid classes within the carousel items, you may create a carousel with multiple items sliding at a time.<\/p>\n<p>See this demo where three images will slide and the next three images will come to the front and the cycle goes on.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-5432\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/17-7-Bootstrap4-multi-item-carousel.jpg\" alt=\"Bootstrap4 multi item carousel\" width=\"551\" height=\"177\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/17-7-Bootstrap4-multi-item-carousel.jpg 551w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/17-7-Bootstrap4-multi-item-carousel-300x96.jpg 300w\" sizes=\"(max-width: 551px) 100vw, 551px\" \/><\/p>\n<h6><a href=\"\/bootstrap4\/demo.php?ex=85.0_9\" target=\"_blank\" rel=\"noopener nofollow\"><strong>See online demo and code<\/strong><\/a><\/h6>\n<p><strong>The markup and script for this demo:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"container\"&gt;\r\n\r\n\u00a0 &lt;h3&gt;Bootstrap 4 Multi-item Carousel Demo&lt;\/h2&gt;\r\n\r\n\r\n\r\n&lt;div id=\"bs4-multi-slide-carousel\" class=\"carousel slide\" data-ride=\"carousel\" &gt;\r\n\r\n\u00a0 &lt;div class=\"carousel-inner\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"carousel-item active\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"row\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"col\"&gt;&lt;img src=\"images\/mango-2.jpg\" class=\"img-fluid\" alt=\"1 slide\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"col\"&gt;&lt;img src=\"images\/strawberries-2.jpg\" class=\"img-fluid\" alt=\"2 slide\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col\"&gt;&lt;img src=\"images\/banana-2.jpg\" class=\"img-fluid\" alt=\"3 slide\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"carousel-item\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"row\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"col\"&gt;&lt;img src=\"images\/currant-2.jpg\" class=\"img-fluid\" alt=\"1 slide\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"col\"&gt;&lt;img src=\"images\/banana-2.jpg\" class=\"img-fluid\" alt=\"2 slide\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"col\"&gt;&lt;img src=\"images\/strawberries-2.jpg\" class=\"img-fluid\" alt=\"3 slide\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0&lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"carousel-item\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"row\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"col\"&gt;&lt;img src=\"images\/banana-2.jpg\" class=\"img-fluid\" alt=\"1 slide\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"col\"&gt;&lt;img src=\"images\/strawberries-2.jpg\" class=\"img-fluid\" alt=\"2 slide\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"col\"&gt;&lt;img src=\"images\/currant-2.jpg\" class=\"img-fluid\" alt=\"3 slide\"&gt;&lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n\r\n\r\n&lt;\/div&gt;\r\n\r\n\r\n\r\n&lt;script&gt;\r\n\r\n$('#bs4-multi-slide-carousel').carousel({\r\n\r\n\u00a0 interval: 1500\r\n\r\n})\r\n\r\n&lt;\/script&gt;<\/pre>\n<p>Sliding only one item in the multiple sliding images carousel is coming soon.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this Bootstrap 4 carousel tutorial, I will show examples of how to create and customize the carousel In Bootstrap 4 for multiple images, vertical slider and more; so keep reading.<\/p>\n","protected":false},"author":1,"featured_media":5427,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[79],"tags":[23,24],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>9 Examples to Learn Bootstrap 4 Carousel\/Slider for Slideshows<\/title>\n<meta name=\"description\" content=\"In this Bootstrap 4 carousel tutorial, I will show examples of how to create and customize the carousel In Bootstrap 4 - simple, multiple images, vertical slider and more; so keep reading.\" \/>\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.jquery-az.com\/9-examples-learn-bootstrap-4-carouselslider-slideshows\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"9 Examples to Learn Bootstrap 4 Carousel\/Slider for Slideshows\" \/>\n<meta property=\"og:description\" content=\"In this Bootstrap 4 carousel tutorial, I will show examples of how to create and customize the carousel In Bootstrap 4 - simple, multiple images, vertical slider and more; so keep reading.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/9-examples-learn-bootstrap-4-carouselslider-slideshows\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-21T02:30:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-27T13:11:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/17-2-Bootstrap-4-carousel-controls.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"535\" \/>\n\t<meta property=\"og:image:height\" content=\"216\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/9-examples-learn-bootstrap-4-carouselslider-slideshows\/\",\"url\":\"https:\/\/www.jquery-az.com\/9-examples-learn-bootstrap-4-carouselslider-slideshows\/\",\"name\":\"9 Examples to Learn Bootstrap 4 Carousel\/Slider for Slideshows\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2018-01-21T02:30:40+00:00\",\"dateModified\":\"2023-10-27T13:11:42+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"description\":\"In this Bootstrap 4 carousel tutorial, I will show examples of how to create and customize the carousel In Bootstrap 4 - simple, multiple images, vertical slider and more; so keep reading.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/9-examples-learn-bootstrap-4-carouselslider-slideshows\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/9-examples-learn-bootstrap-4-carouselslider-slideshows\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/9-examples-learn-bootstrap-4-carouselslider-slideshows\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap 4 Carousel\/Slider Component\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"9 Examples to Learn Bootstrap 4 Carousel\/Slider for Slideshows","description":"In this Bootstrap 4 carousel tutorial, I will show examples of how to create and customize the carousel In Bootstrap 4 - simple, multiple images, vertical slider and more; so keep reading.","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.jquery-az.com\/9-examples-learn-bootstrap-4-carouselslider-slideshows\/","og_locale":"en_US","og_type":"article","og_title":"9 Examples to Learn Bootstrap 4 Carousel\/Slider for Slideshows","og_description":"In this Bootstrap 4 carousel tutorial, I will show examples of how to create and customize the carousel In Bootstrap 4 - simple, multiple images, vertical slider and more; so keep reading.","og_url":"https:\/\/www.jquery-az.com\/9-examples-learn-bootstrap-4-carouselslider-slideshows\/","article_published_time":"2018-01-21T02:30:40+00:00","article_modified_time":"2023-10-27T13:11:42+00:00","og_image":[{"width":535,"height":216,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/17-2-Bootstrap-4-carousel-controls.jpg","type":"image\/jpeg"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/9-examples-learn-bootstrap-4-carouselslider-slideshows\/","url":"https:\/\/www.jquery-az.com\/9-examples-learn-bootstrap-4-carouselslider-slideshows\/","name":"9 Examples to Learn Bootstrap 4 Carousel\/Slider for Slideshows","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2018-01-21T02:30:40+00:00","dateModified":"2023-10-27T13:11:42+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"description":"In this Bootstrap 4 carousel tutorial, I will show examples of how to create and customize the carousel In Bootstrap 4 - simple, multiple images, vertical slider and more; so keep reading.","breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/9-examples-learn-bootstrap-4-carouselslider-slideshows\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/9-examples-learn-bootstrap-4-carouselslider-slideshows\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/9-examples-learn-bootstrap-4-carouselslider-slideshows\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"Bootstrap 4 Carousel\/Slider Component"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/5425"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=5425"}],"version-history":[{"count":12,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/5425\/revisions"}],"predecessor-version":[{"id":10984,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/5425\/revisions\/10984"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/5427"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=5425"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=5425"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=5425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}