Adding Prev and Next Buttons

[Edgar Olivas Guzmán]

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 [e-mail]

[Edgar Olivas Guzmán]

``

[ilker Yılmaz]

Hi,

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

Thank you.