Instructions for intalling from wiki not working

[miguelval]

Hello, I tried to follow the instructions on the documentation to get the plugin working from here:

https://github.com/lukeed/bee3d/wiki/Getting-Started

But I do not even see a 'dependecies' folder in scripts/dependencies to have this line working:

Do I need to follow a different process to get it to work? I am on a laravel project btw.

[lukeed]

Hey, sorry for that.

From your download, you should be looking at the dist/ directory contents. In there, you'll see this file:

/<path to bee3d>/dist/js/vendor/classie.js

The Getting Started wiki is referencing hypothetical paths you'd be placing these files into. The scripts and styles don't exist either.

Hope that helps!

[miguelval]

Thank you. I am importing the correct files now. The problem now is that, from the example, the slides are not working as expected. I just see the first two sections, but no navigation buttons, or any way to click any of the slides to scroll.

            <div id="demo" class="bee3D--parent">
              <section class="bee3D--slide">Slide 1</section>
              <section class="bee3D--slide">Slide 2</section>
              <section class="bee3D--slide">Slide 3</section>
              <section class="bee3D--slide">Slide 4</section>
              <section class="bee3D--slide">Slide 5</section>
            </div>   

    <script src="./js/vendor/classie.js"></script> 
    <script src="./js/bee3D.js"></script>
    <script>
      var demo = document.getElementById('demo');

      var slider = new Bee3D(demo, {
        effect: 'concave',
        // ... more options here
      });
      console.log(slider);
    </script>

Any insights? Thanks.

[lukeed]

I would refer you back to the examples & getting started guide:

• your bee3D--parent needs to exist have have the dimensions/sizing you want

• your slides should have this markup, at least:

  <section class=bee3D--slide>
    <div class=bee3D--inner>
      <!-- any -->
    </div>
  </section>

• you need to turn on the interactive behaviors you want.
  I suggest this at minimum based on your snippet:

  var slider = new Bee3D(element, {
    effect: 'concave',
    listeners: {
      keys: true
    },
    navigation: {
      enabled: true
    }
  });

[miguelval]

Thanks. From the examples, I also noticed I was missing this to show the nav arrows: <span class="bee3D--nav bee3D--nav__prev"></span> <span class="bee3D--nav bee3D--nav__next"></span>

It's working as expected now. Thanks for your help!

[lukeed]

Oh right, I meant to include that in my bullet list.

Glad it's working!