Untitled

mail@pastecode.io avatar
unknown
plain_text
7 months ago
18 kB
1
Indexable
Never
<div id="pills-menu-CPjueVF" style="width: 100%; display: block;"><style>
#pills-menu-CPjueVF li a{
    color: #ffffff;
    background-color: #2e5586;
}

#pills-menu-CPjueVF li a:hover{
    color: #ffffff;
    background-color: #2e5586;
}

#pills-menu-CPjueVF li.active a {
    color: #fff;
    background-color: #2e5586;
}

#pills-menu-CPjueVF .slick-prev,
#pills-menu-CPjueVF .slick-next{
    background:none!important;
 }


#pills-menu-CPjueVF .slick-prev:before {
  content: "<";
  color:  #ffffff;
  font-size: 30px;
}

#pills-menu-CPjueVF .slick-next:before {
  content: ">";
  color:  #ffffff;
  font-size: 30px;
}

</style><div class="row">
    <div class="col-md-12">
        <ul class="hidden-xs nav nav-pills navbar-center">
                            <li class="">
                    <a href="#" class="is-btn is-pills-btn" data-target=".DELWSid">
                        A
                    </a>
                </li>
                            <li class="">
                    <a href="#" class="is-btn is-pills-btn" data-target=".bfgrjgP">
                        B
                    </a>
                </li>
                            <li class="">
                    <a href="#" class="is-btn is-pills-btn" data-target=".NJKgSNO">
                        C
                    </a>
                </li>
                            <li class="active">
                    <a href="#" class="is-btn is-pills-btn" data-target=".BZ3xbLX">
                        D
                    </a>
                </li>
                            <li>
                    <a href="#" class="is-btn is-pills-btn" data-target=".AoamrAd">
                        E
                    </a>
                </li>
                            <li>
                    <a href="#" class="is-btn is-pills-btn" data-target=".haNqnit">
                        F
                    </a>
                </li>
                            <li>
                    <a href="#" class="is-btn is-pills-btn" data-target=".lRUkzKZ">
                        G
                    </a>
                </li>
                            <li>
                    <a href="#" class="is-btn is-pills-btn" data-target=".QQYwCxb">
                        I
                    </a>
                </li>
                            <li>
                    <a href="#" class="is-btn is-pills-btn" data-target=".lTksjZK">
                        J
                    </a>
                </li>
                            <li>
                    <a href="#" class="is-btn is-pills-btn" data-target=".TSFSjZ8">
                        K
                    </a>
                </li>
                            <li>
                    <a href="#" class="is-btn is-pills-btn" data-target=".RwnJh0Z">
                        L
                    </a>
                </li>
                            <li>
                    <a href="#" class="is-btn is-pills-btn" data-target=".yve4f7I">
                        M
                    </a>
                </li>
                            <li>
                    <a href="#" class="is-btn is-pills-btn" data-target=".MGSOozd">
                        P
                    </a>
                </li>
                            <li>
                    <a href="#" class="is-btn is-pills-btn" data-target=".tU1PDD9">
                        Q
                    </a>
                </li>
                            <li>
                    <a href="#" class="is-btn is-pills-btn" data-target=".rqnqzUW">
                        R
                    </a>
                </li>
                            <li>
                    <a href="#" class="is-btn is-pills-btn" data-target=".RD1QVzQ">
                        S
                    </a>
                </li>
                            <li>
                    <a href="#" class="is-btn is-pills-btn" data-target=".tqvhl3F">
                        T
                    </a>
                </li>
                            <li>
                    <a href="#" class="is-btn is-pills-btn" data-target=".SnRNPNn">
                        W
                    </a>
                </li>
                    </ul>
        <ul class="owl-carousel visible-xs nav nav-pills navbar-center slick-initialized slick-slider" style="">
                            <div class="slick-list draggable" style="padding: 0px 50px;"><div class="slick-track" style="opacity: 1; width: 90000px; transform: translate3d(-50px, 0px, 0px);"><li class="slick-slide slick-cloned" data-slick-index="-2" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".tqvhl3F" tabindex="-1">
                        T
                    </a>
                </li><li class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".SnRNPNn" tabindex="-1">
                        W
                    </a>
                </li><li class="slick-slide slick-current slick-active slick-center" data-slick-index="0" aria-hidden="false" tabindex="0">
                    <a href="#" class="is-btn is-pills-btn" data-target=".DELWSid" tabindex="0">
                        A
                    </a>
                </li><li class="slick-slide" data-slick-index="1" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".bfgrjgP" tabindex="-1">
                        B
                    </a>
                </li><li class="slick-slide" data-slick-index="2" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".NJKgSNO" tabindex="-1">
                        C
                    </a>
                </li><li class="slick-slide active" data-slick-index="3" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".BZ3xbLX" tabindex="-1">
                        D
                    </a>
                </li><li class="slick-slide" data-slick-index="4" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".AoamrAd" tabindex="-1">
                        E
                    </a>
                </li><li class="slick-slide" data-slick-index="5" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".haNqnit" tabindex="-1">
                        F
                    </a>
                </li><li class="slick-slide" data-slick-index="6" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".lRUkzKZ" tabindex="-1">
                        G
                    </a>
                </li><li class="slick-slide" data-slick-index="7" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".QQYwCxb" tabindex="-1">
                        I
                    </a>
                </li><li class="slick-slide" data-slick-index="8" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".lTksjZK" tabindex="-1">
                        J
                    </a>
                </li><li class="slick-slide" data-slick-index="9" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".TSFSjZ8" tabindex="-1">
                        K
                    </a>
                </li><li class="slick-slide" data-slick-index="10" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".RwnJh0Z" tabindex="-1">
                        L
                    </a>
                </li><li class="slick-slide" data-slick-index="11" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".yve4f7I" tabindex="-1">
                        M
                    </a>
                </li><li class="slick-slide" data-slick-index="12" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".MGSOozd" tabindex="-1">
                        P
                    </a>
                </li><li class="slick-slide" data-slick-index="13" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".tU1PDD9" tabindex="-1">
                        Q
                    </a>
                </li><li class="slick-slide" data-slick-index="14" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".rqnqzUW" tabindex="-1">
                        R
                    </a>
                </li><li class="slick-slide" data-slick-index="15" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".RD1QVzQ" tabindex="-1">
                        S
                    </a>
                </li><li class="slick-slide" data-slick-index="16" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".tqvhl3F" tabindex="-1">
                        T
                    </a>
                </li><li class="slick-slide" data-slick-index="17" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".SnRNPNn" tabindex="-1">
                        W
                    </a>
                </li><li class="slick-slide slick-cloned" data-slick-index="18" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".DELWSid" tabindex="-1">
                        A
                    </a>
                </li><li class="slick-slide slick-cloned" data-slick-index="19" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".bfgrjgP" tabindex="-1">
                        B
                    </a>
                </li><li class="slick-slide slick-cloned" data-slick-index="20" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".NJKgSNO" tabindex="-1">
                        C
                    </a>
                </li><li class="slick-slide slick-cloned active" data-slick-index="21" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".BZ3xbLX" tabindex="-1">
                        D
                    </a>
                </li><li class="slick-slide slick-cloned" data-slick-index="22" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".AoamrAd" tabindex="-1">
                        E
                    </a>
                </li><li class="slick-slide slick-cloned" data-slick-index="23" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".haNqnit" tabindex="-1">
                        F
                    </a>
                </li><li class="slick-slide slick-cloned" data-slick-index="24" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".lRUkzKZ" tabindex="-1">
                        G
                    </a>
                </li><li class="slick-slide slick-cloned" data-slick-index="25" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".QQYwCxb" tabindex="-1">
                        I
                    </a>
                </li><li class="slick-slide slick-cloned" data-slick-index="26" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".lTksjZK" tabindex="-1">
                        J
                    </a>
                </li><li class="slick-slide slick-cloned" data-slick-index="27" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".TSFSjZ8" tabindex="-1">
                        K
                    </a>
                </li><li class="slick-slide slick-cloned" data-slick-index="28" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".RwnJh0Z" tabindex="-1">
                        L
                    </a>
                </li><li class="slick-slide slick-cloned" data-slick-index="29" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".yve4f7I" tabindex="-1">
                        M
                    </a>
                </li><li class="slick-slide slick-cloned" data-slick-index="30" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".MGSOozd" tabindex="-1">
                        P
                    </a>
                </li><li class="slick-slide slick-cloned" data-slick-index="31" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".tU1PDD9" tabindex="-1">
                        Q
                    </a>
                </li><li class="slick-slide slick-cloned" data-slick-index="32" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".rqnqzUW" tabindex="-1">
                        R
                    </a>
                </li><li class="slick-slide slick-cloned" data-slick-index="33" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".RD1QVzQ" tabindex="-1">
                        S
                    </a>
                </li><li class="slick-slide slick-cloned slick-center" data-slick-index="34" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".tqvhl3F" tabindex="-1">
                        T
                    </a>
                </li><li class="slick-slide slick-cloned" data-slick-index="35" aria-hidden="true" tabindex="-1">
                    <a href="#" class="is-btn is-pills-btn" data-target=".SnRNPNn" tabindex="-1">
                        W
                    </a>
                </li></div></div>
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                    </ul>
    </div>
</div>

<script>
    $(function () {

        var pillSettings = {"theme":{"text_color":"#ffffff","background_color":"#2e5586","text_color_hover":"#ffffff","background_color_hover":"#2e5586","text_color_active":"#fff","background_color_active":"#2e5586"},"items":[{"id":"DELWSid","name":"A","active":true},{"id":"bfgrjgP","name":"B","active":false},{"id":"NJKgSNO","name":"C","active":false},{"id":"BZ3xbLX","name":"D","active":false},{"id":"AoamrAd","name":"E","active":false},{"id":"haNqnit","name":"F","active":false},{"id":"lRUkzKZ","name":"G","active":false},{"id":"QQYwCxb","name":"I","active":false},{"id":"lTksjZK","name":"J","active":false},{"id":"TSFSjZ8","name":"K","active":false},{"id":"RwnJh0Z","name":"L","active":false},{"id":"yve4f7I","name":"M","active":false},{"id":"MGSOozd","name":"P","active":false},{"id":"tU1PDD9","name":"Q","active":false},{"id":"rqnqzUW","name":"R","active":false},{"id":"RD1QVzQ","name":"S","active":false},{"id":"tqvhl3F","name":"T","active":false},{"id":"SnRNPNn","name":"W","active":false}],"environment":{"moduleId":"pills-menu-CPjueVF","origin":"https:\/\/caraviabeach.workadu.com","alias":"caraviabeach","language":"en_GB","locale":"en_GB","builderMode":0,"pageId":"1010"}};
        var $pillsMenu = $('#pills-menu-CPjueVF')
        var $menuContainer = $pillsMenu.closest('.is-container');
        var $section = $menuContainer.closest('.is-section');

        if($section.find('.tab-content').length === 0){
            var $tabContent = $('<div class="tab-content"></div>');
            pillSettings.items.forEach(item => {
                $tabContent.append(`
                    <div data-id="${item.id}" class="is-container container-fluid is-content-800 tab-pane ${item.id} ${item.active ? 'active' : ''}"></div>
                `)
            });
            $menuContainer.after($tabContent);
            if(pillSettings.environment.builderMode){
                window._fb.util.checkEmpty();
            }
        }


        $(document).on('click touchend','#pills-menu-CPjueVF .is-pills-btn',function(e){
            e.preventDefault();
            var $tabContent = $section.find('.tab-content');

            $pillsMenu.find('li').removeClass('active');
            $pillsMenu.find(`[data-target="${$(this).data('target')}"]`).each(function(){
                $(this).parent().addClass('active');
            });

            $tabContent.find('.is-container').removeClass('active');
            var $container = $tabContent.find($(this).data('target'));
            $container.addClass('active');

            $tabContent.find('.slick-slider').slick('refresh');

        });


        var $link = null
        var activeItem = pillSettings.items.find(x => x.active == true);
        if(!activeItem) activeItem = pillSettings.items[0];
        if(activeItem){
            $link = $pillsMenu.find(`.owl-carousel [data-target=".${activeItem.id}"]`);
            $link[0].click();
        }

        $pillsMenu.find(".owl-carousel").slick({
              infinite: true,
              variableWidth: true,
              centerMode: true,
              slidesToScroll: 1,
              arrows: false,
              focusOnSelect: true,
              draggable: true,
              initialSlide: $link ? $($link).parent().index() : 0
        });

    });
</script>
</div>