Add custom Next and Prev

[edgarolivas1305]

This is a temporary solution. For the moment this have a little bug on the last item of the slide.

In the Timeline.js you need to add this into the function "watch_events: function () {" after "// Dots Click "

//**//

        $('.timelineCustomBtnNext').on('click', function (e) {
            var nextItem = self.get_next();
            console.log(nextItem);
            self.autoplay_clear();
            self.change_slide('click', nextItem);
        });

        $('.timelineCustomBtnPrev').on('click', function (e) {
            var prevItem = self.get_prev();
            if(prevItem >= 0){
                console.log(prevItem);
                self.autoplay_clear();
                self.change_slide('click', prevItem);
            }
        });

//**//

you need to add this in the timeline.css in the end of the file

//**//

.timeline-custom .timeline-custom-btn-prev, .timeline-custom .timeline-custom-btn-next {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 1px solid white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: calc((4rem - 20px) / 2);
  color: white;
  font-size: 12px;
  cursor: pointer;
 }

.timeline-custom .timeline-custom-btn-prev {
  left: 0;
 }

.timeline-custom .timeline-custom-btn-next {
  right: 0; 
}

//**//

Now in the HTML you need to add this before the -- div>class="timeline-container timeline-theme-1" --

        <div class="timeline-custom">
          <div class="timeline-custom-btn-prev timelineCustomBtnPrev">
            <i class="fas fa-chevron-left"></i>
          </div>
          <div class="timeline-custom-btn-next timelineCustomBtnNext">
            <i class="fas fa-chevron-right"></i>
          </div>
        </div>

"THIS IS ONLY FOR ONE TIMELINE.JS FOR MORE THAN ONE IT'S NECESSARY ANOTHER THINGS"

If you have any question about this "next and prev custom buttons" send me an email edgar.olivas13057@gmail.com

[ilkeryilmaz]

Hi,

Thank you for your support. But you must send your updates as a pull request.

Thank you.

[edgarolivas1305]

Thanks, i'll send my update on a pull request.