Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 17, 2018 at 8:17 pm #1010955
    brandaspect

    Hi We have a horizontal slider on our site and the client would like it to have the navigation on the left and scroll from left to right rather than the default right to left,

    the reason is they want to show the latest events and show the timeline at the present and going back in time.

    September 18, 2018 at 5:12 am #1011067
    Ismael

    Hey brandaspect,

    Thank you for using Enfold.

    You can use this css to move the navigation to the left.

    .av-timeline-nav {
    right: auto;
    left: 0;
}

    You may need to edit the config-templatebuilder > avia-shortcodes > timeline > timeline.js file in order to reverse the slider.

    Best regards,
    Ismael

    September 19, 2018 at 5:01 pm #1011922
    brandaspect

    Hi Ismael,

    Thank you for your advice, I’d like to start with the last item in the carousel visible rather than the first, I’m not sure what needs to be edited within the javascript but think it’s the createCarousel function, can you advise me to how to acheive this?

    thanks

    Andy

    September 20, 2018 at 8:00 am #1012158
    Ismael

    Hi,

    You can use this script to reverse the milestones. Just add it in the functions.php file.

    add_action('wp_footer', 'ava_custom_reverse_timeline');
function ava_custom_reverse_timeline(){
	?>
	<script type="text/javascript">
		(function($) {	
            $('.avia-timeline').each( function(e) {
                $.fn.reverse = [].reverse;
                var milestone = $(this).find('.av-milestone');
                $(this).empty().append(milestone.reverse());
            });
		})(jQuery);
	</script>
	<?php
}

    Best regards,
    Ismael

    September 20, 2018 at 2:21 pm #1012320
    brandaspect

    Thanks Ismael,

    I appreciate you help. I don’t think I explained myself well enough what we are look for is for the initial state to be the end of the slider. By default the slider starts at the first object and scrolls with the next timeline item coming from the right hand side. Put simply we want the state on the page opening to show the end of the timeline rather than the start.

    thanks for your assistance

    Andy

    September 20, 2018 at 4:17 pm #1012376
    Ismael

    Hi,

    I see. Replace the script with this instead.

    
add_action('wp_footer', 'ava_custom_reverse_timeline');
function ava_custom_reverse_timeline(){
	?>
	<script type="text/javascript">
		(function($) {	
            $(document).ready(function() {
                var i = 0;
                var clickTimeline = setInterval(function() {
                    if(i == 4) {
                        $(window).trigger('av-stop-click-timeline');
                    }
                    $('.next-slide.av-timeline-nav-next').trigger('click'); 
                    i++;
                }, 10);

                $(window).on('av-stop-click-timeline', function() {
                    clearInterval(clickTimeline);
                });
            });
		})(jQuery);
	</script>
	<?php
}

    Best regards,
    Ismael

    September 20, 2018 at 6:08 pm #1012413
    brandaspect

    Thanks Ismael,

    I amended “if(i == 4)” since this moved it only 1 place up the timeline to “if(i == 100)” and tested when new items were added and this moved it right to the end.

    Thank you so much for you help, this was really bugging me :)

    September 21, 2018 at 3:24 am #1012585
    Ismael

    Hi,

    You’re welcome! Glad we could help!

    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Reversing the timeline’ is closed to new replies.