Create element flatsome using advanced custom fields as backend

                
                    
<?php
function men_vi_sinh_sc($atts, $content = null)
{
    extract($atts = shortcode_atts(array(
        'show_fly' => 'false',
        'class' => '',
        'visibility' => '',
    ), $atts));
    if($visibility == 'hidden') return;

    $classes = array();
    if ($class) {
        $classes[] = $class;
    }
    if ($visibility) {
        $classes[] = $visibility;
    }
    $classes = implode(' ', $classes);
    ob_start();
    ?>
    <div class="<?php echo $classes?>">
        <div class="row">
            <div class="col large-6 ">
                <div class="col-inner">
                    <div class="slider-wrapper relative" >
                        <div class="slider slider-nav-dots-simple slider-nav-simple slider-nav-large slider-nav-dark slider-style-normal"
                             data-flickity-options='{
            "cellAlign": "center",
            "imagesLoaded": true,
            "lazyLoad": 1,
            "freeScroll": false,
            "wrapAround": true,
            "autoPlay": 6000,
            "pauseAutoPlayOnHover" : true,
            "prevNextButtons": false,
            "contain" : true,
            "adaptiveHeight" : true,
            "dragThreshold" : 10,
            "percentPosition": true,
            "pageDots": true,
            "rightToLeft": false,
            "draggable": true,
            "selectedAttraction": 0.1,
            "parallax" : 0,
            "friction": 0.6        }'
                        >
                            <div class="row row-small align-equal">
                                <?php if (get_field('_all_content', 1141)): ?>
                                <?php $count1 = 1; ?>
                                <?php while (the_repeater_field('_all_content', 1141)): ?>
                                <?php if (($count1-1) > 0 && (($count1-1) % 4 == 0)): ?>
                            </div>
                            <div class="row row-small align-equal">
                                <?php endif; ?>
                                <div class="col large-6 medium-6 small-6 text-center">
                                    <div class="col-inner <?php if ($count1 == 1) echo "active" ?> men_vi_sinh_title"
                                         data-id="men_vi_sinh_<?php echo $count1 ?>">
                                        <img src="<?php echo get_sub_field('_img', 1141); ?>"/>
                                        <h5><?php echo get_sub_field('_title', 1141); ?></h5>
                                    </div>
                                </div>

                                <?php $count1++ ?>
                                <?php endwhile; ?>
                                <?php endif; ?>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col large-6">
                <div class="col-inner skin-shadow">
                    <?php if (get_field('_all_content', 1141)): ?>
                        <?php $count1 = 1; ?>
                        <?php while (the_repeater_field('_all_content', 1141)): ?>
                            <div class="<?php if ($count1 != 1) echo "hidden" ?> men_vi_sinh_content men_vi_sinh_<?php echo $count1 ?>">
                                <h5 class="men_vi_sinh_content__title"><?php echo get_sub_field('_title', 1141); ?></h5>
                                <div class="men_vi_sinh_content__content">
                                    <?php echo get_sub_field('_content', 1141); ?>
                                </div>
                            </div>
                            <?php $count1++ ?>
                        <?php endwhile; ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
    <?php
    $content = ob_get_clean();
//    ob_end_clean();
    return $content;
}

add_shortcode('men_vi_sinh', 'men_vi_sinh_sc');
                
            

                
                    
$primary-color: #F45F05;
$secondary-color: #05B8BA;
.men_vi_sinh_title{
  padding: 20px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  border-bottom: solid 3px $secondary-color;
  h5{
    margin-top: 20px;
    margin-bottom: 0;
  }
  &.active,&:hover{
    background-color: $primary-color;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    h5{
      color: #fff;
    }
  }
}
.men_vi_sinh_content{
  background: #fff;
}
.skin-shadow{
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.men_vi_sinh_content__content{
  padding: 30px;
}
.men_vi_sinh_content__title{
  margin-bottom: 0;
  text-align: center;
  background-color: $primary-color;
  padding: 10px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: solid 3px $secondary-color;
  color: #fff;
}
.home-ss-dieu-tri{
  .flickity-page-dots{
    bottom: -15px;
  }
}
.slider-nav-dots-simple .flickity-page-dots .dot{
  background-color:$primary-color;
}
.flickity-page-dots .dot{
  border-color: $primary-color;
}
                
            

                
                    
var changeThemeModule;
(function ($) {
    "use strict";
    changeThemeModule = (function () {
        return {
            init: function () {
                this.changeInit();
            },
            changeInit: function () {
                this.changeShowMenViSinh();
            }
        }
    }());
})(jQuery);
(function ($) {
    "use strict";
    changeThemeModule.changeShowMenViSinh = function () {
        $(".men_vi_sinh_title").click(function () {
            $(".men_vi_sinh_title").removeClass("active");
            $(this).addClass("active");
            $(".men_vi_sinh_content").addClass("hidden");
            $("."+$(this).data("id")).removeClass("hidden");
        })
    }
})(jQuery);
jQuery(document).ready(function () {
    changeThemeModule.init();
});
                
            

                
                    
<?php
add_ux_builder_shortcode('men_vi_sinh',array(
    'name' => __("Men Vi Sinh"),
    'options' => array(
        'advanced_options' => require( FS_THEME_SHORT_CODE_PATH . '/commons/advanced.php'),
    ),
));