I'm having this webpage .html
Where I've a testimonial in the yellow block. I would like to have a carousel of testimonials; but as you can see in the second yellow block I'm having issues with the width. It should be a carousel of col-md-4 ; but it's making it way bigger.
I'v used the carousel at the homepage too; ander there everything is fine. / (way down at the page, underneed newsletter subscription)
I've already tries a lot of constructions in html; but can't find the right one or the missing piece.
currently this is the construction.
<section class="row yellow">
<div class="border-top">
<div class="container">
<img src="../img/border_top.png"/>
</div>
</div>
<div class="container yellow-content">
<div class="row center-vertical">
<div class="col-md-8 vertical-center-element vertical-centered-text">
<h2>Actie en avontuur</h2>
<p>
540 smith grind grind hang up launch ramp. Sponsored gnarly no ply regular footed hang-up. Quarter pipe tic-tac aerial hang ten airwalk. Deck baseplate crail grab bluntslide regular footed. Varial carve darkslide ollie hole Vans Calfornia Daze rocket air. Pivot kick-nose ollie sketchy death box Steve Rocco.
</p>
</div>
<div class="testimonial_wrapper">
<div class="col-md-4 vertical-center-element">
<div class="testimonail_container">
<div class="row">
<div class="col-md-12 bgwhite">
<div class="row text-center">
<div class="col-md-6 col-md-offset-3">
<div class="text-center testimonial">
<img class="img-circle img-responsive" src="../img/reisaanbod/testimonials/testi_canyoning.jpg" alt="">
</div>
</div>
</div>
<div class="row text-center">
<div class="row-md-9">
<p>Tic-tac nollie bearings Ron Allen disaster. Downhill blunt no ply Kevin Jarvis slob air. Deck Brooklyn Banks indy grab slap maxwell pop shove-it.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 vertical-center-element">
<div class="testimonail_container">
<div class="row">
<div class="col-md-12 bgwhite">
<div class="row text-center">
<div class="col-md-6 col-md-offset-3">
<div class="text-center testimonial">
<img class="img-circle img-responsive" src="../img/reisaanbod/testimonials/testi_canyoning.jpg" alt="">
</div>
</div>
</div>
<div class="row text-center">
<div class="row-md-9">
<p>Tic-tac nollie bearings Ron Allen disaster. Downhill blunt no ply Kevin Jarvis slob air. Deck Brooklyn Banks indy grab slap maxwell pop shove-it.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="border-bottom">
<div class="container">
<img src="../img/border_bottom.png"/>
</div>
</div>
</section>
where the carousel is initialized on testimonial-wrapper
<script>
//testimonial slider
$('.testimonial_wrapper').slick({
infinite: false,
slidesToShow: 1,
slidesToScroll: 1
});
</script>
Can anyone help me out with this one and explain what I'm missing... :-/
Thx!
I'm having this webpage http://staging.karlienfabre.be/pocoloco/reizen/canyoning.html
Where I've a testimonial in the yellow block. I would like to have a carousel of testimonials; but as you can see in the second yellow block I'm having issues with the width. It should be a carousel of col-md-4 ; but it's making it way bigger.
I'v used the carousel at the homepage too; ander there everything is fine. http://staging.karlienfabre.be/pocoloco/ (way down at the page, underneed newsletter subscription)
I've already tries a lot of constructions in html; but can't find the right one or the missing piece.
currently this is the construction.
<section class="row yellow">
<div class="border-top">
<div class="container">
<img src="../img/border_top.png"/>
</div>
</div>
<div class="container yellow-content">
<div class="row center-vertical">
<div class="col-md-8 vertical-center-element vertical-centered-text">
<h2>Actie en avontuur</h2>
<p>
540 smith grind grind hang up launch ramp. Sponsored gnarly no ply regular footed hang-up. Quarter pipe tic-tac aerial hang ten airwalk. Deck baseplate crail grab bluntslide regular footed. Varial carve darkslide ollie hole Vans Calfornia Daze rocket air. Pivot kick-nose ollie sketchy death box Steve Rocco.
</p>
</div>
<div class="testimonial_wrapper">
<div class="col-md-4 vertical-center-element">
<div class="testimonail_container">
<div class="row">
<div class="col-md-12 bgwhite">
<div class="row text-center">
<div class="col-md-6 col-md-offset-3">
<div class="text-center testimonial">
<img class="img-circle img-responsive" src="../img/reisaanbod/testimonials/testi_canyoning.jpg" alt="">
</div>
</div>
</div>
<div class="row text-center">
<div class="row-md-9">
<p>Tic-tac nollie bearings Ron Allen disaster. Downhill blunt no ply Kevin Jarvis slob air. Deck Brooklyn Banks indy grab slap maxwell pop shove-it.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 vertical-center-element">
<div class="testimonail_container">
<div class="row">
<div class="col-md-12 bgwhite">
<div class="row text-center">
<div class="col-md-6 col-md-offset-3">
<div class="text-center testimonial">
<img class="img-circle img-responsive" src="../img/reisaanbod/testimonials/testi_canyoning.jpg" alt="">
</div>
</div>
</div>
<div class="row text-center">
<div class="row-md-9">
<p>Tic-tac nollie bearings Ron Allen disaster. Downhill blunt no ply Kevin Jarvis slob air. Deck Brooklyn Banks indy grab slap maxwell pop shove-it.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="border-bottom">
<div class="container">
<img src="../img/border_bottom.png"/>
</div>
</div>
</section>
where the carousel is initialized on testimonial-wrapper
<script>
//testimonial slider
$('.testimonial_wrapper').slick({
infinite: false,
slidesToShow: 1,
slidesToScroll: 1
});
</script>
Can anyone help me out with this one and explain what I'm missing... :-/
Thx!
Share Improve this question asked Jan 30, 2015 at 10:07 user3346696user3346696 1691 gold badge4 silver badges18 bronze badges 1-
1
use a normal
div > divstructure for the slider (no bootstrap classes), then put your.rows and.columns inside of them, don't try to mess with the slider using bootstrap .. and if you need to wrap the slider in a.col-md-4then wrap it, don't try to apply the class to the slider itself. – simey.me Commented Jan 31, 2015 at 12:01
2 Answers
Reset to default 0I had a similar issue with slick in a bootstrap column. I just added some padding.
.bootstrap-column { padding: 0 35px;}
Because .testimonial_wrapper is the element you're initializing the slick function on, and you're only saying to show one slide with: slidesToShow: 1, the slide with class col-md-4 will inherit the entire width of the .testimonial_wrapper element because you chose slidesToShow: 1.
By nature, SlickJS handles everything with javascript which will overwrite Bootstraps CSS settings.
I would propose one of two things:
If you want the slider to have one slide and take up the size of a col-md-4 column then add a col-md-4 class to the .testimonial_wrapper element.
Or
You can have the slide show 3 slides at once (mimicking a col-md-4 class within in the slider) by declaring that property when calling the slick function/initializing the slider: slidesToShow: 3
In addition to this ^ - If you're interested in responsive breakpoints for your slider Slick has a way to handle that as well. You can look through their documentation for the responsive breakpoints settings.