We Keep Coding

Need help removing or hiding divs depending on screen width

So I was having trouble with changing a 3x3 image gallery layout on any screen > than 768px (tablet/desktop) to an image slider for any screen < than 768px (mobile).
After the help of everyone and especially Danilo (solutions in the comments), the problem was that the css was not correctly targetting the screen, I needed - #media only screen, I had also missed a DIV... (I know noob error).
So if anyone is trying to change the content displayed from desktop layout to mobile layout in Bootstrap 4, you can use CSS media queries that target the wrapped DIV to display or not display.
Updated working snippet below:
#media only screen and (min-width: 768px) {
.slider {
display: none;
}
.block {
display: block;
}
}
#media only screen and (max-width: 768px) {
.slider {
display: block;
}
.block {
display: none;
}
}
.hold-tests {
display: flex;
width: 100%;
}
.col {
flex: 1;
}
<!--- Start of Gallery Section -->
<div id="hold-tests">
<div class="col slider">
<div id="sliderIndicators" class="carousel slide carousel-fade z-depth-1-half" data-ride="carousel" data-interval="9000">
<div class="carousel-inner col-" role="listbox">
<!--- First Slide -->
<div class="carousel-item active">
<img src="Img/PHportrait.png" alt="background image">
</div>
<div class="carousel-item">
<img src="Img/PHportrait2.png" alt="background image">
</div>
<div class="carousel-item">
<img src="Img/PHportrait.png" alt="background image">
</div>
</div>
<div class="narrow">
<div class="col-12">
<p class="lead text-center">Want to see more of my work?</p>
<!-- add in social media icons and add target="_blank" to open in new tab -->
</div>
</div>
</div>
</div>
<div class="col block">
<div id="gallery" class="offset">
<div class="col-md">
<div class="row no-padding">
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
</div>
</div>
<div class="narrow">
<div class="col-12">
<p class="lead text-center">Want to see more of my work?</p>
<!-- add in social media icons and add target="_blank" to open in new tab -->
</div>
</div>
</div>
</div>
</div>
<!--- End of Gallery Section -->

Since you're using bootstrap, use it. No jQuery needed for this, as it's completely covered already.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="d-none d-md-block">
Only visible starting from md
</div>
<div class="d-md-none">
Only visible on small screen
</div>
https://getbootstrap.com/docs/4.0/utilities/display/
https://v4-alpha.getbootstrap.com/layout/responsive-utilities/
Also note that ids usually don't start with a #. Even though this may be legal, you'd then at least had to select them with $('##option1') in your jquery code.

You can do that, just using CSS
html
<div class="hold-tests">
<div class="col test1">Test1</div>
<div class="col test2">Test2</div>
<div class="col test3">Test3</div>
</div>
css
#media only screen and (min-width: 768px) {
.test1 {
display: none;
}
.test3 {
display: block;
}
}
#media only screen and (max-width: 768px) {
.test3 {
display: none;
}
}
.hold-tests {
display: flex;
width: 100%;
}
.col {
flex: 1;
}

Element moving slower when scrolling while using Butter Scroll

How can I make an element (element id #move-slower) move slower than the speed of the butter scroll container? My goal is to place this element somewhere behind the main container with the page content (which will use butter scroll) and have it move slower when scrolling than the container controlled by butter scroll.
I'm open to using other jQuery plugins other than butter scroll as long as I can achieve the same effect of this plugin.
Using:
https://github.com/cmalven/butter-scroll
HTML
<div class="outer-container js-outer-container">
<div class="inner-container js-inner-container">
<div id="slower-element"><img src="https://via.placeholder.com/100x300.png/09f/fff" alt=""></div>
<div class="container">
<div class="row">
<div class="col">
<img src="https://via.placeholder.com/300.png/09f/fff" alt="">
</div>
<div class="col">
<img src="https://via.placeholder.com/300.png/09f/fff" alt="">
</div>
</div>
<div class="row">
<div class="col">
<img src="https://via.placeholder.com/300.png/09f/fff" alt="">
</div>
<div class="col">
<img src="https://via.placeholder.com/300.png/09f/fff" alt="">
</div>
<div class="col">
<img src="https://via.placeholder.com/300.png/09f/fff" alt="">
</div>
</div>
</div>
</div>
</div>
JS
new ButterScroll({
$containerEl: jQuery('.js-outer-container'),
$elToScroll: jQuery('.js-inner-container'),
scrollEase: 0.07, // optional
maxDepthOffset: 500 // optional
});
CSS
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.inner-container {
overflow: hidden;
}
img {
max-width:100%;
height:auto;
}
#slower-element {
position:fixed;
top:0;
left:0;
}
Fiddle
https://jsfiddle.net/ts7j3n5z/

in Bootstrap 4, multiple item slider (3 items shows at the same time on desktop screen), make them one by one when it comes to mobile size [duplicate]

This question already has answers here:
Bootstrap carousel multiple frames at once
(16 answers)
Closed 3 years ago.
in Bootstrap 4, multiple item slider (3 items shows at the same time on desktop screen), I want to show sliders one by one when it comes to mobile size, but it shows three together vertically.
in desktop screen it shows like the following:
but on mobile screen it shows like the following:
The problem is, I want to show the sliders one by one, when it shows on mobile and ipad screen.
you can try the code on w3school click here.
there is code for this problem:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
</div>
</div>
<div class="carousel-item ">
<div class="row">
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>

$('#carouselExample').on('slide.bs.carousel', function (e) {
var $e = $(e.relatedTarget);
var idx = $e.index();
var itemsPerSlide = 3;
var totalItems = $('.carousel-item').length;
if (idx >= totalItems-(itemsPerSlide-1)) {
var it = itemsPerSlide - (totalItems - idx);
for (var i=0; i<it; i++) {
// append slides to end
if (e.direction=="left") {
$('.carousel-item').eq(i).appendTo('.carousel-inner');
}
else {
$('.carousel-item').eq(0).appendTo('.carousel-inner');
}
}
}
});
$(document).ready(function() {
/* show lightbox when clicking a thumbnail */
$('a.thumb').click(function(event){
event.preventDefault();
var content = $('.modal-body');
content.empty();
var title = $(this).attr("title");
$('.modal-title').html(title);
content.html($(this).html());
$(".modal-profile").modal({show:true});
});
});
#media (min-width: 768px) {
/* show 3 items */
.carouselPrograms .carousel-inner .active,
.carouselPrograms .carousel-inner .active + .carousel-item,
.carouselPrograms .carousel-inner .active + .carousel-item + .carousel-item {
display: block;
}
.carouselPrograms .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.carouselPrograms .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
.carouselPrograms .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
transition: none;
}
.carouselPrograms .carousel-inner .carousel-item-next,
.carouselPrograms .carousel-inner .carousel-item-prev {
position: relative;
transform: translate3d(0, 0, 0);
}
.carouselPrograms .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -33.333%;
z-index: -1;
display: block;
visibility: visible;
}
/* left or forward direction */
.carouselPrograms .active.carousel-item-left + .carousel-item-next.carousel-item-left,
.carouselPrograms .carousel-item-next.carousel-item-left + .carousel-item,
.carouselPrograms .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
.carouselPrograms .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* farthest right hidden item must be abso position for animations */
.carouselPrograms .carousel-inner .carousel-item-prev.carousel-item-right {
position: absolute;
top: 0;
left: 0%;
z-index: -1;
display: block;
visibility: visible;
}
/* right or prev direction */
.carouselPrograms .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
.carouselPrograms .carousel-item-prev.carousel-item-right + .carousel-item,
.carouselPrograms .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
.carouselPrograms .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
visibility: visible;
}
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid">
<div id="carouselExample" class="carouselPrograms carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<div class="carousel-item col-md-4 active">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 1" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=1" alt="slide 1">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 3" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=2" alt="slide 2">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 4" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=3" alt="slide 3">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 5" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=4" alt="slide 4">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 6" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=5" alt="slide 5">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 7" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=6" alt="slide 6">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 8" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=7" alt="slide 7">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 2" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=8" alt="slide 8">
</a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

Bootstrap gallery thumbnail with carousel bo

I want add following effect - got 4 thumbnails, single thumbnail = different album:
After click on single should be indicated carousel:
I don't have idea how can I put together thumbnail and carousel.
What can I use to automatic add pages with gallery albums, and management them on Bootstrap 3?
<section id="gallery">
<div class="container bg-5 text-center">
<div class="row">
<h2>Gallery</h2>
<center>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
39
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
38
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
37
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
36
</div>
</center>
</div>
<div class="row">
<div class="col-md-12">
<ul class="pagination">
<li>
«
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
...
</li>
<li>
»
</li>
</ul>
</div>
</div>
</div>
Carousel

In this, carousel thumbnails, appear twice, on top and at the bottom of the carousel slides. I can't figure out why!! :)
<html>
<head>
<title>Stackoverflow Trials</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
<style>
h4 {
margin: 20px 10px 10px;
}
p {
margin: 10px;
}
#carousel-example-generic {
margin: 20px auto;
width: 400px;
}
#carousel-example-generic .carousel-indicators {
margin: 10px 0 0;
overflow: auto;
position: static;
text-align: left;
white-space: nowrap;
width: 100%;
}
#carousel-example-generic .carousel-indicators li {
background-color: transparent;
-webkit-border-radius: 0;
border-radius: 0;
display: inline-block;
height: auto;
margin: 0 !important;
width: auto;
}
#carousel-example-generic .carousel-indicators li img {
display: block;
opacity: 0.5;
}
#carousel-example-generic .carousel-indicators li.active img {
opacity: 1;
}
#carousel-example-generic .carousel-indicators li:hover img {
opacity: 0.75;
}
#carousel-example-generic .carousel-outer {
position: relative;
}
</style>
</head>
<body>
<section id="gallery">
<div class="container bg-5 text-center">
<div class="row">
<h2>Gallery</h2>
<center>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb1" src="http://placehold.it/350x250" alt="">
</a>
39
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb2" src="http://placehold.it/350x250" alt="">
</a>
38
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb3" src="http://placehold.it/350x250" alt="">
</a>
37
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb4" src="http://placehold.it/350x250" alt="">
</a>
36
</div>
</center>
</div>
<div class="row">
<div class="col-md-12">
<ul class="pagination">
<li>
«
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
...
</li>
<li>
»
</li>
</ul>
</div>
</div>
</div>
</section>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class='carousel-outer'>
<!-- Wrapper for slides -->
<!-- Indicators -->
<ol class="carousel-indicators"></ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"></div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<ol class='carousel-indicators'>
</ol>
</div>
<script>
$(document).ready(function() {
// create arrays of images to be displayed in each carousel for each thumbnails.
// the array name is exactly the same as thumbnail id
var thumb1 = new Array("book2.jpg","book3.jpg","book4.jpg","book5.jpg");
var thumb2 = new Array("book3.jpg","book4.jpg","book5.jpg","book2.jpg");
var thumb3 = new Array("book4.jpg","book5.jpg","book2.jpg","book3.jpg");
var thumb4 = new Array("book5.jpg","book4.jpg","book3.jpg","book2.jpg");
var $carousel = $('#carousel-example-generic .carousel-inner');
var $carouselInd = $('#carousel-example-generic .carousel-indicators');
$( ".thumbnail" ).click(function() {
var numberOfSlides = $('.item').length;
if(numberOfSlides >0) {
// remove all items from the carousel before adding the new ones to it.
$carousel.empty();
//$carouselInd.empty();
}
var m = this.id;
m = eval(m);
//alert(m.length);
for(var i=0 ; i< m.length ; i++) {
var j= i+1;
$('<div class="item"><img src="images/'+m[i]+'"><div class="carousel-caption"></div> </div>').appendTo('.carousel-inner');
$('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"><img src="http://placehold.it/100x50&text=slide'+j+'" alt="" /></li>').appendTo('.carousel-indicators');
}
$('.item').first().addClass('active');
$('.carousel-indicators > li').first().addClass('active');
$('#carousel-example-generic').carousel();
});
});
</script>
</body>

Bootstrap carousel with multiple items

I'm working on a project available on JSFiddle. As you can notice, there are 6 items displayed and I would like to make a carousel to display 3 items per slide. After researching this issue, I find this awesome project on Codepen.
Each item of my project is represented by the following code:
<div class="wrapper">
<img src="https://photos-2.dropbox.com/t/2/AACS3GcxUnMu4DpsfC5pF-zF55I8WHf1blL4AvkQULu1Gw/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHsgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
while the item on Codepen is represented by this one:
<div class="item active">
<div class="col-xs-4">
<img src="http://placehold.it/300/f44336/000000" class="img-responsive">
</div>
</div>
Whenever I try to remove the item's code in Codepen and place my item's code from JSFiddle, the slider stops working.
Please let me know how to solve this problem.

Is this what you wanted? Please check fiddle, you will understand, why it wasn't working. You may have missed some libraries and CSS.
$('#theCarousel').carousel({
interval: false
})
$('.multi-item-carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
.multi-item-carousel{
.carousel-inner{
> .item{
transition: .6s ease-in-out all;
}
.active{
&.left{
left:-33%;
}
&.right{
left:33%;
}
}
.next{
left: 33%;
}
.prev{
left: -33%;
}
}
.carouse-control{
&.left, &.right{
background-image: none;
}
}
#media all and (transform-3d), (-webkit-transform-3d) {
&{
.carousel-inner {
> .item{
transition: .6s ease-in-out all;
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-perspective: none;
-webkit-transform: none!important;
transform: none!important;
}
}
}
}
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-8 col-md-offset-2">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4 wrapper">
<img src="http://placehold.it/300/f44336/000000" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/e91e63/000000" class="img-responsive">
<div class="overlay">
<h5 class="header">A Movie in the Park: Kung Fu Panda</h5>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/9c27b0/000000" class="img-responsive">
<h5 class="header">Batman Return</h5>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/673ab7/000000" class="img-responsive">
<h5 class="header">Deadpool</h5>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/4caf50/000000" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/8bc34a/000000" class="img-responsive">
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>

Read the carousel documentation and notice the format of each item (specifically the addition of .item and .active).
This wrapper around each image is making it so that 3 elements are displayed per row:
<div class="col-xs-4">
...
</div>
(in comparison, using .col-xs-12 would indicate 1 image per displayed row, and .col-xs-6 would indicate 2 images per displayed row)