My jquery Cycle 2 slide code does not work. Wondering where the bug is?

Question

My jquery Cycle 2 slide code does not work. Wondering where the bug is?

Asked 8 years, 9 months ago

Viewed 413 times

2

I’ve been trying to get this slide to work for a long time, but it doesn’t work at all, I wanted help from you.

My Html code:

.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>
<script src="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
   });
});

@Marconi jquery Cycle 2

– Gilmar Santos

2015/09/23 at 19:38
It is very simple to implement, see if this is what you want http://jsfiddle.net/buh159/BvgU3/15/ if it is put in the answer explaining the code

– Brunno

2015/09/23 at 19:46
@Brunno I’ll put the photo of the designer of my slide

– Gilmar Santos

2015/09/23 at 19:49
OK the implementation is simpler than I posted, the javascript is great because of the menu below, if remove the menu is light ;)

– Brunno

2015/09/23 at 19:50
2

@Brunno post as answer.

– Marconi

2015/09/23 at 19:54
@Brunno there this the designe of my slide

– Gilmar Santos

2015/09/23 at 20:01
@Brunno I didn’t understand what you meant ?

– Gilmar Santos

2015/09/23 at 20:04
1

@Gilmarsantos, this implementation I made, was in an html of mine, when I get home I make the slide work in your html that you posted to top :D

– Brunno

2015/09/23 at 20:06
@Brunno If you do it by, I’ll be very grateful !

– Gilmar Santos

2015/09/23 at 20:12
1

@Gilmarsantos as promised, follow the implementation fiddle on top of your html http://jsfiddle.net/buh159/BvgU3/17/ your version of jquery is ok don’t worry about it. And I didn’t touch the css, maybe some image overwrites something, but it’s all css detail. D anything I’m available

– Brunno

2015/09/23 at 22:16
@Brunno just have to thank you, you helped me a lot. Thank you very much.

– Gilmar Santos

2015/09/23 at 22:32
I’ve been trying to create a website for a long time and now you’ve put my work forward !!

– Gilmar Santos

2015/09/23 at 22:33

Show 7 more comments

2 answers

Browser other questions tagged jquery html cycle2

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

by Brunno • **3,531** points · Answer 1 · 2015-09-23T19:53:48+00:00

The implementation is very simple, you can do it 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>

CSS "Optional":

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');
});

Follows jsfiddle for viewing :D

by Emir Marques • **3,586** points · Answer 2 · 2015-09-23T19:51:24+00:00

Two things, first, see if the jquery version you are using is compatible with the Cycle plugin. According to the style you are using (". slideshow") I did not find 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 an example:

$(function() {
  $('#fade').cycle();
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="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>