Xtemos image gallery

This topic has 46 replies, 3 voices, and was last updated 6 years, 4 months ago by Artem Temos.

Viewing 17 posts - 31 through 47 (of 47 total)

← 1 2

Author

Posts

December 28, 2017 at 3:33 pm #30809

Artem Temos

Keymaster

Hi,

Do you mean to stop the autoplay completely when you click on any navigation element for particular carousel?

Regards

December 28, 2017 at 8:34 pm #30835

esthetis

Participant

Yes for example in order that users have enough time to read a long text without returning on the navigator

December 29, 2017 at 7:49 am #30853

Artem Temos

Keymaster

Try to add the following PHP code snippet to the child theme functions.php file to do this

	function basel_owl_carousel_init( $atts = array() ) {
		extract( shortcode_atts( basel_get_owl_atts(), $atts ) );

		$func_name = 'carousel_' . $carousel_id;
		$func_name = function() use( $carousel_id, $slides_per_view, $autoplay, $autoheight, $speed, $hide_pagination_control, $hide_prev_next_buttons, $scroll_per_page, $wrap ) {
			
			$items = array();
			$items['desktop'] = ($slides_per_view > 0) ? $slides_per_view : 1;
			$items['desktop_small'] = ($items['desktop'] > 1) ? $items['desktop'] - 1 : 1;
			$items['tablet'] = ($items['desktop_small'] > 1) ? $items['desktop_small'] : 1;
			$items['mobile'] = ($items['tablet'] > 2) ? $items['tablet'] - 2 : 1;

			if($items['mobile'] > 2) {
				$items['mobile'] = 2;
			}

			?>

			<script type="text/javascript">
				jQuery( document ).ready(function( $ ) {

	                var owl = $("#<?php echo esc_js( $carousel_id ); ?> .owl-carousel");

					$( window ).bind( "vc_js", function() {
						owl.trigger('refresh.owl.carousel');
					} );

					var options = {
	            		rtl: $('body').hasClass('rtl'),
			            items: <?php echo esc_js( $items['desktop'] ); ?>, 
			            responsive: {
			            	979: {
			            		items: <?php echo esc_js( $items['desktop'] ); ?>
			            	},
			            	768: {
			            		items: <?php echo esc_js( $items['desktop_small'] ); ?>
			            	},
			            	479: {
			            		items: <?php echo esc_js( $items['tablet'] ); ?>
			            	},
			            	0: {
			            		items: <?php echo esc_js( $items['mobile'] ); ?>
			            	}
			            },
			            autoplay: <?php echo ($autoplay == 'yes') ? 'true' : 'false'; ?>,
			            autoplayTimeout: <?php echo $speed; ?>,
			            dots: <?php echo ($hide_pagination_control == 'yes') ? 'false' : 'true'; ?>,
			            nav: <?php echo ($hide_prev_next_buttons == 'yes') ? 'false' : 'true'; ?>,
			            autoheight: <?php echo ($autoheight == 'yes') ? 'false' : 'true'; ?>,
			            slideBy:  <?php echo ($scroll_per_page == 'yes') ? '\'page\'' : 1; ?>,
			            navText:false,
			            loop: <?php echo ($wrap == 'yes') ? 'true' : 'false'; ?>,
			            onRefreshed: function() {
			            	$(window).resize();
			            }
					};

	                owl.owlCarousel(options);
					
					$(document).on( 'click', '.owl-nav > div, .owl-dots > div', function(){
						owl.trigger( 'stop.owl.autoplay' );
					} );

				});
			</script>

			<?php
		};

		if( $carousel_js_inline == 'yes' ) {
			$func_name();
		} else {
			add_action( 'basel_after_footer', $func_name );
		}
	}

December 29, 2017 at 1:22 pm #30893

esthetis

Participant

Hi,

This is only permament solution, can you maybe manage this in your next version (for example with a switch in theme settings?)

Kind regards

December 29, 2017 at 1:23 pm #30896

Artem Temos

Keymaster

We will consider implementing some mechanism for this in our future updates. But we suggest you to keep this code in your child theme anyway.

December 29, 2017 at 1:44 pm #30904

esthetis

Participant

I tested the code but it works only once by clicking on the navigator element.
If I click twice on another element it doesn’t work anymore.

Please let me know

December 29, 2017 at 1:56 pm #30906

Artem Temos

Keymaster

Could you please provide us your FTP access so we can check it?

December 29, 2017 at 1:58 pm #30907

esthetis

Participant

no sorry but you can test by youself as the issue should be replicated on your side

December 29, 2017 at 2:06 pm #30909

Artem Temos

Keymaster

It works correctly on our side and we don’t this code added to your website at all.

December 29, 2017 at 2:12 pm #30913

esthetis

Participant

private content

December 29, 2017 at 2:39 pm #30915

Artem Temos

Keymaster

Try to set this code instead

	function basel_owl_carousel_init( $atts = array() ) {
		extract( shortcode_atts( basel_get_owl_atts(), $atts ) );

		$func_name = 'carousel_' . $carousel_id;
		$func_name = function() use( $carousel_id, $slides_per_view, $autoplay, $autoheight, $speed, $hide_pagination_control, $hide_prev_next_buttons, $scroll_per_page, $wrap ) {
			
			$items = array();
			$items['desktop'] = ($slides_per_view > 0) ? $slides_per_view : 1;
			$items['desktop_small'] = ($items['desktop'] > 1) ? $items['desktop'] - 1 : 1;
			$items['tablet'] = ($items['desktop_small'] > 1) ? $items['desktop_small'] : 1;
			$items['mobile'] = ($items['tablet'] > 2) ? $items['tablet'] - 2 : 1;

			if($items['mobile'] > 2) {
				$items['mobile'] = 2;
			}

			?>

			<script type="text/javascript">
				jQuery( document ).ready(function( $ ) {

	                var owl = $("#<?php echo esc_js( $carousel_id ); ?> .owl-carousel");

					$( window ).bind( "vc_js", function() {
						owl.trigger('refresh.owl.carousel');
					} );

					var options = {
	            		rtl: $('body').hasClass('rtl'),
			            items: <?php echo esc_js( $items['desktop'] ); ?>, 
			            responsive: {
			            	979: {
			            		items: <?php echo esc_js( $items['desktop'] ); ?>
			            	},
			            	768: {
			            		items: <?php echo esc_js( $items['desktop_small'] ); ?>
			            	},
			            	479: {
			            		items: <?php echo esc_js( $items['tablet'] ); ?>
			            	},
			            	0: {
			            		items: <?php echo esc_js( $items['mobile'] ); ?>
			            	}
			            },
			            autoplay: <?php echo ($autoplay == 'yes') ? 'true' : 'false'; ?>,
			            autoplayTimeout: <?php echo $speed; ?>,
			            dots: <?php echo ($hide_pagination_control == 'yes') ? 'false' : 'true'; ?>,
			            nav: <?php echo ($hide_prev_next_buttons == 'yes') ? 'false' : 'true'; ?>,
			            autoheight: <?php echo ($autoheight == 'yes') ? 'false' : 'true'; ?>,
			            slideBy:  <?php echo ($scroll_per_page == 'yes') ? '\'page\'' : 1; ?>,
			            navText:false,
			            loop: <?php echo ($wrap == 'yes') ? 'true' : 'false'; ?>,
			            onRefreshed: function() {
			            	$(window).resize();
			            }
					};

	                owl.owlCarousel(options);
					
					$(document).on( 'click', '.owl-nav > div, .owl-dots > div', function(){
						var owl_id = $(this).parent().parent().parent().attr('id');
						$('#' + owl_id + ' .owl-carousel').trigger( 'stop.owl.autoplay' );
					} );

				});
			</script>

			<?php
		};

		if( $carousel_js_inline == 'yes' ) {
			$func_name();
		} else {
			add_action( 'basel_after_footer', $func_name );
		}
	}

December 29, 2017 at 2:42 pm #30916

esthetis

Participant

same as before

December 29, 2017 at 2:44 pm #30917

Artem Temos

Keymaster

We just checked your website and it works correctly for us. When we click on some of your carousels it stops playing but another one continues.

December 29, 2017 at 2:51 pm #30923

esthetis

Participant

don’t know what you see… there is 3 navigator points under testimonials, if you click one the first time it stops but by swithing to another this other doesn’t stop anymore

December 29, 2017 at 2:53 pm #30925

Artem Temos

Keymaster

Sorry, but we still don’t understand your algorithm. Could you please describe your actions step by steps with screenshots so we can reproduce it?

December 29, 2017 at 3:04 pm #30928

esthetis

Participant

attached video private

December 29, 2017 at 3:20 pm #30932

Artem Temos

Keymaster

Thank you for the video. Now we see that there is some bug in this option in OWL Carousel JS library. It happens on their demo as well https://owlcarousel2.github.io/OwlCarousel2/demos/autoplay.html
We can suggest you to use their “Stop on hover” option. You can enable it with the following code snippet

function basel_owl_carousel_init( $atts = array() ) {
        extract( shortcode_atts( basel_get_owl_atts(), $atts ) );

        $func_name = 'carousel_' . $carousel_id;
        $func_name = function() use( $carousel_id, $slides_per_view, $autoplay, $autoheight, $speed, $hide_pagination_control, $hide_prev_next_buttons, $scroll_per_page, $wrap ) {
            
            $items = array();
            $items['desktop'] = ($slides_per_view > 0) ? $slides_per_view : 1;
            $items['desktop_small'] = ($items['desktop'] > 1) ? $items['desktop'] - 1 : 1;
            $items['tablet'] = ($items['desktop_small'] > 1) ? $items['desktop_small'] : 1;
            $items['mobile'] = ($items['tablet'] > 2) ? $items['tablet'] - 2 : 1;

            if($items['mobile'] > 2) {
                $items['mobile'] = 2;
            }

            ?>

            <script type="text/javascript">
                jQuery( document ).ready(function( $ ) {

                    var owl = $("#<?php echo esc_js( $carousel_id ); ?> .owl-carousel");

                    $( window ).bind( "vc_js", function() {
                        owl.trigger('refresh.owl.carousel');
                    } );

                    var options = {
                        rtl: $('body').hasClass('rtl'),
                        items: <?php echo esc_js( $items['desktop'] ); ?>, 
                        responsive: {
                            979: {
                                items: <?php echo esc_js( $items['desktop'] ); ?>
                            },
                            768: {
                                items: <?php echo esc_js( $items['desktop_small'] ); ?>
                            },
                            479: {
                                items: <?php echo esc_js( $items['tablet'] ); ?>
                            },
                            0: {
                                items: <?php echo esc_js( $items['mobile'] ); ?>
                            }
                        },
                        autoplay: <?php echo ($autoplay == 'yes') ? 'true' : 'false'; ?>,
                        autoplayTimeout: <?php echo $speed; ?>,
                        autoplayHoverPause: true,
                        dots: <?php echo ($hide_pagination_control == 'yes') ? 'false' : 'true'; ?>,
                        nav: <?php echo ($hide_prev_next_buttons == 'yes') ? 'false' : 'true'; ?>,
                        autoheight: <?php echo ($autoheight == 'yes') ? 'false' : 'true'; ?>,
                        slideBy:  <?php echo ($scroll_per_page == 'yes') ? '\'page\'' : 1; ?>,
                        navText:false,
                        loop: <?php echo ($wrap == 'yes') ? 'true' : 'false'; ?>,
                        onRefreshed: function() {
                            $(window).resize();
                        }
                    };

                    owl.owlCarousel(options);

                });
            </script>

            <?php
        };

        if( $carousel_js_inline == 'yes' ) {
            $func_name();
        } else {
            add_action( 'basel_after_footer', $func_name );
        }
    }

Author

Posts

Viewing 17 posts - 31 through 47 (of 47 total)

← 1 2

Xtemos image gallery

Create your WordPress website.

Sign in