CODEWITHSUNDEEP
csstwitter-bootstrap
sonia maklouf
sonia maklouf

Reputation: 2743

bootstrap container-fluid carousel

I'm quiet surprise I thought the use of container-fluid will give me a full width carousel but it didn't. It has a padding right and left of 15 px so i add a new class remove-padding in order to have no padding but it didn't work. Any idea for having a carousel without padding ?

$(document).ready(function(){
	$('.slick-carousel').slick({
    arrows:true,
    prevArrow:'<a class="slick-prev"><span class="glyphicon glyphicon-chevron-left"></span></a>',
    nextArrow:'<a class="slick-next"><span class="glyphicon glyphicon-chevron-right"></span></a>'
                             });
});
.slick-prev {
    left: 50px;
}
.slick-next {
    right: 50px;
}
.slick-prev, .slick-next {
    background: none;
    border: medium none;
    color: blue;
    cursor: pointer;
    display: block;
    font-size: 24px;
    height: 20px;
    line-height: 0;
    margin-top: -10px;
    outline: medium none;
    padding: 0;
    position: absolute;
    top: 50%;
    width: 20px;
}
.slick-prev:before {
    content: "";
}
.slick-next:before {
    content: "";
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: #fff; }


.slick-carousel h1{ position:absolute; top:40px; left:20%; color:#fff; }*/
.remove-padding {padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important;}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://sandbox.jsnegley.net/jquery/slick-carousel/slick.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://sandbox.jsnegley.net/jquery/slick-carousel/slick.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-12 pen">
      <div class="page-header">
        <h5>Slick Carousel</h5>
        <h1>Basic Carousel</h1>
        <ul class="technology">
        <li>Bootstrap <span class="label label-default">3.3.4</span></li>
        <li>jQuery <span class="label label-default">2.1.3</span></li>
        <li>
        <a href="https://github.com/kenwheeler/slick"><span class="glyphicon glyphicon-book"></span> Documentation</a>
        </li>
        </ul>
      </div>
    </div>
  </div>
<!-- /container --></div>

<div class="container-fluid remove-padding">
 
      <!-- START MOD -->
 <div class="slick-carousel">
   <div><img src="http://sandbox.jsnegley.net/pics/carousel-1.jpg" class="img-responsive">
     <h1>Title 1</h1>
   </div>
   <div><img src="http://sandbox.jsnegley.net/pics/carousel-2.jpg"  class="img-responsive">
   <h1>Very long crazy long mega long title</h1>
   </div>
   <div><img src="http://sandbox.jsnegley.net/pics/carousel-3.jpg"  class="img-responsive"><h1>Title Title title</h1></div>
</div>
      <!-- END MOD -->
</div> 
    
  
 <!-- /container --></div>
<div class="container"><div class="row">
      <div class="col-xs-4">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
                </div>
                <div class="col-xs-4">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
                </div>
                <div class="col-xs-4">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
                </div>
</div></div>

Upvotes: 0

Views: 1727

Answers (2)

zen.c
zen.c

Reputation: 688

You can simply remove .container > .row > .col-sm-12 in your html and just use a div.

Upvotes: 0

Ziad Alame
Ziad Alame

Reputation: 772

Add class row next to class slick-carousel.

This fixed the problem.

Some explanation: .container-fluid adds 15px of padding on the left and right in addition to horizontal auto margin.

Upvotes: 1

Related Questions