ZFGC
Resources => Coding => Topic started by: Kren on April 16, 2014, 09:39:56 pm
-
I have been learning how to make websites and was able to make one, yet I got into a bug that involves FlexSlider, I have to add multiple flexsliders one in each accordion, everything looks fine, yet the slider doesn't work all the time, it seems that the hidden attribute of the accordion is messing with it, the website is: http://iplagunera.com/modelos.html the first two accordions have flexslider, sometimes it works sometimes it doesn't, the code I'm using is the following:
<div class="accordion">
<div class="accord_cont">
<div class="flexslider">
<ul class="slides">
<li>
<img src="./index2_files/sa/1.jpg" alt="">
</li>
<li>
<img src="./index2_files/sa/2.jpg" alt="">
</li>
</ul>
</div>
</div>
</div>
While the Jscript code is the following:
<!-- CALL FLEX SLIDER -->
<script>
$(".accordion h3").click(function(){
$('.flexslider').flexslider({
pauseOnHover: false,
slideshow: true,
slideshowSpeed: 4000
animationSpeed: 1300,
animation: "slide",
easing: "swing",
direction: "horizontal",
controlNav: false,
directionNav: true
});
});
</script>
<!-- CALL ACCORDION -->
<script>
$(".accordion h3").eq(0).addClass("active");
$(".accordion .accord_cont").eq(0).show();
$(".accordion h3").click(function(){
$(this).next(".accord_cont").slideToggle("slow")
.siblings(".accord_cont:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
</script>
I'm pretty sure it's something simple, like the accordion loading at the same time as the flexslider, while it should be first the accordion and once loaded the flexslider, so zfgc any help D:?
-
Okay, this is easy. I don't know why this person is adding and removing that <h3>. I would suggest removing that code and adding in a <div class="button"> within accordion or something.
I'm not sure how this accordion tool works. It looks a bit convoluted.
-
It's not an HTML error but a Javascript error, you have the Javascript functions calling ".accordion h3" elements, when they should be calling ".accordion img".
-
Oh damn, didn't see that!
$(".accordion h3").eq(0).addClass("active");
$(".accordion .accord_cont").eq(0).show();
^^ my bad. What an odd.. way of doing this, though?