有没有办法在光滑的滑块上叠加图像?

时间:2015-02-10 01:57:00

标签: javascript jquery html css

我试图重新创建滑动效果,如下所示:www.sugarcrm.com

我只需要滑动部分而不是开始动画。我尝试使用光滑的滑块,因为它的响应,但为了覆盖PNG图像,我需要使位置绝对和z索引。但是一旦我这样做,一切都会变得怪异。有没有办法在保持响应性的同时实现这种效果?有或没有光滑的插件。谢谢大家!

         

<style type="text/css">

    body {
        margin: 0;
    }

    #container {
        width: 1920px;
        height: 455px;
        background: transparent;
        margin: 0 auto;
    }

    .your-class {
        margin: 0 auto;
    }

</style>

<script type="text/javascript" src="jquery-2.1.1.js"></script>
<script type="text/javascript" src="slick-1.4.1/slick-1.4.1/slick/slick.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        autoplay:true,
        arrows: false,
        draggable: false,
        mobileFirst: true,
        pauseOnHover: false
        });
    });
</script>

<div id="container">

    <div class="your-class">

        <div>
            <img class="images" src="img1.jpg">
        </div>
        <div>
            <img class="images" src="img2.jpg">
        </div>
        <div>
            <img class="images" src="img3.jpg">
        </div>
        <div>
            <img class="images" src="img4.jpg">
        </div>
    </div>



</div>

0 个答案:

没有答案