首页banner修改

app/code/Joshine/Banner/view/frontend/templates/index.phtml

@@ -3,68 +3,82 @@
 $collection = $block->getCollection();
 ?>
 
-<div class="banner1" style="background-color: #f0f0f0;"></div>
+
 <?php
 $_objectManager = \Magento\Framework\App\ObjectManager::getInstance(); //instance of\Magento\Framework\App\ObjectManager
 $storeManager = $_objectManager->get('Magento\Store\Model\StoreManagerInterface');
 $currentStore = $storeManager->getStore();
 $mediaUrl = $currentStore -> getBaseUrl ( \Magento\Framework\UrlInterface :: URL_TYPE_MEDIA ) ;
-?>
-
-<?php foreach ($collection->getItems() as $item):?>
-<?php echo $item->getData('name');?>
-<?php endforeach;?>
 
-<link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('Joshine_Banner::css/banner.css'); ?>">
-<script type="text/javascript">
-require(['jquery','banner'],function ($){
-    var img_arr =
-        [
-            <?php foreach ($collection->getItems() as $item):?>
-            [
-                <?php echo "'".$mediaUrl . $item->getData('img_patch') . "',";?>
-                <?php echo "'".$mediaUrl . $item->getData('phone_img_patch') . "',";?>
-            ],
-            <?php endforeach;?>
-        ];
+$mobileDetect = $_objectManager->get(\Joshine\Common\Lib\MobileDetect\MobileDetect::class);
+$isMobile = $mobileDetect->isMobile();
+?>
+<style>
+.banner,.banner-place,.banner-place li{
+    width: 100%;
+}
+.cms-index-index .owl-carousel.owl-theme {
+    margin: 0 auto;
+    padding: 0;
+}
+.cms-index-index .owl-carousel.owl-theme .owl-nav .owl-prev,.cms-index-index .owl-carousel.owl-theme .owl-nav .owl-next{
+    background-color:#FFFFFF;
+    border-radius: 22px;
+    opacity: 0.7;
+    top:40%;
+}
+@media (max-width: 768px) {
+    .cms-index-index .owl-carousel.owl-theme .owl-nav .owl-prev,.cms-index-index .owl-carousel.owl-theme .owl-nav .owl-next{
+        border-radius: 0px;
+        padding: 10px 0px 10px 5px;
+    }
+}
+</style>
+<div class="banner1" style="background-color: #f0f0f0;width:100%;">
+    <ul class="banner-place owl-carousel owl-theme">
 
-    var href = [
         <?php foreach ($collection->getItems() as $item):?>
-        <?php echo "'" . $item->getData('url') . "',";?>
-        <?php endforeach;?>
-    ];
+            <li>
+                <a href="<?$item->getData('url')?>">
 
-    jQuery('.banner1').banner({
-            img: img_arr,
-            href:href,
-            btn: true,
-            list: true,
-            autoPlay: true,
-            delayTime: 5000,
-            moveTime: 500,
-            index: 0
-        });
-
-    window.onload = function (){
-        var h_max = 0;
-
-        $('.top_banner').each(function (i,v){
-            var h = $(this).height();
-            h_max = h > h_max ? h : h_max;
+                    <?php if ($isMobile) :?>
+                        <img class="mobile" src="<?= $mediaUrl . $item->getData('phone_img_patch')?>" alt="" />
+                    <?php else:?>
+                        <img class="pc" src="<?= $mediaUrl . $item->getData('img_patch')?>" alt="" />
+                    <?php endif; ?>
+                </a>
+            </li>
+        <?php endforeach;?>
+    </ul>
+</div>
+<script>
+    // <![CDATA[
+    require(['jquery', 'jquery.owlCarousel'], function ($) {
+        var isMobile = window.matchMedia("(pointer:coarse)").matches;
+        var el = $('.banner-place');
+        var owl = el.owlCarousel({
+            nav: true,
+            navText: [],
+            autoplay:true,
+            autoplayTimeout:3000,
+            loop: true,
+            dots: true,
+            dotsEach:1,
+            dotsSpeed:2,
+            items: 1,
+            center: false,
+            slideBy: 1
         });
-
-        if (h_max > 0){
-            $('.banner1').height(h_max);
-            $('.banner1').css('line-height',h_max+'px');
-            var buttonTop = h_max/2;
-            $('#left').css({'top':buttonTop,'line-height': 0});
-            $('#right').css({'top':buttonTop,'line-height': 0});
+        if(isMobile)
+        {
+            $('.owl-nav .owl-prev').html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path stroke-width="1.5" d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"></path></svg>')
+            $('.owl-nav .owl-next').html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path stroke-width="1.5" d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"></path></svg>')
         }
-        if (img_arr.length <= 1){
-            $('.banner1 .list').hide();
-            $('#left').hide();
-            $('#right').hide();
+        else
+        {
+            $('.owl-nav .owl-prev').html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path stroke-width="1.5" d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"></path></svg>')
+            $('.owl-nav .owl-next').html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path stroke-width="1.5" d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"></path></svg>')
         }
-    }
-});
+    });
+    // ]]>
 </script>
\ No newline at end of file