Oxygen Slider Overflow
unknown
json
2 years ago
12 kB
15
Indexable
{
"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"
}
}
}Editor is loading...