stevenwanderski / bxslider-4

Responsive jQuery content slider
Other
4.22k stars 1.85k forks source link

Calculate viewport height wrong when have duplicate element #1027

Open zabahey opened 8 years ago

zabahey commented 8 years ago

I create HTML with 9 lis element `

  • GOLD FACTORY ```
        </li>
    
        <li id="2" data-game-id="2">
            <div>
                <div>
                    <span>
                        <a href="#">JURASSIC PARK</a>
                    </span>
    
                </div>
            </div>
        </li>
    
        <li id="3" data-game-id="3">
            <div>
                <div>
                    <span>
                        <a href="#">GIRLS WITH GUNS</a>
                    </span>
    
                </div>
            </div>
        </li>
    
        <li id="4" data-game-id="4">
            <div>
                <div>
                    <span>
                        <a href="#">BATMAN DARK KNIGHT</a>
                    </span>
    
                </div>
            </div>
        </li>
    
        <li id="5" data-game-id="5">
            <div>
                <div>
                    <span>
                        <a href="#">RABBIT IN THE HEAD</a>
                    </span>
    
                </div>
            </div>
        </li>
    
        <li id="6" data-game-id="6">
            <div>
                <div>
                    <span>
                        <a href="#">NEON STAXX</a>
                    </span>
                </div>
            </div>
        </li>
    
        <li id="7" data-game-id="7">
            <div>
                <div>
                    <span>
                        <a href="#">GOLD FACTORY</a>
                    </span>
                </div>
            </div>
        </li>
    
        <li id="8" data-game-id="8">
            <div>
                <div>
                    <span>
                        <a href="#">JURASSIC PARK</a>
                    </span>
                </div>
            </div>
        </li>
    
        <li id="9" data-game-id="9">
            <div>
                <div>
                    <span>
                        <a href="#">GIRLS WITH GUNS</a>
                    </span>
                </div>
            </div>
        </li>`
    
    Following my html I try to config bxslider like this
    
    `<script type="text/javascript">
            $(function () {
                var JackpotSliderCombineRows = $('#jp-combine-rows').bxSlider({
                    mode: 'vertical',
                    pager: false,
                    controls: false,
                    auto: true,
                    moveSlides: 1,
                    minSlides: 6,
                    maxSlides: 6,
                    autoDelay: 1000,
                    speed: 200,
                    infiniteLoop: true,
                    autoHover: true,
                    autoDirection: 'next'
                });
            });
        </script>`
    
    I found problem when currentIndex = 4  children not add duplicate element to children variable 
    
    ` for (i = 1; i <= slider.settings.maxSlides - 1; i++) {
                            // if looped back to the start
                            if (currentIndex + i >= slider.children.length) {
    
                        children = children.add(slider.children.eq(i - 1));
                    } else {
                        children = children.add(slider.children.eq(currentIndex + i));
                    }
                }`
    
    
    Then when calculate height it will wrong
    
    `children.each(function (index) {
                        height += $(this).outerHeight();
                    });`
  • elli0talders0nfsociety commented 8 years ago

    I have this problem too.. someone else?