JQuery Cyclo 2 problem with effect

Question

JQuery Cyclo 2 problem with effect

Navigation

#1 by (1 votes)

-1

I have the following html:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Slider</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.js"></script><scripttype="text/javascript" src="js/jquery.cycle.js"></script>
    <script type="text/javascript" src="js/script.js"></script>

    <style>
      * {
        margin: 0 auto;
        padding: 0;
      }
      body {
        width: 80%;
      }
      .box {
        width: 300px;
        height: 187px;
        overflow: hidden;
      }
    </style>
</head>
<body>
    <div class="box">
       <img src="img/1.png" width="300px" class="slide" />
       <img src="img/2.jpg" width="300px" class="slide" />
       <img src="img/3.jpg" width="300px" class="slide" />
       <img src="img/4.png" width="300px" class="slide" />
       <img src="img/5.jpg" width="300px" class="slide" />
    </div>
</body>
</html>

And JScript

$('.box').cycle({ 
    fx:     'shuffle', 
    easing: 'easeOutBack', 
    delay:  -4000 
});

If I put:

$('.box').cycle();

It works.

But if I put it

$('.box').cycle({ 
    fx:     'shuffle', 
    easing: 'easeOutBack', 
    delay:  -4000 
});

It stops at the first photo and the banner does not rotate.

If I do:

$('.box').cycle({ 
    fx:     'shuffle'
});

It also works but with the default effect.

Where am I going wrong?

jquery css3 cycle2

asked by anonymous 28.02.2016 / 00:01

1 answer

How to call a JFrame from another JFrame with different classes Lighting inside a room in Blender [closed]

score 1 · Answer 1

I have: html:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Slider</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.js"></script><scripttype="text/javascript" src="js/jquery.cycle.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <link type="text/css" rel="stylesheet" href="css/cssSlider.css" />
</head>
<body>
   <div class="box">
     <span class="pager"></span>

     <div class="slider" >
       <div class="slider-item">
         <img src="img/1.png" width="300px" />
         <p>Texte 1</p>
       </div>
       <div class="slider-item">
          <img src="img/2.jpg" width="300px" />
          <p>Texte 2</p>
        </div>
        <div class="slider-item">
          <img src="img/3.jpg" width="300px" />
          <p>Texte 3</p>
        </div>
        <div class="slider-item">
          <img src="img/4.png" width="300px" />
          <p>Texte 4</p>
        </div>
        <div class="slider-item">
          <img src="img/5.jpg" width="300px" />
          <p>Texte 5</p>
        </div>
     </div> 
   </div>
</body>
</html>

css

  * {
    margin: 0 auto;
    padding: 0;
  }
  body {
    width: 80%;
  }
  .box {
    width: 300px;
    margin: 0 auto;
  }
  .slider {
    width: 300px;
    height: 187px;
    overflow: hidden;
  }
  .slider-item {
    width: 300px;
    height: 187px;
    position: relative;
  }
  .slider-item p{
    position: absolute;
    bottom:0px;
    width: 300px;
    height: 30px;
    font: normal 13px Arial;
    color: #fff;
    background-color: rgba(0,0,0, 0.5);
  }
  .pager {
    position: absolute;
    z-index: 999;
  }
  .pager a {
    width: 20px;
    height: 20px;
    display: block;
    float: left;
    border-radius: 100%;
    -moz-border-radius: 100%;
    -web-kit-border-radius: 100%;
    background-color: rgba(0,0,0, 0.8);
    margin: 0 3px;
    cursor: pointer;
    color: #FFF;
  }
  .pager a:hover {
    background-color: #ccc;
  }

JavaScript

$(function() {
    $('.slider').cycle({
        timeout: 2000,
        fx     : 'shuffle',
        pager  : $('.pager'),
        pagerAnchorBuilder:  function(index, DOMelement) {
            return '<a></a>';
        }
    });
});

Thank you all!