Oxygen Slider Overflow

mail@pastecode.io avatar
unknown
json
a year ago
12 kB
7
Indexable
Never
{
  "component": {
    "id": 198,
    "name": "ct_section",
    "options": {
      "ct_id": 198,
      "ct_parent": 0,
      "selector": "section-198-7",
      "original": {
        "overflow": "hidden"
      },
      "nicename": "Section (#198)"
    },
    "depth": 1,
    "children": [
      {
        "id": 199,
        "name": "ct_div_block",
        "options": {
          "ct_id": 199,
          "ct_parent": 198,
          "selector": "div_block-199-7",
          "classes": [
            "oxel_dynamicslider"
          ],
          "nicename": "Dynamic Slider",
          "activeselector": "oxel_dynamicslider"
        },
        "children": [
          {
            "id": 200,
            "name": "ct_code_block",
            "options": {
              "ct_id": 200,
              "ct_parent": 199,
              "selector": "code_block-200-7",
              "original": {
                "code-php": "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css\" />\n\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js\"></script>\n\n<!-- Instructions\n\nThe Dynamic Slider is a Repeater wrapped in a swiper.js container.\n\nTo edit the query for the slider, find Dynamic Slider > Slider Container > Repeater in the\nStructure Pane. You can then manipulate the Repeater via the Properties Pane.\n\nYou can add or remove dynamic data elements to the Repeater Div to change the leyout. Note that you'll\nonly see the first item in the builder preview, but on the front end all items matching the Repeater\nquery will be returned as slides.\n\n-->",
                "code-css": "/* Left and right arrow color. */\n.oxel_dynamicslider__container .swiper-button-prev,\n.oxel_dynamicslider__container .swiper-button-next {\n \tcolor: #f9f9fa;\n}\n\n/* Left and right arrow size. */\n.oxel_dynamicslider__container .swiper-button-prev:after,\n.oxel_dynamicslider__container .swiper-button-next:after {\n \tfont-size: 32px; \n}\n\n/* Active navigation bullet color. */\n.oxel_dynamicslider__container .swiper-pagination-bullet-active {\n \tbackground-color: black; \n}\n\n/* That's it, stop editing. */\n\n.swiper-container {\n    width: 100%;\n\toverflow: visible;\n}\n.swiper-slide {\n    /* Center slide text vertically */\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: -webkit-flex;\n    display: flex;\n    -webkit-box-pack: center;\n    -ms-flex-pack: center;\n    -webkit-justify-content: center;\n    justify-content: center;\n    -webkit-box-align: center;\n    -ms-flex-align: center;\n\t-webkit-align-items: center;\n\talign-items: center;\n}\n",
                "code-js": "//** Oxygen Composite Elements Settings Section **//\n//** Edit the variables below to change the behavior of the element. **//\n\nvar delay = 4000; // Change this to change the auto-play speed of the slider.\nvar transition = 'slide'; // Tranisition effect. Could be \"slide\", \"cube\", \"coverflow\" or \"flip\"\n\n/** That's it, stop editing. **/\n\njQuery(document).ready( function() {\n  \n  \n if( typeof Swiper == 'undefined' ) { return; }\n  \n var swiper = new Swiper('.swiper-container', {\n\n   \t  navigation: {\n    \tnextEl: '.slider-nav-btn--next',\n    \tprevEl: '.slider-nav-btn--prev',\n  \t  },\n   \t  autoplay: {\n        delay: delay,\n        disableOnInteraction: true,\n      },\n\t  // Default parameters\n\t  slidesPerView: 1,\n\t  spaceBetween: 10,\n\t\tcenteredSlides: false,\n\t  breakpoints: {\n\t\t320: {\n\t\t  slidesPerView: 1,\n\t\t  spaceBetween: 20\n\t\t},\n\t\t480: {\n\t\t  slidesPerView: 2,\n\t\t  spaceBetween: 30\n\t\t},\n\t\t640: {\n\t\t  slidesPerView: 3,\n\t\t  spaceBetween: 40\n\t\t}\n\t  },\n   \t  noSwiping: false,\n\t loop: false,\n\n    });\n    \n});"
              },
              "nicename": "Dynamic Slider Code",
              "activeselector": false,
              "ct_content": ""
            },
            "depth": 3
          },
          {
            "id": 201,
            "name": "ct_div_block",
            "options": {
              "ct_id": 201,
              "ct_parent": 199,
              "selector": "div_block-201-7",
              "nicename": "Slider Container",
              "classes": [
                "swiper-container",
                "oxel_dynamicslider__container"
              ],
              "activeselector": false,
              "original": {
                "margin-bottom": "20"
              }
            },
            "children": [
              {
                "id": 202,
                "name": "oxy_dynamic_list",
                "options": {
                  "ct_id": 202,
                  "ct_parent": 201,
                  "selector": "_dynamic_list-202-7",
                  "original": {
                    "query_post_types": [
                      "page"
                    ],
                    "wp_query": "custom",
                    "paginate_size": "0",
                    "listrendertype": "1"
                  },
                  "classes": [
                    "swiper-wrapper"
                  ],
                  "nicename": "Repeater"
                },
                "children": [
                  {
                    "id": 203,
                    "name": "ct_div_block",
                    "options": {
                      "ct_id": 203,
                      "ct_parent": 202,
                      "selector": "div_block-203-7",
                      "original": {
                        "background-image": "[oxygen ct_sign_sha256='53fdefedc66c5a415bcb79eda0e8489a4d1485bde5dbd92693a88abcba297994' data='featured_image' ]",
                        "background-imagedynamic": true,
                        "background-size": "cover",
                        "background-position-left-unit": "%",
                        "background-position-left": "50",
                        "background-position-top-unit": "%",
                        "background-position-top": "50",
                        "overlay-color": "rgba(55,64,71,0.3)"
                      },
                      "classes": [
                        "swiper-slide"
                      ],
                      "activeselector": false,
                      "nicename": "Slide"
                    },
                    "children": [
                      {
                        "id": 204,
                        "name": "ct_headline",
                        "options": {
                          "ct_id": 204,
                          "ct_parent": 203,
                          "selector": "headline-204-7",
                          "original": {
                            "margin-bottom": "32",
                            "color": "#ffffff"
                          },
                          "ct_content": "<span id=\"ct-placeholder-205\"></span>",
                          "nicename": "Heading (#193)"
                        },
                        "children": [
                          {
                            "id": 205,
                            "name": "ct_span",
                            "options": {
                              "ct_id": 205,
                              "ct_parent": 204,
                              "selector": "span-205-7",
                              "ct_content": "[oxygen ct_sign_sha256='4336c1febc82beb25234455268b636b822fc8e1ff38f99e9519f4342bd421081' data='title' ]",
                              "nicename": "Span (#194)"
                            },
                            "depth": 7
                          }
                        ],
                        "depth": 6
                      },
                      {
                        "id": 206,
                        "name": "ct_link_button",
                        "options": {
                          "ct_id": 206,
                          "ct_parent": 203,
                          "selector": "link_button-206-7",
                          "original": {
                            "button-color": "#374047",
                            "button-text-color": "#ffffff",
                            "url": "[oxygen ct_sign_sha256='60ba418163dce4dbbc83dff638bdb1b85ff18795f4349d2662077da19ecd0a0d' data='permalink' ]",
                            "url_encoded": "true"
                          },
                          "ct_content": "Read More",
                          "nicename": "Button (#195)"
                        },
                        "depth": 6
                      }
                    ],
                    "depth": 5
                  }
                ],
                "depth": 4
              }
            ],
            "depth": 3
          },
          {
            "id": 209,
            "name": "ct_div_block",
            "options": {
              "ct_id": 209,
              "ct_parent": 199,
              "selector": "div_block-209-7",
              "original": {
                "text-align": "left",
                "flex-direction": "row",
                "display": "flex",
                "gap": "8"
              },
              "nicename": "Div (#209)"
            },
            "depth": 3,
            "children": [
              {
                "id": 207,
                "name": "ct_fancy_icon",
                "options": {
                  "ct_id": 207,
                  "ct_parent": 209,
                  "selector": "fancy_icon-207-7",
                  "original": {
                    "icon-id": "FontAwesomeicon-chevron-left",
                    "border-radius": "0"
                  },
                  "nicename": "Icon (#207)",
                  "classes": [
                    "slider-nav-btn",
                    "slider-nav-btn--prev"
                  ],
                  "activeselector": "slider-nav-btn--prev"
                },
                "depth": 4
              },
              {
                "id": 208,
                "name": "ct_fancy_icon",
                "options": {
                  "ct_id": 208,
                  "ct_parent": 209,
                  "selector": "fancy_icon-208-7",
                  "original": {
                    "icon-id": "FontAwesomeicon-chevron-right",
                    "border-radius": "0"
                  },
                  "nicename": "Icon (#208)",
                  "classes": [
                    "slider-nav-btn",
                    "slider-nav-btn--next"
                  ],
                  "activeselector": "slider-nav-btn--next"
                },
                "depth": 4
              }
            ]
          }
        ],
        "depth": 2
      }
    ]
  },
  "classes": {
    "oxel_dynamicslider": {
      "key": "oxel_dynamicslider",
      "parent": "composite-elements",
      "original": {
        "width-unit": "%",
        "width": "100"
      }
    },
    "swiper-container": {
      "key": "swiper-container",
      "parent": "composite-elements",
      "original": {
        "selector-locked": "true"
      }
    },
    "oxel_dynamicslider__container": {
      "key": "oxel_dynamicslider__container",
      "parent": "composite-elements",
      "original": {
        "height": "400"
      }
    },
    "swiper-wrapper": {
      "key": "swiper-wrapper",
      "parent": "composite-elements",
      "original": {}
    },
    "swiper-slide": {
      "key": "swiper-slide",
      "parent": "composite-elements",
      "original": {
        "selector-locked": "true"
      }
    },
    "slider-nav-btn": {
      "original": {
        "icon-color": "#474747",
        "icon-background-color": "#f4f4f4",
        "icon-size": "24",
        "padding-top": "16",
        "padding-right": "16",
        "padding-bottom": "16",
        "padding-left": "16",
        "background-color": "#e5e5e5",
        "border-radius": "0"
      },
      "key": "slider-nav-btn"
    },
    "slider-nav-btn--prev": {
      "original": {},
      "key": "slider-nav-btn--prev"
    },
    "slider-nav-btn--next": {
      "original": {},
      "key": "slider-nav-btn--next"
    }
  }
}