使用html中的左箭头和右箭头水平滚动div内容

时间:2018-01-24 15:34:57

标签: html css

附加image包含html代码部分,我需要添加一个左右滚动按钮。但是我无法一个接一个地看到完整的图像。目前它显示了一个动画视图。除了相同的我还需要下一个prev按钮。

<section class="sponser-area section-padding" id="sponsors">
    <div id="sponsors" class="carousel slide carousel-fade" data-ride="carousel">
        <div class="container text-center">
            <div class="row">
                <div class="page-title">
                    <h2>Insurance Partners</h2>
                    <p>Consectetuer adipiscing elit, sed diam nonummy</p>
                </div>
                <div class="sponser-items">
                    <div class="sponser-item">
                        <a href="#" title="sensile medical"><img src="images/sponser/01_sponser.jpg" alt="Helth plus"></a>
                    </div>
                    <div class="sponser-item">
                        <a href="#" title="medical"><img src="images/sponser/02_sponser.jpg" alt="Helth plus"></a>
                    </div>
                    <div class="sponser-item">
                        <a href="#" title="medical logo"><img src="images/sponser/03_sponser.jpg" alt="Helth plus"></a>
                    </div>
                    <div class="sponser-item">
                        <a href="#" title="hospital logo"><img src="images/sponser/04_sponser.jpg" alt="Helth plus"></a>
                    </div>                                                  
                    <div class="sponser-item">
                        <a href="#" title="hospital logo"><img src="images/sponser/15_sponser.jpg" alt="Helth plus"></a>
                    </div>
                    <div class="sponser-item">
                        <a href="#" title="hospital logo"><img src="images/sponser/16_sponser.jpg" alt="Helth plus"></a>
                    </div>
                    <div class="sponser-item">
                        <a href="#" title="hospital logo"><img src="images/sponser/17_sponser.jpg" alt="Helth plus"></a>

                    <div class="sponser-item">
                        <a href="#" title="hospital logo"><img src="images/sponser/23_sponser.jpg" alt="Helth plus"></a>
                    </div>
                </div>
            </div>
               <a class="left slide-control" href="#home_slider" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right slide-control" href="#home_slider" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </section>

0 个答案:

没有答案