Codeinwp / carouFredSel-jQuery

A circular, responsive carousel plugin built using the jQuery.
http://caroufredsel.dev7studios.com
Other
318 stars 476 forks source link

Responsive Help #39

Open TimHaslam opened 9 years ago

TimHaslam commented 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