Made carrousel responsive in all devices - css

Question

I can't fix my carousel images for any devices. Here is my code:
div.c-wrapper {
height: 406px;
width: 940px;
/* use this, or not */
margin: auto;
}
.img-responsive {
max-width: 100%;
display: block;
height: auto;
}
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="c-wrapper">
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="Images/carrousel11.jpg" class="img-responsive" alt="">
</div>
<div class="item">
<img src="Images/carrousel5.jpg" class="img-responsive" alt="">
</div>
<div class="item">
<img src="Images/carrousel6.jpg" class="img-responsive" alt="">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
</div>
</div>
Thank you guys if can help me out!

Answer 1

Even though I'd highly recommend using a library like Slick, the exercise of creating a slider from scratch is a worth while one to consider, if for no other reason than to better understand web technologies.
Here are a few things to consider. In order to make a proper carousel you'll want to use JavaScript to manage the click events for next, previous and clicking on the indicators. You had a number of issues with your mark up and CSS that I've done my best to match what I believe was your original intention but if anything is off let me know and we can refine from here.
Hide the inactive image
In order to give the appearance of sliding you need to hide all but the one active slides. Then on click you simply hide the active item by remove the .active class then add that class to the next element - in this case by stepping through your data-slide-to attribute.
Positioning
The best way that I've found to position your previous and next buttons is to use position: absolute. In order for this to work you need to have a relatively positioned container around it. I did this on .carousel.
Extraneous markup
I didn't remove all of the unneccessary markup but you'll find that several of the divs in your example are not neccessary especially at the top level. I left those in just in case you had some other reason for that.
Images
Quick tip, if you're going to use relative images in your SO posts, try to swap those for Placehold.it images as they won't render on SO.
.carousel-wrapper {
width: 500px;
margin: auto;
}
.carousel-wrapper:after {
content: "";
display: table;
clear: both;
}
.carousel {
position: relative;
}
.left, .right {
position: absolute;
top: 50%;
}
.left {
left: -50px;
}
.right {
right: -50px;
}
.img-responsive {
max-width: 100%;
display: block;
}
.carousel-indicators {
display: block;
height: auto;
padding: 0;
margin: 0;
text-align: center;
}
.carousel-indicators li {
width: 15px;
height: 15px;
background: #ccc;
margin: 0 5px;
display: inline-block;
list-style: none;
border-radius: 50%;
}
.item {
display: none;
}
.active {
display: block;
}
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-wrapper">
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<img src="https://placehold.it/500x250" class="item active img-responsive" alt="">
<img src="https://placehold.it/500x250" class="item img-responsive" alt="">
<img src="https://placehold.it/500x250" class="item img-responsive" alt="">
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev">Prev</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next">Next</span>
</a>
</div>
</div>
</div>
</div>