Search code examples
javascriptjqueryhtmlbxslider

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.


Solution

  • 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.