Add Slider an Beginning/End

[OscarWilde]

How can I add a new Slider on the left or right side (Beginning or End)?

[lukeed]

Sorry, do you mean a slider or an individual slide?

[OscarWilde]

An individual slide. As far as AJAX is not that perfect at the moment, I would like to insert a slide into the DOM and reinit the Slideshow. Something like this.

The Problem is, that I have more that 100 Slides and it takes to long to load them at the beginning. I'm loading 20 now and move to the End (because they are on timeline) and I need the Option to load sliders from the past, which are left in my case.

[lukeed]

Okay, gotcha.

For starters, I would add a "custom" CSS effect that takes the Wave style & flips them. You'll want the DOM to be in the correct order (for loading & semantic purposes) -- just have them displayed in a reverse-like manner.

Secondly, 100 slides is a lot. Like, a lot a lot. Even without Bee3D in the mix, the 100 slides probably amounts to 300 to 400 DOM elements, along with loading, rendering, and pointing to image assets. Now, with Bee3D, each slide gets its classname property updated, which then updates the positioning & styling of the slides.

This may be fine & perform okay on your computer, but it's more than likely going to kill your mobile phone users, if you plan to have any.

Basically, you'll need to add "DOM virtualization" for your case -- aka, custom logic that either reuses the slide's DOM elements once a slide is no longer visible, or that adds & removes DOM elements based on their visibility.

You have 100 slides, but will only display a maximum of 5 at a time (1 center + 2 on either side). You may want an additional "buffer" of two slides on either side, which puts you at rendering 9 slides total.

To do this, you'd keep all your slide contents in an array & dynamically render the slides. Then you'd listen to the activate Bee3D event and track by the active index.

var slides = [{...}, {...}, {...}, ...];
var elem = document.getElementById('target');
var maxlen = slides.length;

function render(obj) {
  var d = document.createElement('div');
  d.classname = 'bee3d__slide';
  // ... build slide
  elem.appendChild(d);
}

// render first 5 slides

var slider = new Bee3D(elem, {...});

slider.el.on('next', function (event) {
  var cur = event.index;
  if (cur > 2 && cur <= (maxlen - 2)) {
    // if top-down DOM, remove top-most slide 
    // because it's the "oldest" / furthest one
    slider.el.slides[0].remove();
    // append the next slide
    render(slides[ cur + 3 ]);
    // reinit
  }
});

// Do the inverse for "prev" event, 
// removing bottom-most slide

[OscarWilde]

Sorry but I'm stucked at the Moment.

What I do: I bulild the first 20 Slides in HTML an then I start it with

    iota = document.getElementById('iota');
    slider = new Bee3D(iota, {
      effect: 'wave',
      focus: 19,
      listeners: {
        keys: true,
        touches: true,
        clicks: true,
        scroll: true,
        drag: true
      },
      navigation: {
    enabled: true
      },
      onInit: function(){
        console.log("Slider Initialized!");
      }
    });

That's ok so far. Then I add a new element like this (sorry for the jQuery style). I do that while I'm at slide index 19 (the last one).

  str = '<section class="bee3D--slide bee3D--slide__inactive bee3D--after bee3D--after-1" style="pointer-events: auto; cursor: pointer;"> ' +
        '  <div class="slide-bg fulltext" id="slide_id_300">' +
        '    <div class="slide-content">Content</div>' +
        '    <div class="slide-footer"><p><i class="fa fa-fw fa-clock-o" aria-hidden="true"></i> Test</p></div>' +
        '  </div>' +
        '</section>';
  html = $.parseHTML( str );  
  $("#iota").append( html );

The Slide apperas. But now I dont now how make it working. I've tried this and 'restarted' the slider:

  slider = new Bee3D(iota, {
    effect: 'wave',
    focus: 20,
    listeners: {
      keys: true,
      ...
    },
    navigation: {
    enabled: true
    },
    onInit: function(){
      console.log("Slider Re-Initialized!");
    }
  });

This works and the Slides are moving from left to right but when I come to slide 20 (it was 0 to 19 before) there is no trigger for 20. If I move back to 19 it triggers 18 instead.

If you like to, take a look at https://iota.php-testserver.de yourself. I don't know what to do.

[OscarWilde]

BTW: To add the Slide please click in "ADD SLIDE" at the bottom of the page.

[lukeed]

Hey, have you looked at the source for the current AJAX feature? It's at src/scripts/features/ajax/index.js. Specifically, look at the buildSlides and addItem phases.

The important parts are calling slideEvents on the new slide(s), which attaches event listeners to the new items, and then firing a touch event (via slider.el.touch()), which will apply the correct classnames so that you dont have to construct them manually.

[OscarWilde]

You can close this Issue, I solved it.