Adding Prev and Next Buttons

[edgarolivas1305]

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

//**//

        $(document.body).on('click', self.timeline-custom-btn-next, function (e) {
            var nextItem = self.get_next();
            self.autoplay_clear();
            self.change_slide('click', nextItem );
        });

        $(document.body).on('click', self.timeline-custom-btn-prev, function (e) {
            var prevItem = self.get_prev();
            self.autoplay_clear();
            self.change_slide('click', prevItem);
        });

//**//

And 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; }`

//**//

and 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>

If you have any cuestion of this custom next and prev buttons send me a email edgar.olivas13057@gmail.com

[edgarolivas1305]

``

[ilkeryilmaz]

Hi,

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

Thank you.