javascript - 一次两个滑动图像

Question

我已经根据其中一个引用制作了一个 slider ，但我想一次显示 2 个图像。如何实现这一目标。请查看链接

Slider

上面是我编码的链接。

请查看链接的 HTML

<div class="container">
        <div class="row well">
            <div class="col-xs-8 col-sm-6 col-md-6">
                <h2>Vertical Slider</h2>
                <div id="myCarousel" class="vertical-slider carousel vertical slide col-md-12" data-ride="carousel">
                    <div class="row">
                        <div class="col-md-4">
                            <span data-slide="next" class="btn-vertical-slider glyphicon glyphicon-circle-arrow-up "
                                style="font-size: 30px"></span>
                        </div>
                        <div class="col-md-8">
                        </div>
                    </div>
                    <br />
                    <!-- Carousel items -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <div class="row">
                                <div class="col-xs-6 col-sm-5 col-md-5">
                                    <a href="http://dotstrap.com/">
                                        <img src="http://placehold.it/150x150" class="thumbnail"
                                            alt="Image" /></a>
                                </div>
                                <div class="col-xs-6 col-sm-7 col-md-7">
                                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                        euismod tincidunt ut laoreet..
                                </div>
                            </div>
                            <!--/row-fluid-->
                        </div>
                        <!--/item-->
                        <div class="item ">
                            <div class="row">
                                <div class="col-xs-6 col-sm-5 col-md-5">
                                    <a href="http://dotstrap.com/">
                                        <img src="http://placehold.it/150x150" class="thumbnail"
                                            alt="Image" /></a>
                                </div>
                                <div class="col-xs-6 col-sm-7 col-md-7">
                                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                        euismod tincidunt ut laoreet..
                                </div>
                            </div>
                            <!--/row-fluid-->
                        </div>
                        <!--/item-->
                        <div class="item ">
                            <div class="row">
                                <div class="col-xs-6 col-sm-5 col-md-5">
                                    <a href="http://dotstrap.com/">
                                        <img src="http://placehold.it/150x150" class="thumbnail"
                                            alt="Image" /></a>
                                </div>
                                <div class="col-xs-6 col-sm-7 col-md-7">
                                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                        euismod tincidunt ut laoreet..
                                </div>
                            </div>
                            <!--/row-fluid-->
                        </div>
                        <!--/item-->
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <span data-slide="prev" class="btn-vertical-slider glyphicon glyphicon-circle-arrow-down"
                                style="color: Black; font-size: 30px"></span>
                        </div>
                        <div class="col-md-8">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

我引用的链接:-

Reference link

Answer 1

您需要添加用于滑动的轮播代码，如下所示:-

$(document).ready(function () {
        $('.btn-vertical-slider').on('click', function () {
            setInterval(function () { slide(dir); }, 1000);
            if ($(this).attr('data-slide') == 'next') {
                $('#myCarousel').carousel('next');
            }
            if ($(this).attr('data-slide') == 'prev') {
                $('#myCarousel').carousel('prev')
            }
        });
        $('.carousel .item').each(function () {
            var next = $(this).next();
            if (!next.length) {
                next = $(this).siblings(':first');
            }
            next.children(':first-child').clone().appendTo($(this));
            for (var i = 0; i < 2; i++) {
                next = next.next();
                if (!next.length) {
                    next = $(this).siblings(':first');
                }
                next.children(':first-child').clone().appendTo($(this));
            }
        });
    });