admin管理员组

文章数量:1123510

using Jquery Cycle2 - overlay with plugin Caption2. The caption (.cycle-overlay) animates binded to the main animation. but I need to get the .cycle-overlay to not animate out and back in again from slide 1 to 2 so in essence keep the same text without animating in/out between 2 slides.

I trided on... slide 1 .cycle-slide: data-cycle-overlay-fx-in="fadeIn" data-cycle-overlay-fx-out="none"

slide 2 .cycle-slide: data-cycle-overlay-fx-in="none" data-cycle-overlay-fx-out="fadfeOut"

But uusally you can effect each slides FX's per slide but as it is... it is just the data that comes form data-cycle-desc="slide 1" it doesnt effect: .cycle-overlay

Any help or guidance for a solution... Thanks in advance.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no">
<title>{cms:pageTitle}</title>
    
<style>
    html, body {
        padding: 0;
        margin: 0;
        font-size: 18px;
        line-height: 22px;
    }
    
    .cycle-slideshow {
        position: relative
}

.cycle-overlay {
    position: absolute;
    z-index: 500;
    top: 50%;
    /*left: 50%;*/
    left: 0;
    right: 0;
    transform: translate(0%, -50%);
    color: #FFF;
    /*text-transform: lowercase;*/
    text-align: center;
    opacity: 0.8;
    font-size: 5em;
    color: #000;
    
}
    .cycle-slide {
        width: 100%;
        height: 100px;
    }
.cycle-slide img,
.cycle-slide video {
    vertical-align: bottom;
    display: block;
}

.cycle-slide video {
    width: 100%;
    height: auto;
}
    </style>

</head>

<body>
    
    <div class="cycle-slideshow"
       data-cycle-fx="scrollVert"
       data-cycle-slides=".cycle-slide"
       data-cycle-caption-plugin="caption2"
       data-cycle-timeout="2000"
       data-cycle-speed="1000"
       data-cycle-overlay-fx-in="fadeIn"
       data-cycle-overlay-fx-out="fadeOut"
       >
    <div class="cycle-overlay"></div>
    <div class="cycle-slide" data-cycle-desc="Desc 1" style="background-color: yellow">
        <p>Slide 1</p>
    </div>
    <div class="cycle-slide" data-cycle-desc="Desc 1" style="background-color: red">
        <p>Slide 2</p>
    </div>
    <div class="cycle-slide" data-cycle-desc="Desc 3" style="background-color: blue">
        <p>Slide 3</p>
    </div>
    
  </div>
    
<!-- include jQuery -->
<script src=".4.1/jquery.min.js"></script> 
<!-- Cycle 2 --> 
<script src=".cycle2.min.js"></script> 
<!-- Cycle 2 plugins --> 
<script src=".cycle2.scrollVert.min.js"></script> 
<script src=".cycle2.caption2.min.js"></script>
    
    </body>
</html>

本文标签： Jquery Cycle2overlay keep descrption for 2 slidesStack Overflow

版权声明：本文标题：Jquery Cycle2 - overlay keep descrption for 2 slides - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736576292a1944861.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。