Open TimHaslam opened 9 years ago
Hello, I'm using this plugin to show some testimonials on my homepage. I have it setup to have two slides showing but when I get to a smaller screen I only want it to show 1. Here is my code:
$(".slider-testimonials .slides").carouFredSel({ responsive: true, auto: false, pagination : { container : '.slider-pager', keys : false, anchorBuilder : null, items : 2, }, items : { visible : 2, minimum : 1, }, scroll : { items : 1, } }, { debug: true, });
and the HTML:
<div class="slider-testimonials"> <div class="slider-clip"> <div class="caroufredsel_wrapper" style="display: block; text-align: start; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; width: 940px; height: 134px; margin: 0px; overflow: hidden;"> <ul class="slides" style="text-align: left; float: none; position: absolute; top: 0px; right: auto; bottom: auto; left: 0px; margin: 0px; width: 6580px; height: 134px;"> <li class="slide" style="width: 470px;"> <div class="testimonial"> <div class="testimonial-avatar"> <img alt="- Kimberly S., Boeing" src="(url)"> <img class="arrow" src="(url)"> </div><!-- /.testimonial-avatar --> <div class="testimonial-body"> <div class="testimonial-content"> <p>“Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate.”</p> </div> <h5 class="testimonial-autor">- Kimberly S., Boeing</h5> </div> </div> </li> <!-- this li is repeated. Removed for space --> </ul> </div> <div class="slider-pager" style="display: block;"> <a href="#" class="selected"><span>1</span></a> <a href="#"><span>2</span></a> <a href="#"><span>3</span></a> </div> </div> </div>
Any help would be great. Thanks
Hello, I'm using this plugin to show some testimonials on my homepage. I have it setup to have two slides showing but when I get to a smaller screen I only want it to show 1. Here is my code:
and the HTML:
Any help would be great. Thanks