Bee3D have pagination bullets

[floringhe]

Hi, I just buy the plugin and I have 2 questions:

1. As I write in the title i want to know if the plugin have pagination.
2. I am trying to increase the width and height of the slider. By default in Bee3d.css the slide have a width of 512px and a height of 380px. If i increase the px of both, transition go very weird.

[lukeed]

Hi there,

1. This is pretty easy. You have to create your own HTML (customize!) and styles. Then you listen to the change event from the slider, and update the "active" class on your custom HTML.

   <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>
   </div>
   
   <nav id="dots">
     <a href="#"></a>
     <a href="#"></a>
     <a href="#"></a>
   </nav>
   
   <script>
     var demo = document.getElementById('demo');
     var dots = [].slice.call( document.querySelectorAll('#dots > a') );
   
     var slider = new Bee3D(demo, {
       effect: 'concave',
       // ... more options here
     });
   
     slider.el.on('activate', function (evt) {
       dots.forEach(function (el, idx) {
         el.className = (idx === evt.index) ? 'active' : '';
       });
     });
   </script>

2. You can look at #32 for a guide on changing slide dimensions without anything breaking.

Let me know if that helps!

[floringhe]

Works partially because I cannot change the item slide when I click a pagination item. Sorry for my english!

[lukeed]

Hey, no worries.

You have to set that up too. One way to do that is this:

// continued...

dots.forEach(function (el, idx) {
  el.addEventListener('click', function (evt) {
    evt.preventDefault();
    slider.el.slide(idx);
  });
});

See Commands for more info.

[floringhe]

Thank you very much for your very quick answer.Works very good!

[lukeed]

Great, happy to help 👍