I'm having some issues with this website I'm working on.
I'm using Bxslider plugin to create a sort of a portfolio for the projects page BUT something's wrong with it:
As soon as I click a thumbnail OR a direction arrow, the slider doesn't work anymore, I cannot change the displayed picture.
I've tried switching around the position of my html markup but it didn't do anything new.
So, this is my html
<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css" />
<ul class="portfolio">
<li><img src="img/portfolio/projetos3d/1.jpg"></li>
<li><img src="img/portfolio/projetos3d/2.jpg"></li>
<li><img src="img/portfolio/projetos3d/3.jpg"></li>
<li><img src="img/portfolio/projetos3d/7.jpg"></li>
<li><img src="img/portfolio/projetos3d/8.jpg"></li>
</ul>
<div class="thumbs">
<a data-slide-index="0" href=""><img src="img/portfolio/projetos3d/1.jpg"></a>
<a data-slide-index="1" href=""><img src="img/portfolio/projetos3d/2.jpg"></a>
<a data-slide-index="2" href=""><img src="img/portfolio/projetos3d/3.jpg"></a>
<a data-slide-index="3" href=""><img src="img/portfolio/projetos3d/7.jpg"></a>
<a data-slide-index="4" href=""><img src="img/portfolio/projetos3d/8.jpg"></a>
</div>
</div>
and here the js
<script src="js/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function(){
$('.portfolio').bxSlider({
pagerCustom: '.thumbs'
});
});
</script>
I can't find out why this is happening.
A little extra hand would much appreciated.
Here's a demo if you want to see it working (or not working...)
Thank you for your time
EDIT: Tried swaping the downloaded .js for the one they use on their website, I was thinking maybe it was somehow bugged, but I was wrong, it still doesn't work.
EDIT 2: I also tried to switch the scripts to before the html but, as expected, it didn't change a thing.
I found out what the problem was.
I had this lines I use on everything to make it faster to add transitions to buttons and stuff.
*{
-webkit-transition: color 0.2s linear, background 0.2s linear, border 0.2s linear;
-moz-transition: color 0.2s linear, background 0.2s linear, border 0.2s linear;
-o-transition: color 0.2s linear, background 0.2s linear, border 0.2s linear;
transition: color 0.2s linear, background 0.2s linear, border 0.2s linear;
}
It turns out they were bugging the slider.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With