I want to show a part of next slide (10%), then when I move over that part of next slide it will show (30%).
Something like this: http://karimrashid.com/
Here's what I did till now:
<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 Code:
.slideshow-container {
overflow: hidden !important;
width: 50%;
}
.slideshow {
overflow: visible !important;
width: 90%;
margin-right: 10%;
}
http://jsfiddle.net/CairoCoder/x89sQ/259/
Is there's any existing slider that can do the trick?
why do you want to look some other slider. use what has used in that existing site.
http://karimrashid.com/js/script.js
Please let me know if you need further help.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.