Question

我正在使用光滑的滑块来创建一个页面。除了一件事之外，一切都很好：当我拖动幻灯片时，图像或文本有时反弹，而且看起来非常糟糕。我该怎么做才能避免这个问题？

这是我的code

  <section class="portfolio" id="portfolio">

        <div class="container" style="height:100px">
            <div class="row">
                <div class="col-lg-12"></div>
                </div>
            </div>
                <div id="portfolio_slider">
                    <div id="item">
                        <div class="container">
                            <div class="row">
                                <div class="col-lg-3 col-md-3 text-right">
                                    <div id="project_name">
                                        PROJECT<br />
                                        NAME
                                    </div>
                                    <div id="project-info">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tortor erat,
                                        laoreet ut ullamcorper vel, fermentum vel ex. Donec convallis leo sit amet auctor
                                        rutrum. Nullam accumsan risus at quam porttitor ec tortor erat, laoreet ut
                                        ullamcorper vel, fermentum vel  tristique.
                                    </div>
                                    <div id="read_more"><a href="#" data-toggle="modal">Read More...</a></div>

                                </div>
                                <div class="col-lg-7 col-lg-offset-1" id="project_image">
                                    <img class="img-responsive shadow" src="http://i.imgur.com/35Lun7R.jpg" />

                                </div>
                                <div class=" col-lg-1 col-md-1  social_buttons">
                                    <div class="centered">
                                        <div class="flex-item" style="padding-bottom: 50px;">
                                            <a href="#"><i class="fa fa-facebook"></i></a>
                                        </div>
                                        <div class="flex-item" style="padding-bottom: 50px;">
                                            <a href="#"><i class="fa fa-twitter"></i></a>
                                        </div>
                                        <div class="flex-item">
                                            <a href="#"><i class="fa fa-instagram"></i></a>
                                        </div>

                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>
   </div>
    </section>

Answer 1

在代码笔中，在CSS中，有一个类#portfolio_slider #item，margin: top 20px将其删除。

光滑的滑块跳跃

1 个答案: