{"id":21942,"date":"2024-06-20T08:56:11","date_gmt":"2024-06-19T23:56:11","guid":{"rendered":"http:\/\/localhost\/blog\/?page_id=21942"},"modified":"2024-09-24T11:35:22","modified_gmt":"2024-09-24T11:35:22","slug":"guide-en-slider","status":"publish","type":"post","link":"https:\/\/wordpress.pandassi.com\/hellopanda\/guide-en-slider\/","title":{"rendered":"Inserting a Slider"},"content":{"rendered":"\n<div class=\"wp-block-cover alignfull has-white-color has-text-color has-link-color wp-elements-661ba9b4d352689bad010961df22df0e\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-70 has-background-dim wp-block-cover__gradient-background has-background-gradient has-gradient-31-gradient-background\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1707\" class=\"wp-block-cover__image-background wp-image-16542\" alt=\"\" src=\"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-0.jpg\" data-object-fit=\"cover\" srcset=\"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-0.jpg 2560w, https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-0-300x200.jpg 300w, https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-0-1024x683.jpg 1024w, https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-0-768x512.jpg 768w, https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-0-1536x1024.jpg 1536w, https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-0-2048x1366.jpg 2048w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><div class=\"wp-block-cover__inner-container has-global-padding is-layout-constrained wp-block-cover-is-layout-constrained\">\n<div class=\"wp-block-group is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-1 wp-block-group-is-layout-flex\">\n<p class=\"has-text-align-center\">HELLOPANDA MANUAL<\/p>\n\n\n\n<p class=\"has-text-align-center has-huge-font-size\" style=\"margin-top:0;margin-bottom:0\"><strong>Slider \/ WP Swiper<\/strong><\/p>\n\n\n\n<div class=\"wp-block-outermost-icon-block\" style=\"padding-top:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10);\" ><div class=\"icon-container has-icon-color has-white-color\" style=\"color:#fffffd;width:36px;padding-top:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10)\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns-xlink=\"http:\/\/www.w3.org\/1999\/xlink\" viewBox=\"0 0 100 1\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\"><rect width=\"100\" height=\"1\" rx=\"0\" ry=\"0\" stroke-width=\"0\"><\/rect><\/svg><\/div><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-hellopanda-design-pattern\" style=\"padding-top:5em;padding-bottom:5em;padding-bottom:5em;padding-top:5em;\">\n<div class=\"wp-block-group hellopanda-pattern-20 has-global-padding is-layout-constrained wp-container-core-group-is-layout-2 wp-block-group-is-layout-constrained\">\n<div class=\"wp-swiper\"><div class=\"wp-swiper__wrapper\" style=\"color:#ff0000\"><div class=\"swiper-container swiper\" data-swiper=\"{&quot;data-slidesperview&quot;:&quot;1&quot;,&quot;data-navigation&quot;:true,&quot;data-pagination&quot;:true,&quot;data-autoplay&quot;:true,&quot;data-disableOnInteraction&quot;:true,&quot;data-pauseOnMouseEnter&quot;:false,&quot;data-delay&quot;:3000,&quot;data-speed&quot;:500,&quot;data-loop&quot;:true,&quot;data-effect&quot;:&quot;slide&quot;,&quot;data-direction&quot;:&quot;horizontal&quot;,&quot;data-freemode&quot;:false,&quot;data-autoheight&quot;:false,&quot;data-spacebetween&quot;:0,&quot;data-mousewheel&quot;:false,&quot;data-releaseonedges&quot;:false,&quot;data-paginationtype&quot;:&quot;bullets&quot;}\" data-slidesperview=\"1\" data-navigation=\"true\" data-pagination=\"true\" data-autoplay=\"true\" data-disableoninteraction=\"true\" data-pauseonmouseenter=\"false\" data-delay=\"3000\" data-speed=\"500\" data-loop=\"true\" data-effect=\"slide\" data-direction=\"horizontal\" data-freemode=\"false\" data-autoheight=\"false\" data-spacebetween=\"0\" data-mousewheel=\"false\" data-releaseonedges=\"false\" data-paginationtype=\"bullets\"><div class=\"swiper-wrapper\">\n<div data-tab=\"slide-1\" class=\"wp-swiper__slide swiper-slide\"><div class=\"wp-swiper__overlay-color\" style=\"background-color:rgba(0, 0, 0, 0)\"><\/div><div class=\"wp-swiper__slide-content\" style=\"max-width:100%\">\n<div class=\"wp-block-cover is-light has-custom-content-position is-position-bottom-center wp-duotone-unset-1\" style=\"padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50);min-height:250px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\" style=\"background-color:#6e8a94\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" class=\"wp-block-cover__image-background wp-image-8609\" alt=\"\" src=\"\/hellopanda\/wp-content\/plugins\/hellopanda-theme-expand\/assets\/image\/library\/121.webp\" data-object-fit=\"cover\"\/><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-left has-white-color has-text-color has-link-color has-x-large-font-size wp-elements-b4eaa48b8a7ae2ac5852edd8b920d5e1\">Techniques<\/p>\n\n\n\n<div class=\"wp-block-outermost-icon-block\" style=\"padding-top:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10);\" ><div class=\"icon-container has-icon-color has-white-color\" style=\"color:#fffffd;width:36px;padding-top:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10)\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns-xlink=\"http:\/\/www.w3.org\/1999\/xlink\" viewBox=\"0 0 100 1\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\"><rect width=\"100\" height=\"1\" rx=\"0\" ry=\"0\" stroke-width=\"0\"><\/rect><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-text-color has-link-color has-small-font-size wp-elements-37f9dd8ac74ec1413d29473eb18b13ac\" style=\"color:#ffffffab;margin-bottom:var(--wp--preset--spacing--20)\">One popular tool in web <br>design is UX Design<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-font-size is-style-fill has-small-font-size is-style-fill--2dcfa8a0083af9e54c00ec8c27af7ef0\"><a class=\"wp-block-button__link has-secondary-color has-primary-background-color has-text-color has-background has-link-color wp-element-button\" style=\"border-radius:100px;padding-top:5px;padding-right:var(--wp--preset--spacing--30);padding-bottom:5px;padding-left:var(--wp--preset--spacing--30)\">more view<\/a><\/div>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div data-tab=\"slide-2\" class=\"wp-swiper__slide swiper-slide\"><div class=\"wp-swiper__overlay-color\" style=\"background-color:rgba(0, 0, 0, 0)\"><\/div><div class=\"wp-swiper__slide-content\" style=\"max-width:100%\">\n<div class=\"wp-block-cover has-custom-content-position is-position-top-right wp-duotone-unset-2\" style=\"padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--50);min-height:250px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\" style=\"background-color:#737273\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1280\" class=\"wp-block-cover__image-background wp-image-8613\" alt=\"\" src=\"\/hellopanda\/wp-content\/plugins\/hellopanda-theme-expand\/assets\/image\/library\/125.webp\" data-object-fit=\"cover\"\/><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-right has-x-large-font-size\">References<\/p>\n\n\n\n<div class=\"wp-block-outermost-icon-block items-justified-right\" style=\"padding-top:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10);\" ><div class=\"icon-container has-icon-color has-white-color\" style=\"color:#fffffd;width:36px;padding-top:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10)\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns-xlink=\"http:\/\/www.w3.org\/1999\/xlink\" viewBox=\"0 0 100 1\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\"><rect width=\"100\" height=\"1\" rx=\"0\" ry=\"0\" stroke-width=\"0\"><\/rect><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-text-align-right has-text-color has-link-color has-small-font-size wp-elements-e6890c999b92339d5547bfe6ab7f71c8\" style=\"color:#ffffffab;margin-bottom:var(--wp--preset--spacing--20)\">Marketing and communication<br>Progressive enhancement<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-right is-layout-flex wp-container-core-buttons-is-layout-2 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-font-size is-style-fill has-small-font-size is-style-fill--0fdb00067bb5c915938c8c81fde6a156\"><a class=\"wp-block-button__link has-secondary-color has-primary-background-color has-text-color has-background has-link-color wp-element-button\" style=\"border-radius:100px;padding-top:5px;padding-right:var(--wp--preset--spacing--30);padding-bottom:5px;padding-left:var(--wp--preset--spacing--30)\">more view<\/a><\/div>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div data-tab=\"slide-3\" class=\"wp-swiper__slide swiper-slide\"><div class=\"wp-swiper__overlay-color\" style=\"background-color:rgba(0, 0, 0, 0)\"><\/div><div class=\"wp-swiper__slide-content\" style=\"max-width:100%\">\n<div class=\"wp-block-cover wp-duotone-unset-3\" style=\"padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--50);min-height:250px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\" style=\"background-color:#534d4f\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1280\" class=\"wp-block-cover__image-background wp-image-8610\" alt=\"\" src=\"\/hellopanda\/wp-content\/plugins\/hellopanda-theme-expand\/assets\/image\/library\/122.webp\" data-object-fit=\"cover\"\/><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-xxx-large-font-size\" style=\"line-height:1\"><strong>DESIGN<\/strong><\/p>\n\n\n\n<div class=\"wp-block-outermost-icon-block items-justified-center\" style=\"padding-top:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10);\" ><div class=\"icon-container has-icon-color has-white-color\" style=\"color:#fffffd;width:36px;padding-top:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10)\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns-xlink=\"http:\/\/www.w3.org\/1999\/xlink\" viewBox=\"0 0 100 1\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\"><rect width=\"100\" height=\"1\" rx=\"0\" ry=\"0\" stroke-width=\"0\"><\/rect><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-text-align-center has-small-font-size\">Skills and techniques<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div><div class=\"wp_swiper__navigation\"><div class=\"wp_swiper__navigation-container\"><div class=\"swiper-button-prev \"><\/div><div class=\"swiper-button-next \"><\/div><\/div><\/div><div class=\"swiper-pagination\"><\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-hellopanda-design-pattern\">\n<div class=\"wp-block-group alignfull hellopanda-pattern-126 has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-content-justification-left is-nowrap is-layout-flex wp-container-core-group-is-layout-9 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-8 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-7 wp-block-group-is-layout-flex\" style=\"padding-top:0;padding-bottom:0\">\n<div class=\"wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-6 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group has-contrast-background-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-radius:3px;margin-bottom:0.2em;padding-top:0.7em;padding-right:1em;padding-bottom:0.7em;padding-left:1em\">\n<p class=\"has-base-color has-text-color has-link-color has-large-font-size wp-elements-26b9be3c20b37135c0b8a18064f5f9bc\"><strong>01<\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-right:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-4 wp-block-group-is-layout-flex\">\n<p class=\"has-x-large-font-size\">Slider (external plug-in)<\/p>\n\n\n\n<p class=\"has-step-10-color has-text-color has-link-color has-x-small-font-size wp-elements-4b8bcc1a9b9d7af2e6c6b237fb5a3689\" style=\"margin-right:0;margin-left:2px;letter-spacing:1px;text-transform:uppercase\">hellopanda WP manual<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-32 wp-block-group-is-layout-constrained\" style=\"border-top-color:var(--wp--preset--color--step-7);border-top-width:1px;margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30);padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-hellopanda-design-pattern\" style=\"padding-bottom:3em;padding-bottom:3em;\">\n<div class=\"wp-block-group alignfull hellopanda-pattern-190 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group is-layout-flow wp-container-core-group-is-layout-18 wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-17 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"border-width:2px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:0;padding-left:var(--wp--preset--spacing--40)\">\n<div class=\"wp-block-group wp-container-content-2 is-content-justification-left is-nowrap is-layout-flex wp-container-core-group-is-layout-13 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-12 wp-block-group-is-layout-flex\">\n<p class=\"has-text-align-left has-x-large-font-size\"><strong><strong>WP Swiper<\/strong><\/strong><\/p>\n\n\n\n<div class=\"wp-block-outermost-icon-block items-justified-left\" style=\"padding-top:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10);\" ><div class=\"icon-container rotate-180\" style=\"width:48px;padding-top:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10)\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns-xlink=\"http:\/\/www.w3.org\/1999\/xlink\" viewBox=\"0 0 100 1\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\"><rect width=\"100\" height=\"1\" rx=\"0\" ry=\"0\" stroke-width=\"0\"><\/rect><\/svg><\/div><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--10)\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-plugin-directory wp-block-embed-plugin-directory wp-container-content-1\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"0D47bYZQtm\"><a href=\"https:\/\/wordpress.org\/plugins\/wp-swiper\/\">WP Swiper<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;WP Swiper&#8221; &#8212; Plugin Directory\" src=\"https:\/\/wordpress.org\/plugins\/wp-swiper\/embed\/#?secret=D0f9hVDh0Z#?secret=0D47bYZQtm\" data-secret=\"0D47bYZQtm\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-11 wp-block-group-is-layout-flex\">\n<p class=\"has-text-align-left\">The slider in the Hellopanda theme uses an external plugin. It is an active plugin that has been adopted as a popular plugin with the largest number of users and has been continuously updated until recently. Because it is professionally managed, we decided that it would be much more convenient than a little inconvenience.<\/p>\n\n\n\n<p>WP Swiper Gutenberg Block is the most modern free mobile touch slider with hardware-accelerated transitions and amazing native behavior. This powerful plugin is designed for use on mobile websites, mobile web apps, and mobile native\/hybrid apps, and offers a variety of features and customization options to help you create stunning slideshows, image galleries, and more.<\/p>\n\n\n\n<p>It may be a little difficult to set up, but you can create an effective design with just basic settings. However, even this can be difficult to set up, so the Hellopanda theme provides most sliders as pre-made patterns. We put a lot of effort into making it more convenient to use.<\/p>\n\n\n\n<p>If you don&#8217;t know how to use patterns, we will guide you through the pattern usage guide.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\" style=\"margin-top:var(--wp--preset--spacing--20)\">\n<div class=\"wp-block-button has-custom-font-size is-style-hellopanda-button-8 has-small-font-size\"><a class=\"wp-block-button__link wp-element-button\" href=\"\/hellopanda\/guide-en-pattern\/\" style=\"padding-top:var(--wp--preset--spacing--10);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--30)\">Guide) Using patterns<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-content-justification-left is-nowrap is-layout-flex wp-container-core-group-is-layout-15 wp-block-group-is-layout-flex\" style=\"margin-top:var(--wp--preset--spacing--10);padding-right:0;padding-left:0\">\n<div class=\"wp-block-group media-query-transform-mobile has-base-background-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"transform:rotate(0deg) translate(0%, 100%)\">\n<div class=\"wp-block-outermost-icon-block\"><div class=\"icon-container flip-horizontal\" style=\"width:46px\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns-xlink=\"http:\/\/www.w3.org\/1999\/xlink\" viewBox=\"0 0 100 50\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\"><path d=\"M0,0v50Q80.952673,4.077598,80.952673,4.015816t19.047326,0v-4.015816h-20.035834L4.343259,42.629433L4.343259,0L0,0Z\" transform=\"translate(.000001 0)\" stroke-width=\"0\"><\/path><\/svg><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-21 wp-block-group-is-layout-flex\">\n<p class=\"white-nowrap wp-container-content-4\" style=\"margin-right:var(--wp--preset--spacing--10)\">1.<\/p>\n\n\n\n<div class=\"wp-block-group wp-container-content-5 is-vertical is-layout-flex wp-container-core-group-is-layout-20 wp-block-group-is-layout-flex\">\n<p>Run the block editor.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-23 wp-block-group-is-layout-flex\">\n<p class=\"white-nowrap wp-container-content-6\" style=\"margin-right:var(--wp--preset--spacing--10)\">2.<\/p>\n\n\n\n<div class=\"wp-block-group wp-container-content-7 is-vertical is-layout-flex wp-container-core-group-is-layout-22 wp-block-group-is-layout-flex\">\n<p>Select the Block Inserter toggle.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"199\" height=\"41\" src=\"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-5.png\" alt=\"\" class=\"wp-image-16456\" style=\"width:199px;height:auto\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-25 wp-block-group-is-layout-flex\">\n<p class=\"white-nowrap wp-container-content-8\" style=\"margin-right:var(--wp--preset--spacing--10)\">3.<\/p>\n\n\n\n<div class=\"wp-block-group wp-container-content-9 is-vertical is-layout-flex wp-container-core-group-is-layout-24 wp-block-group-is-layout-flex\">\n<p>Select the slider block.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"99\" height=\"85\" src=\"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-11.png\" alt=\"\" class=\"wp-image-16577\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-27 wp-block-group-is-layout-flex\">\n<p class=\"white-nowrap wp-container-content-10\" style=\"margin-right:var(--wp--preset--spacing--10)\">4.<\/p>\n\n\n\n<div class=\"wp-block-group wp-container-content-12 is-vertical is-layout-flex wp-container-core-group-is-layout-26 wp-block-group-is-layout-flex\">\n<p>Add the first slider.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"339\" height=\"165\" src=\"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-12.png\" alt=\"\" class=\"has-border-color has-step-7-border-color wp-image-16579\" style=\"border-width:1px\" srcset=\"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-12.png 339w, https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-12-300x146.png 300w\" sizes=\"(max-width: 339px) 100vw, 339px\" \/><\/figure>\n\n\n\n<p>You can add a new slider using the ( + ) button.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-29 wp-block-group-is-layout-flex\">\n<p class=\"white-nowrap wp-container-content-13\" style=\"margin-right:var(--wp--preset--spacing--10)\">5.<\/p>\n\n\n\n<div class=\"wp-block-group wp-container-content-14 is-vertical is-layout-flex wp-container-core-group-is-layout-28 wp-block-group-is-layout-flex\">\n<p>You can freely insert any content, but basically choose a \u201ccover\u201d image and insert it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"566\" height=\"407\" src=\"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/06\/manual-13-en.webp\" alt=\"\" class=\"has-border-color has-step-7-border-color wp-image-22571\" style=\"border-width:1px\" srcset=\"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/06\/manual-13-en.webp 566w, https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/06\/manual-13-en-300x216.webp 300w\" sizes=\"(max-width: 566px) 100vw, 566px\" \/><\/figure>\n\n\n\n<p>You can add a new slider using the ( + ) button.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-31 wp-block-group-is-layout-flex\">\n<p class=\"white-nowrap wp-container-content-15\" style=\"margin-right:var(--wp--preset--spacing--10)\">6.<\/p>\n\n\n\n<div class=\"wp-block-group wp-container-content-16 is-vertical is-layout-flex wp-container-core-group-is-layout-30 wp-block-group-is-layout-flex\">\n<p>Now you can freely edit the contents of the cover.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1442\" height=\"560\" src=\"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-14.png\" alt=\"\" class=\"has-border-color has-step-7-border-color wp-image-16586\" style=\"border-width:1px;width:700px\" srcset=\"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-14.png 1442w, https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-14-300x117.png 300w, https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-14-1024x398.png 1024w, https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-14-768x298.png 768w\" sizes=\"(max-width: 1442px) 100vw, 1442px\" \/><\/figure>\n\n\n\n<p>If you want to insert multiple pages, just repeat item 4. <br>This is the easiest way to create a slider.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-step-4-color has-alpha-channel-opacity has-step-4-background-color has-background is-style-hellopanda-separator-15\" style=\"margin-top:var(--wp--preset--spacing--70);margin-bottom:var(--wp--preset--spacing--70)\"\/>\n\n\n\n<div class=\"wp-block-hellopanda-design-pattern\">\n<div class=\"wp-block-group alignfull hellopanda-pattern-126 has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-content-justification-left is-nowrap is-layout-flex wp-container-core-group-is-layout-39 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-38 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-37 wp-block-group-is-layout-flex\" style=\"padding-top:0;padding-bottom:0\">\n<div class=\"wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-36 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group has-contrast-background-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-radius:3px;margin-bottom:0.2em;padding-top:0.7em;padding-right:1em;padding-bottom:0.7em;padding-left:1em\">\n<p class=\"has-base-color has-text-color has-link-color has-large-font-size wp-elements-2b2341b481cab60c1a30c8b6903450c3\"><strong>02<\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-right:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-34 wp-block-group-is-layout-flex\">\n<p class=\"has-x-large-font-size\">Setting the slider details (global settings)<\/p>\n\n\n\n<p class=\"has-step-10-color has-text-color has-link-color has-x-small-font-size wp-elements-4b8bcc1a9b9d7af2e6c6b237fb5a3689\" style=\"margin-right:0;margin-left:2px;letter-spacing:1px;text-transform:uppercase\">hellopanda WP manual<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-62 wp-block-group-is-layout-constrained\" style=\"border-top-color:var(--wp--preset--color--step-7);border-top-width:1px;margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30);padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-42 wp-block-group-is-layout-flex\">\n<p class=\"white-nowrap wp-container-content-17\" style=\"margin-right:var(--wp--preset--spacing--10)\">1.<\/p>\n\n\n\n<div class=\"wp-block-group wp-container-content-18 is-vertical is-layout-flex wp-container-core-group-is-layout-41 wp-block-group-is-layout-flex\">\n<p>Slider default style<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"278\" height=\"157\" src=\"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-17.png\" alt=\"\" class=\"wp-image-16640\"\/><\/figure>\n\n\n\n<p>It doesn&#8217;t have much meaning, but it&#8217;s a good idea to select them one by one and check them.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-44 wp-block-group-is-layout-flex\">\n<p class=\"white-nowrap wp-container-content-19\" style=\"margin-right:var(--wp--preset--spacing--10)\">2.<\/p>\n\n\n\n<div class=\"wp-block-group wp-container-content-20 is-vertical is-layout-flex wp-container-core-group-is-layout-43 wp-block-group-is-layout-flex\">\n<p>Overlay settings<\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"202\" src=\"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-18.png\" alt=\"\" class=\"has-border-color has-step-7-border-color wp-image-16642\" style=\"border-width:1px\"\/><\/figure>\n\n\n\n<p>You can choose an image or color to cover the entire slider. <br>Use this option with caution as it affects the entire slider.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-61 wp-block-group-is-layout-flex\">\n<p class=\"white-nowrap wp-container-content-21\" style=\"margin-right:var(--wp--preset--spacing--10)\">3.<\/p>\n\n\n\n<div class=\"wp-block-group wp-container-content-43 is-vertical is-layout-flex wp-container-core-group-is-layout-60 wp-block-group-is-layout-flex\">\n<p>Slider settings (Swiper)<\/p>\n\n\n\n<div class=\"wp-block-hellopanda-design-pattern\">\n<div class=\"wp-block-group alignfull hellopanda-pattern-97 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-3 wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-46 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group wp-container-content-24 is-vertical is-layout-flex wp-container-core-group-is-layout-45 wp-block-group-is-layout-flex\">\n<p><strong>Whether to enable navigation and set icons<\/strong><\/p>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-22\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"278\" height=\"204\" src=\"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-19.png\" alt=\"\" class=\"wp-image-16652\"\/><\/figure>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-23\"><\/div>\n\n\n\n<p>You can decide whether the slider&#8217;s navigation is visible and change the images that correspond to the arrow shapes. Wouldn\u2019t it be better to register transparently as a png file?<\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity separator-style-dashed\" style=\"margin-top:var(--wp--preset--spacing--40);border-top-width:1px\"\/>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-48 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group wp-container-content-27 is-vertical is-layout-flex wp-container-core-group-is-layout-47 wp-block-group-is-layout-flex\">\n<p><strong>Pagination settings<\/strong><\/p>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-25\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"274\" height=\"216\" src=\"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-22.png\" alt=\"\" class=\"wp-image-16670\"\/><\/figure>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-26\"><\/div>\n\n\n\n<p>Defines the pagination type of the slider. It supports three options: bullet, number, and progress bar, and can enable\/disable pagination. As a small option, there is also a toggle function that determines whether the screen will move when you click on the pagination bullet, number, etc.<\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity separator-style-dashed\" style=\"margin-top:var(--wp--preset--spacing--40);border-top-width:1px\"\/>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-50 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group wp-container-content-30 is-vertical is-layout-flex wp-container-core-group-is-layout-49 wp-block-group-is-layout-flex\">\n<p><strong>Set slider element spacing, number visible on screen<\/strong><\/p>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-28\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"278\" height=\"295\" src=\"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-23.png\" alt=\"\" class=\"wp-image-16672\"\/><\/figure>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-29\"><\/div>\n\n\n\n<p>It doesn&#8217;t matter if the number of sliders is on one screen, but if you put multiple sliders on one screen, the space between them becomes important. This option is useful for screen transitions where multiple screens are sliding simultaneously. This is a common effect where images are slid two at a time.<\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity separator-style-dashed\" style=\"margin-top:var(--wp--preset--spacing--40);border-top-width:1px\"\/>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-52 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group wp-container-content-33 is-vertical is-layout-flex wp-container-core-group-is-layout-51 wp-block-group-is-layout-flex\">\n<p><strong>Breakpoint settings (for experts)<\/strong><\/p>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-31\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"279\" height=\"186\" src=\"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-24.png\" alt=\"\" class=\"wp-image-16676\"\/><\/figure>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-32\"><\/div>\n\n\n\n<p>We recommend that this feature be used only by those with knowledge of development. This is a function that allows the slider to be displayed differently depending on the screen size. It must be written in JSON type, and a simple example is provided below.<\/p>\n\n\n\n<p>Example:&nbsp;{&#8220;720&#8221;:{&#8220;slidesPerView&#8221;:2}}&nbsp;&#8211; Notice the double quotes<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-4 wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-54 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group wp-container-content-36 is-vertical is-layout-flex wp-container-core-group-is-layout-53 wp-block-group-is-layout-flex\">\n<p><strong>Set slider auto height<\/strong><\/p>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-34\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"278\" height=\"112\" src=\"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-20.png\" alt=\"\" class=\"wp-image-16665\"\/><\/figure>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-35\"><\/div>\n\n\n\n<p>If the height of the slider is different, the height is automatically converted when the screen is switched. The default is enabled and this setting should be effective in most situations.<\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity separator-style-dashed\" style=\"margin-top:var(--wp--preset--spacing--40);color:;border-top-width:1px\"\/>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-56 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group wp-container-content-39 is-vertical is-layout-flex wp-container-core-group-is-layout-55 wp-block-group-is-layout-flex\">\n<p><strong>Set slider direction<\/strong><\/p>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-37\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"277\" height=\"168\" src=\"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-21.png\" alt=\"\" class=\"wp-image-16668\"\/><\/figure>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-38\"><\/div>\n\n\n\n<p>Determines the direction of the slider. However, the effect is applied only when the slider&#8217;s screen transition method involves movement. For example, in the case of Fade, direction loses much of its meaning.<\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity separator-style-dashed\" style=\"margin-top:var(--wp--preset--spacing--40);border-top-width:1px\"\/>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-58 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group wp-container-content-42 is-vertical is-layout-flex wp-container-core-group-is-layout-57 wp-block-group-is-layout-flex\">\n<p><strong>Slider core function settings (default)<\/strong><\/p>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-40\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"276\" height=\"474\" src=\"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-25.png\" alt=\"\" class=\"wp-image-16682\" srcset=\"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-25.png 276w, https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-25-175x300.png 175w\" sizes=\"(max-width: 276px) 100vw, 276px\" \/><\/figure>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-41\"><\/div>\n\n\n\n<p><strong>Auto Play<\/strong> ) Activates the function where the slider moves automatically.<\/p>\n\n\n\n<p><strong>Disable On Interaction<\/strong> ) If Auto Play is set, the screen will change automatically, but if there is user interaction (when the screen is moved with the mouse or the screen is switched by selecting a bullet), this is a function that stops the slider screen switching. If the screen moves quickly, it can be hectic, right? This function can solve it.<\/p>\n\n\n\n<p><strong>Loop<\/strong> ) This function sets the end point of the slider element. For example 1 | 2 | If there is a screen transition called 3, if you activate this function, 1 | 2 | 3 | 1 | 2 | 3 | In this way, the screen changes sequentially and infinitely. If you disable it, you will no longer be able to move to the next screen on the third screen and must choose to return.<\/p>\n\n\n\n<p><strong>Delay<\/strong> ) This is the pause time each time the screen is switched. (unit of ms)<\/p>\n\n\n\n<p><strong>Speed<\/strong> ) Refers to the speed at which the screen changes. (unit of ms)<\/p>\n\n\n\n<p><strong>Effect<\/strong> ) Determines the style in which the screen transitions.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-step-4-color has-alpha-channel-opacity has-step-4-background-color has-background is-style-hellopanda-separator-15\" style=\"margin-top:var(--wp--preset--spacing--70);margin-bottom:var(--wp--preset--spacing--70)\"\/>\n\n\n\n<div class=\"wp-block-hellopanda-design-pattern\">\n<div class=\"wp-block-group alignfull hellopanda-pattern-126 has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-content-justification-left is-nowrap is-layout-flex wp-container-core-group-is-layout-69 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-68 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-67 wp-block-group-is-layout-flex\" style=\"padding-top:0;padding-bottom:0\">\n<div class=\"wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-66 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group has-contrast-background-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-radius:3px;margin-bottom:0.2em;padding-top:0.7em;padding-right:1em;padding-bottom:0.7em;padding-left:1em\">\n<p class=\"has-base-color has-text-color has-link-color has-large-font-size wp-elements-1a21c9c3b38923f221954e1e34f385f3\"><strong>0<\/strong>3<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-right:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-64 wp-block-group-is-layout-flex\">\n<p class=\"has-x-large-font-size\">Setting the slider details (individual element settings)<\/p>\n\n\n\n<p class=\"has-step-10-color has-text-color has-link-color has-x-small-font-size wp-elements-4b8bcc1a9b9d7af2e6c6b237fb5a3689\" style=\"margin-right:0;margin-left:2px;letter-spacing:1px;text-transform:uppercase\">hellopanda WP manual<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-75 wp-block-group-is-layout-constrained\" style=\"border-top-color:var(--wp--preset--color--step-7);border-top-width:1px;margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30);padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-5 wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group is-content-justification-left is-nowrap is-layout-flex wp-container-core-group-is-layout-72 wp-block-group-is-layout-flex\">\n<p class=\"white-nowrap wp-container-content-44\" style=\"margin-right:var(--wp--preset--spacing--10)\">1.<\/p>\n\n\n\n<div class=\"wp-block-group wp-container-content-45 is-vertical is-layout-flex wp-container-core-group-is-layout-71 wp-block-group-is-layout-flex\">\n<p><strong>Select slide image<\/strong><\/p>\n\n\n\n<p style=\"box-shadow: 0px 0px 0px 0px #000000ff\">You can choose a default image provided by the slider. After selecting the basic image, you must fill in the content to view the screen. (There is an image, but that&#8217;s because it&#8217;s the background.) After selecting this image, you can fill in the internal content.<\/p>\n\n\n\n<p>However, this is only provided by the plugin and is not required to be used. Please note that it is fully usable even if you insert an image as a basic WordPress block. If you understand each slide as an area, organizing content will be much easier.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-content-justification-left is-nowrap is-layout-flex wp-container-core-group-is-layout-74 wp-block-group-is-layout-flex\">\n<p class=\"white-nowrap wp-container-content-46\" style=\"margin-right:var(--wp--preset--spacing--10)\">2.<\/p>\n\n\n\n<div class=\"wp-block-group wp-container-content-48 is-vertical is-layout-flex wp-container-core-group-is-layout-73 wp-block-group-is-layout-flex\">\n<p><strong>Select thumb image<\/strong><\/p>\n\n\n\n<p class=\"break-keep-all\">This is an option to configure the slider with thumbnails. Just adding an image to this function does not immediately display the thumbnail. Please understand that this option is only complete when you turn on the option to display thumbnails in the overall settings. Please refer to the image below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"269\" height=\"111\" src=\"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/05\/manual-16.png\" alt=\"\" class=\"wp-image-16637\"\/><\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"932\" height=\"325\" src=\"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/06\/manual-15-en.webp\" alt=\"\" class=\"wp-image-22572\" srcset=\"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/06\/manual-15-en.webp 932w, https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/06\/manual-15-en-300x105.webp 300w, https:\/\/wordpress.pandassi.com\/hellopanda\/wp-content\/uploads\/2024\/06\/manual-15-en-768x268.webp 768w\" sizes=\"(max-width: 932px) 100vw, 932px\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-hellopanda-separator-3\" style=\"margin-top:var(--wp--preset--spacing--60);margin-bottom:var(--wp--preset--spacing--60)\"\/>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-4 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-hellopanda-button-9\"><a class=\"wp-block-button__link wp-element-button\" href=\"\/blog\/hellopanda-en-manual\">GUIDE HOME<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>1. Run the block editor. 2. Select the Block Inserter toggle. 3. Select the slider block. 4. Add the first slider. You can add a new slider using the ( + ) button. 5. You can freely insert any content, but basically choose a \u201ccover\u201d image and insert it. You can add a new slider [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":23010,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,6],"tags":[],"class_list":["post-21942","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guide-en","category-guide"],"_links":{"self":[{"href":"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-json\/wp\/v2\/posts\/21942"}],"collection":[{"href":"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-json\/wp\/v2\/comments?post=21942"}],"version-history":[{"count":13,"href":"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-json\/wp\/v2\/posts\/21942\/revisions"}],"predecessor-version":[{"id":23014,"href":"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-json\/wp\/v2\/posts\/21942\/revisions\/23014"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-json\/wp\/v2\/media\/23010"}],"wp:attachment":[{"href":"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-json\/wp\/v2\/media?parent=21942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-json\/wp\/v2\/categories?post=21942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-json\/wp\/v2\/tags?post=21942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}