Bxslider Plugin stops working after first "action"

Question

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.

score 6 · Accepted Answer · answered Aug 10 '15 at 09:14

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.

score 0 · Answer 2 · answered Aug 10 '15 at 09:03

It appears you have no DOCTYPE, head or body within the page demo you've included. This could have a possible effect on the functionality of the plugin.

Have you tried using valid markup? At the very least:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>BX Slider Example</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/inovstrap.css" />
    <link rel="stylesheet" type="text/css" href="css/css.css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/breakingNews.css">
    <!-- JS -->
    <script src="js/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css" />
</head>

<body>
    <div class="container">
    <h2>
        PORTFOLIO<br>
        <span class="white">PROJETOS 3D</span>
    </h2>
    <div class="content double_col">
        <div class="col">
            <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>
        <div class="col portfolio_desc">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris viverra ligula eget fermentum ultricies. Aenean tempus nec odio at consectetur.<br><br>
                Donec lobortis consequat sollicitudin. In et aliquam nunc. Phasellus vel viverra eros, ac gravida augue. Sed vel sapien vel enim blandit placerat et a libero. Donec aliquam euismod mauris id semper.<br><br>
                Maecenas consequat quam elit, in dapibus augue congue eget. Sed faucibus interdum porttitor. Aenean lobortis aliquet leo, et scelerisque leo pretium id. Vestibulum est dolor, cursus sit amet pretium vitae, commodo ut enim. Cras sit amet est turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            </p>
            <a href="index.php?p=contactos" class="brochura"><img src="img/portfolio/pdf.png"> &nbsp; Visualizar brochura</a>
            <a href="index.php?p=contactos" class="orcamento">PEDIR ORÃ‡AMENTO</a>
        </div>
    </div>
</div>
<!-- SLIDER -->
<script src="js/jquery.bxslider.min.js"></script>
<script>
    $(document).ready(function(){
        $('.portfolio').bxSlider({
            pagerCustom: '.thumbs'
        });
    });
</script>
</body>
</html>

Bxslider Plugin stops working after first "action"

2 Answers2