My code from my jquery cycle 2 slide does not work. I wonder where the error is?

Navigation
2

I've been trying to make this slide a long time, but it does not work at all, I wanted help from you.

MyHTMlcode:

.slideshow{
    width:100%;
    max-width:980px;
	overflow:hidden;
    height:505px;
    margin:0 auto;
}

.slides{
    width:100%;
    height:auto;
    display:block;
}

.slide-1{
    width:80%;
    height:505px;
    float:left;
}

.slide-2{
    width:20%;
    height:250px;
    float:left;
}

.slide-3{
    width:20%;
    height:250px;
    float:left;
}

.slide-1 img{
	width:635px;
	height:500px;
}

.slide-2 img{
	width:345px;
	height:250px;
	margin-left:-150px;
}

.slide-3 img{
	width:345px;
	height:250px;
	margin-left:-150px;
}

#btn-slide{
	margin-top:-320px;
}

#btn-next{
	float:right;
	position:relative;
	left:-94px;
}

#btn-prev{
	float:left;
	position:relative;
	left:90px;
	margin-top:-4px;
}

/*-----------Fim da Config. do slideshow------------*/

.info-slide-left{
	font-family:Arial,Trebuchet MS, sans-serif;
	font-size:1.563em;
	width:650px;
	margin-top:-180px;
	margin-left:10px;
	line-height:1.68em;
}

.info-slide-left  a{
	text-decoration:none;
	color:#000;
}

.info-slide-left a:hover{
	text-decoration:underline;	
}

.info-slide-rigth{
	font-family:Arial,Trebuchet MS, sans-serif;
	font-size:13px;
	width:400px;
	margin-top:-100px;
	margin-left:-140px;
	line-height:22px;
}

.info-slide-rigth a{
	text-decoration:none;
	color:#000;
}

.info-slide-rigth a:hover{
	text-decoration:underline;	
}

.info-slide-right-3{
	font-family:Arial,Trebuchet MS, sans-serif;
	font-size:13px;
	width:400px;
	margin-top:-100px;
	margin-left:-140px;
	line-height:22px;
}

.info-slide-right-3 a{
	text-decoration:none;
	color:#000;
}

.info-slide-right-3 a:hover{
	text-decoration:underline;	
}

.seta-direita:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    width: 0; 
    height: 0; 
    margin-top:-920px;

    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid #FF7F00;
}

.seta-direita p{
	z-index:99;	
    margin-left:14px;
    font-family:Arial,Trebuchet MS, sans-serif;
    font-size:14px;
    font-weight:bold;
	margin-top:-500px;
}

.seta-direita-2:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    width: 0; 
    height: 0; 
	position:relative;
	top:-208px;

    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid #FF7F00;
}

.seta-direita-2 p{
	z-index:99;	
    margin-left:14px;
    font-family:Arial,Trebuchet MS, sans-serif;
    font-size:14px;
    font-weight:bold;
	position:relative;
	top:-246px;
}

.seta-direita-3:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    width: 0; 
    height: 0; 
	position:relative;
	top:-208px;

    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid #FF7F00;
}

.seta-direita-3 p{
	z-index:99;	
    margin-left:14px;
    font-family:Arial,Trebuchet MS, sans-serif;
    font-size:14px;
    font-weight:bold;
	position:relative;
	top:-246px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><scriptsrc="http://malsup.github.com/jquery.cycle2.js"></script>

<div class="slideshow">
  <div class="slides">

    <div class="slide-1">
     <a href="#"><img src="img/01.jpg"></a>
     <div class="info-slide-left">
     
       <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a>  
       <div class="seta-direita">
        <p>Categoria #1</p>
       </div>
        
         
     </div>
    </div>
        
    <div class="slide-2">
     <a href="#"><img src="img/img02.jpg"><a/>
     <div class="info-slide-rigth">
     
       <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a>
       <div class="seta-direita-2">
        <p>Categoria #1</p>
       </div>
       
       
       </div>
    </div>
    
    <div class="slide-3">
    
     <a href="#"><img src="img/img02.jpg"></a>
     <div class="info-slide-right-3">
     
       <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a> 
       <div class="seta-direita-3">
        <p>Categoria #1</p>
       </div>
        
     </div>
    </div>

  </div>
  
  <div class="slide"><!--Grupo 2 de slide-->

    <div class="slide-1">
     <a href="#"><img src="img/01.jpg"></a>
     <div class="info-slide-left">
     
       <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a>  
       <div class="seta-direita">
        <p>Categoria #1</p>
       </div>
        
         
     </div>
    </div>
        
    <div class="slide-2">
     <a href="#"><img src="img/img02.jpg"><a/>
     <div class="info-slide-rigth">
     
       <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a>
       <div class="seta-direita-2">
        <p>Categoria #1</p>
       </div>
       
       
       </div>
    </div>
    
    <div class="slide-3">
    
     <a href="#"><img src="img/img02.jpg"></a>
     <div class="info-slide-right-3">
     
       <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a> 
       <div class="seta-direita-3">
        <p>Categoria #1</p>
       </div>
        
     </div>
    </div>

  </div>
  
  

  </div><!--Fim do 2 Slide-->
</div><!--Fim da div slideshow-->

<!-- begin snippet: js hide: false -->

Javascript code: 

$(document).ready(function() { 
   $('.slideshow').cycle({
      speed: 600,
      manualSpeed: 100
   });
});
    
asked by anonymous 23.09.2015 / 21:16

2 answers

3

The implementation is very simple, you can do as follows:

HTML: 

<div class="cycle-slideshow" data-cycle-fx="fadeout" data-cycle-auto-height="4:3" data-cycle-delay="-1500" style="height: 222px; overflow: hidden;">    
    <img src="http://malsup.github.io/images/p1.jpg"data-cycle-fx="tileBlind" class="first cycle-slide">
    <img src="http://malsup.github.io/images/p2.jpg"class="cycle-slide">
    <img src="http://malsup.github.io/images/p3.jpg"data-cycle-fx="tileBlind" class="cycle-slide">
    <img src="http://malsup.github.io/images/p4.jpg"class="cycle-slide cycle-slide-active">        
</div>

"Optional" CSS: 

span.cycle-pager-active {
    background-color: #ff0;
}
.cycle-slideshow, .cycle-slideshow img {
    width: 500px;
}
.my-pager span {
    display: inline-block;
    width: 100px;
    border: 1px solid gray;
    padding: 4px;
    margin: 3px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
}

JavaScript: 

$(function () {
    $('div.cycle-slideshow').cycle('goto');
});

Follow jsfiddle for preview: D

    
23.09.2015 / 21:53
2

Two things, first, see if the jquery version you are using is compatible with the cycle plugin. According to the style you're using (".shideshow") I did not find it in your code. As far as I know you need to use the following structure: 

<div id="<id-qualquer>">   
<img src="http://malsup.github.com/images/beach1.jpg"width="200" height="200">   
<img src="http://malsup.github.com/images/beach2.jpg"width="200" height="200">   
<img src="http://malsup.github.com/images/beach3.jpg"width="200" height="200"> 
</div>

$(function() {
   $('#<id-qualquer>').cycle();
});

Below is an example: 

$(function() {
  $('#fade').cycle();
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><scriptsrc="http://malsup.github.com/jquery.cycle.all.js"></script>


<div id="fade" class="pics" style="position: relative; overflow: visible;">
  <img src="http://malsup.github.com/images/beach1.jpg"width="200" height="200">
  <img src="http://malsup.github.com/images/beach2.jpg"width="200" height="200">
  <img src="http://malsup.github.com/images/beach3.jpg"width="200" height="200">
</div>
    
23.09.2015 / 21:51
Shuffle numbers from a list? [duplicate] Error: Can not find data type long