显示下一张幻灯片的一部分

时间:2018-03-18 04:49:12

标签: javascript jquery slider

我想显示下一张幻灯片的一部分(10%),然后当我移动下一张幻灯片的那部分时,它会显示(30%)。

像这样:http://karimrashid.com/

这是我到目前为止所做的事情:

<script>$.fn.cycle.defaults.autoSelector = '.slideshow';</script>

<h2>Show the left and the right slides</h2>
<div class="slideshow-container">
    <div class="slideshow responsive" 
        data-cycle-fx=carousel
        data-cycle-timeout=1000
        data-cycle-carousel-visible=1
        data-cycle-carousel-fluid=true
        >
        <img src="http://malsup.github.io/images/beach1.jpg">
        <img src="http://malsup.github.io/images/beach2.jpg">
        <img src="http://malsup.github.io/images/beach3.jpg">
        <img src="http://malsup.github.io/images/beach4.jpg">
    </div>
</div>

CSS代码:

.slideshow-container {
    overflow: hidden !important;
    width: 50%;
}

.slideshow {
    overflow: visible !important;
    width: 90%;
    margin-right: 10%;
}

http://jsfiddle.net/CairoCoder/x89sQ/259/

是否有任何现有的滑块可以解决这个问题?

1 个答案:

答案 0 :(得分:0)

为什么要查看其他滑块?使用现有网站中使用的内容。

http://karimrashid.com/js/script.js

如果您需要进一步的帮助,请与我们联系。