Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bxslider Plugin stops working after first "action"

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.

like image 892
White8Tiger Avatar asked Aug 07 '15 14:08

White8Tiger


1 Answers

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.

like image 108
White8Tiger Avatar answered Oct 22 '22 23:10

White8Tiger