优化主站首页轮播图

app/design/frontend/Joshine/breeze/Magento_Cms/templates/default/home.phtml

@@ -4,20 +4,22 @@
  * See COPYING.txt for license details.
  */
 ?>
-    <style>
+<style>
         .banner1,.banner1 >.imgbox, .banner1 >.imgbox > a, .banner1 >.imgbox > a >img{
             height: 634px !important;
         }
+        .top_banner{
+            width: 100%;
+        }
         input#left,input#right {
             top: 300px !important;
             padding-top: 2px;
         }
         @media (max-width: 768px) {
-            .banner1,.banner1 >.imgbox, .banner1 >.imgbox > a,.banner1 >.imgbox > a >img{
+            .banner1, .banner1 > .imgbox, .banner1 > .imgbox > a, .banner1 > .imgbox > a > img,.top_banner {
                 height: 577px !important;
-                margin-top:10px;
             }
-            input#left,input#right{
+            input#left, input#right {
                 top: 280px !important;
                 padding: 1px;
             }
@@ -34,10 +36,9 @@
                 font-size: 18px;
             }
         }
-
-    </style>
-    <div class="banner1"></div>
-    <script>
+</style>
+<div class="banner1" style="background-color: #f0f0f0;"></div>
+<script>
         require([
             'jquery'
         ], function ($) {
@@ -58,7 +59,10 @@
                 this._obj.init = function(){
                     var str = ``;
                     for(var i=0;i<this.img.length;i++){
-                        str += `<a href="${this.href[i]}"><img src="${this.img[i]}"></a>`
+                        str += `<a href="${this.href[i]}"><picture>
+  <source media="(max-width: 768px)" srcset="${this.img[i][1]}" />
+  <source media="(min-width: 769px)" srcset="${this.img[i][0]}" />
+  <img src="${this.img[i][0]}" loading="lazy" class="top_banner" /></picture></a>`
                     }
                     that.html(`<div class="imgbox">${str}</div>`).css({
                         "width":"100%",
@@ -203,40 +207,21 @@
                 }
             }
 
-            var img_arr =  ["/media/carousel/pc/1.jpg", "/media/carousel/pc/2.jpg"];
-            if (isMobile()) {
-                img_arr =  ["/media/carousel/mobile/1.jpg", "/media/carousel/mobile/2.jpg"];
-            }
+            var img_arr =  [["/media/carousel/pc/1.jpg","/media/carousel/mobile/1.jpg"],
+                ["/media/carousel/pc/2.jpg","/media/carousel/mobile/2.jpg"] ];
+
             $(".banner1").banner({
                 img: img_arr,
                 href: ["/shapewear", "/shapewear"],
                 btn: true,
                 list: true,
                 autoPlay: true,
-                delayTime: 8000,
-                moveTime: 800,
+                delayTime: 5000,
+                moveTime: 500,
                 index: 0
             });
         });
-
-        function isMobile() {
-            var userAgentInfo = navigator.userAgent;
-            var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];
-            var mobile_flag = false;
-            for (var v = 0; v < mobileAgents.length; v++) {
-                if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
-                    mobile_flag = true;
-                    break;
-                }
-            }
-            var screen_width = window.screen.width;
-            var screen_height = window.screen.height;
-            if(screen_width < 500 && screen_height < 800){
-                mobile_flag = true;
-            }
-            return mobile_flag;
-        }
-    </script>
+</script>
 <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('home_top_category_thumnail')->toHtml();?>
 <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('home_new_arrivals')->toHtml();?>
 <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('flashsaleproduct')->toHtml();?>

composer.json

@@ -2,6 +2,7 @@
     "name": "magento/magento2ce",
     "description": "Magento 2 (Open Source)",
     "type": "project",
+    "version": "2.4.3",
     "license": [
         "OSL-3.0",
         "AFL-3.0"