Skip to content
This repository has been archived by the owner on May 5, 2021. It is now read-only.

Responsive Help #39

Open
TimHaslam opened this issue Aug 24, 2015 · 0 comments
Open

Responsive Help #39

TimHaslam opened this issue Aug 24, 2015 · 0 comments

Comments

@TimHaslam
Copy link

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant