Jquery Cyclo 2 problem with effect

Asked

Viewed 50 times

-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>
    <script type="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 the Jscript

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

If I put:

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

works.

But if I put

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

Stand still in the first photo and the banner does not rotate.

If I do:

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

It also works but with the standard effect.

Where am I going wrong?

jquery css3 cycle2

  • I don’t know the plugin but where is this fx: 'shuffle'? I looked at the API the values for fx are fade, fadeout, none and scrollHorz. Others need to be included through plugins, are using something for this?

  • http://jquery.malsup.com/cycle/, see the middle of the page in the examples der banner. the first example is shuffle

  • Well, you marked the question with cycle2, That right there sent is the documentation of another version.

  • Got it.But in this case, what should I do? I downloaded Cycle from version 1 and it still didn’t work. By the way, the version I passed the link is the Cycle 1 is not?

1 answer

1

I managed to: 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>
    <script type="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!

Browser other questions tagged jquery css3 cycle2

You are not signed in. Login or sign up in order to post.