Vodi - Hero slider buy ticket button

index.php

function vodi_movies_slider( $args = array() ) {
        if( vodi_is_masvideos_activated() ) {

            $defaults = apply_filters( 'vodi_movies_slider_default_args', array(
                'gallery_title'         => '',
                'el_class'              => '',
                'style'                 => 'style-v1',
                'design_options'        => array(),
                'sliders'               => array(),
                'carousel_single_args'  => array(
                    'infinite'          => false,
                    'slidesToShow'      => 1,
                    'slidesToScroll'    => 1,
                    'arrows'            => false,
                ),
                'carousel_gallery_args' => array(
                    'infinite'          => false,
                    'slidesToShow'      => 3,
                    'slidesToScroll'    => 1,
                    'arrows'            => true,
                    'dots'              => false,
                    'focusOnSelect'     => true,
                    'touchMove'         => true,
                ),
            ) );

            $args = wp_parse_args( $args, $defaults );
            if( is_rtl() ) {
                $args ['carousel_single_args']['rtl'] = true;
                $args ['carousel_gallery_args']['rtl'] = true;
            }
            extract( $args );

            if ( ! empty ( $sliders ) ) {

                $section_id = 'movies-sliders-' . uniqid();
                $carousel_single_args['asNavFor'] = '#' . $section_id . ' .movies-sliders-gallery-images__inner';
                $carousel_gallery_args['asNavFor'] = '#' . $section_id . ' .movies-sliders-single-content__inner';

                $section_class = 'movies-sliders';
                if ( ! empty ( $el_class ) ) {
                    $section_class .= ' ' . $el_class;
                }

                if ( ! empty ( $style ) ) {
                    $section_class .= ' ' . $style;
                    if( $style == 'style-v1' ) {
                        $carousel_gallery_args['rows'] = 3;
                        $carousel_gallery_args['slidesPerRow'] = 3;
                        $carousel_gallery_args['slidesToShow'] = 1;
                        $carousel_gallery_args['slidesToScroll'] = 1;
                        $carousel_gallery_args ['responsive'] = array( 
                            array(
                                'breakpoint'    => 767,
                                'settings'      => array(
                                    'rows'              => 1,
                                    'slidesPerRow'      => 1,
                                    'slidesToShow'      => 2,
                                ),
                            ),
                            array(
                                'breakpoint'    => 992,
                                'settings'      => array(
                                    'rows'              => 1,
                                    'slidesPerRow'      => 1,
                                    'slidesToShow'      => 3,
                                    'slidesToScroll'    => 3,
                                )
                            ),
                            array(
                                'breakpoint'    => 1200,
                                'settings'      => array(
                                    'rows'              => 1,
                                    'slidesPerRow'      => 1,
                                    'slidesToShow'      => 4,
                                    'slidesToScroll'    => 4,
                                )
                            )
                        );
                        $custom_script = "
                            jQuery(document).ready( function($){
                                var single = $( '#" . esc_attr( $section_id ) . " .movies-sliders-single-content__inner' );
                                var gallery = $( '#" . esc_attr( $section_id ) . " .movies-sliders-gallery-images__inner' );
                                var killit = false;

                                $('.movie-slide-gallery-image > img').on('click', function(e){
                                    if( !killit ) {
                                        e.stopPropagation();
                                        var idx = $(this).closest('.movie-slide-gallery-image').data('thumb');
                                        single.slick( 'slickGoTo', idx );
                                    }
                                });

                                // need to register a flag that doesn't let us click the slider
                                // as we are trying to swipe it.

                                gallery
                                    .on('beforeChange', function() {
                                        killit = true;
                                    }).on('afterChange', function() {
                                        killit = false;
                                    });
                            } );
                        ";
                        wp_add_inline_script( 'vodi-slick', $custom_script );
                    }

                    if( $style == 'style-v2' ) {
                        $carousel_gallery_args['slidesToShow'] = 6;
                        $carousel_gallery_args ['responsive'] = array( 
                            array(
                                'breakpoint'    => 767,
                                'settings'      => array(
                                    'slidesToShow'      => 3,
                                ),
                            )
                        );
                    }
                }

                $style_attr = '';
                if ( ! empty( $design_options ) && is_array( $design_options ) ) {
                    foreach ( $design_options as $key => $design_option ) {
                        if ( !empty ( $design_option ) ) {
                            $style_attr .= str_replace ( '_', '-', $key ) . ': ' . $design_option . 'px; ';
                        }
                    }
                }

                ?><div id="<?php echo esc_attr( $section_id ); ?>" class="<?php echo esc_attr( $section_class ); ?>" <?php echo ! empty ( $style_attr ) ? ' style="' . esc_attr( $style_attr ) . '"' : ''; ?>>
                    <div class="movies-sliders-single-content" data-ride="vodi-slick-carousel" data-wrap=".movies-sliders-single-content__inner" data-slick="<?php echo htmlspecialchars( json_encode( $carousel_single_args ), ENT_QUOTES, 'UTF-8' ); ?>">
                        <div class="movies-sliders-single-content__inner">
                            <?php
                                foreach ( $sliders as $slider ) {
                                    extract( $slider );
                                    if( ! empty( $movie_id ) ) {
                                        $original_post = $GLOBALS['post'];
                                        $GLOBALS['post'] = get_post( $movie_id );
                                        $GLOBALS['movie'] = masvideos_get_movie( $GLOBALS['post'] );

                                        $ticket_button_text =  get_post_meta( $GLOBALS['movie']->get_ID(), '_vodi_movie_buy_ticket_text', true );
                                        $ticket_button_link = get_post_meta( $GLOBALS['movie']->get_ID(), '_vodi_movie_buy_ticket_link', true );

                                        if( $GLOBALS['movie'] ) {
                                            $style_attr = '';

                                            if( ! empty( $bg_image ) && ! is_array( $bg_image ) ) {
                                                $bg_image = wp_get_attachment_image_src( $bg_image, 'full' );
                                            }

                                            if ( ! empty( $bg_image ) && is_array( $bg_image ) ) {
                                                $style_attr .=  ' background-size: cover; background-image: url( ' . esc_url( $bg_image[0] ) . ' ); height: ' . esc_attr( $bg_image[2] ) . 'px;';
                                            }

                                            ?><div class="movie-slide" <?php echo !empty ( $style_attr ) ? ' style="' . esc_attr( $style_attr ) . '"' : ''; ?>>
                                                <div class="container">
                                                    <div class="single-featured-movie">
                                                        <div class="single-featured-movie__inner">
                                                            <?php
                                                            masvideos_template_loop_movie_link_open();
                                                            masvideos_template_loop_movie_title();
                                                            masvideos_template_loop_movie_link_close();
                                                            add_action( 'masvideos_single_movie_meta', 'masvideos_template_single_movie_duration', 30 );
                                                            masvideos_template_single_movie_meta();
                                                            remove_action( 'masvideos_single_movie_meta', 'masvideos_template_single_movie_duration', 30 );
                                                            ?>
                                                            <div class="movie__actions-wrapper">
                                                                <?php
                                                                    masvideos_template_loop_movie_actions();
                                                                    if ( ! empty( $ticket_button_text ) && ! empty( $ticket_button_link ) ) : ?>
                                                                        <a href="<?php echo esc_url( $ticket_button_link ); ?>" class="movie-actions--get-tickets" tabindex="0" target="_blank">
                                                                            <?php echo esc_html( $ticket_button_text ); ?>
                                                                        </a><?php 
                                                                    endif;
                                                                ?>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div><?php
                                        }
                                        unset( $GLOBALS['movie'] );
                                        $GLOBALS['post'] = $original_post;
                                    }
                                }
                            ?>
                        </div>
                    </div>
                    <div class="movies-sliders-gallery-images-wrap">
                        <?php
                            if ( ! empty ( $gallery_title ) ) {
                                echo '<h4 class="gallery-title">' . esc_html( $gallery_title ) . '</h4>';
                            }
                        ?>
                        <div class="movies-sliders-gallery-images" data-ride="vodi-slick-carousel" data-wrap=".movies-sliders-gallery-images__inner" data-slick="<?php echo htmlspecialchars( json_encode( $carousel_gallery_args ), ENT_QUOTES, 'UTF-8' ); ?>">
                            <div class="movies-sliders-gallery-images__inner">
                                <?php
                                    if( is_rtl() ) {
                                        $sliders = array_reverse( $sliders );
                                    }
                                    foreach ( $sliders as $key => $slider ) {
                                        extract( $slider );
                                        if( ! empty( $movie_id ) ) {
                                            ?><figure class="movie-slide-gallery-image" data-thumb="<?php echo esc_attr( $key ); ?>">
                                                <?php if ( ! empty( $image ) ) {
                                                    echo wp_get_attachment_image( $image, 'full', '', array( 'class' => 'movsie-slide-gallery-image' ) );
                                                } ?>
                                            </figure><?php
                                        }
                                    }
                                ?>
                            </div>
                        </div>
                    </div>
                </div><?php
            }
        }
    }

style.css

.movie__actions-wrapper {
    display: flex;
    align-items: center;
}

.movie__actions-wrapper .movie-actions--get-tickets {
    color: #fff;
    background-color: #24baef;
    border-color: #24baef;
    padding: 18px;
    border-radius: 5px;
    display: inline-block;
    font-weight: 700;
    margin-left: 20px;
    outline: unset;
}

.movie__actions-wrapper .movie-actions--get-tickets:hover {
    background-color: #0f9ed1;
    border-color: #0f9ed1;
}