|
| 1 | +<?php |
| 2 | +$bannerId = \ModStart\Core\Util\IdUtil::generate('Banner'); |
| 3 | +$banners = \Module\Banner\Util\BannerUtil::listByPositionWithCache($position); |
| 4 | +if(empty($bannerSize)){ |
| 5 | + $bannerSize = '1400x400'; |
| 6 | +} |
| 7 | +if(empty($bannerRatio)){ |
| 8 | + $bannerRatio = '5-2'; |
| 9 | +} |
| 10 | +if(empty($mobileBannerRatio)){ |
| 11 | + $mobileBannerRatio = ''; |
| 12 | +}else{ |
| 13 | + $mobileBannerRatio = 'm-ratio-'.$mobileBannerRatio; |
| 14 | +} |
| 15 | +if(!isset($round)){ |
| 16 | + $round = false; |
| 17 | +} |
| 18 | +if(!isset($container)){ |
| 19 | + $container = false; |
| 20 | +} |
| 21 | +?> |
| 22 | +{!! \ModStart\ModStart::css('asset/vendor/swiper/swiper.css') !!} |
| 23 | +{!! \ModStart\ModStart::js('asset/vendor/swiper/swiper.js') !!} |
| 24 | +{!! \ModStart\ModStart::css('vendor/Banner/style/banner.css') !!} |
| 25 | +<div class="ub-banner ratio-{{$bannerRatio}} {{$mobileBannerRatio}} {{$container?'container':''}}" id="{{$bannerId}}"> |
| 26 | + <div class="swiper-container"> |
| 27 | + <div class="swiper-wrapper"> |
| 28 | + @if(empty($banners)) |
| 29 | + @for($i=0;$i<3;$i++) |
| 30 | + <div class="swiper-slide {{$round?'tw-rounded':''}}" style="background-color:#EEE;"> |
| 31 | + <div class="cover" style="background-image:url('/placeholder/{{$bannerSize}}');"></div> |
| 32 | + </div> |
| 33 | + @endfor |
| 34 | + @else |
| 35 | + @foreach($banners as $b) |
| 36 | + @if($b['type']==\Module\Banner\Type\BannerType::IMAGE) |
| 37 | + <a class="swiper-slide {{$round?'tw-rounded':''}}" |
| 38 | + style="background-color:{{$b['backgroundColor']?$b['backgroundColor']:'transparent'}};" |
| 39 | + @if($b['link']) href="{{$b['link']}}" target="_blank" @else href="javascript:;" @endif> |
| 40 | + <div class="cover" style="background-image:url({{\ModStart\Core\Assets\AssetsUtil::fix($b['image'])}});"></div> |
| 41 | + </a> |
| 42 | + @elseif($b['type']==\Module\Banner\Type\BannerType::IMAGE_TITLE_SLOGAN_LINK) |
| 43 | + <div class="swiper-slide {{$round?'tw-rounded':''}} a" |
| 44 | + style="background-color:{{$b['backgroundColor']?$b['backgroundColor']:'transparent'}};"> |
| 45 | + <div class="cover" style="background-image:url({{\ModStart\Core\Assets\AssetsUtil::fix($b['image'])}});"> |
| 46 | + <div class="content @if(!empty($b['colorReverse'])) reverse @endif"> |
| 47 | + <div class="title">{{$b['title']}}</div> |
| 48 | + <div class="slogan"> |
| 49 | + @foreach(explode("\n",trim($b['slogan'])) as $line) |
| 50 | + <div class="line">{{$line}}</div> |
| 51 | + @endforeach |
| 52 | + </div> |
| 53 | + <a class="link" href="{{$b['link']}}" target="_blank">{{$b['linkText']}}</a> |
| 54 | + </div> |
| 55 | + </div> |
| 56 | + </div> |
| 57 | + @elseif($b['type']==\Module\Banner\Type\BannerType::VIDEO && !\ModStart\Core\Util\AgentUtil::isMobile()) |
| 58 | + <a class="swiper-slide {{$round?'tw-rounded':''}} video" |
| 59 | + style="background-color:{{$b['backgroundColor']?$b['backgroundColor']:'transparent'}};" |
| 60 | + @if($b['link']) href="{{$b['link']}}" target="_blank" @else href="javascript:;" @endif> |
| 61 | + <div class="cover"> |
| 62 | + <video class="video-player" |
| 63 | + src="{{\ModStart\Core\Assets\AssetsUtil::fix($b['video'])}}" |
| 64 | + autoplay="autoplay" loop="loop" muted="muted"></video> |
| 65 | + </div> |
| 66 | + </a> |
| 67 | + @endif |
| 68 | + @endforeach |
| 69 | + @endif |
| 70 | + </div> |
| 71 | + @if(count($banners)>1) |
| 72 | + <div class="swiper-pagination swiper-pagination-white"></div> |
| 73 | + <div class="swiper-button-next swiper-button-white"></div> |
| 74 | + <div class="swiper-button-prev swiper-button-white tw-delay-200"></div> |
| 75 | + @endif |
| 76 | + </div> |
| 77 | +</div> |
| 78 | +@if(count($banners)>1) |
| 79 | + <script> |
| 80 | + $(function () { |
| 81 | + var changeAnimate = function(slide){ |
| 82 | + var $content = $(slide).find('.content'); |
| 83 | + if($content.length>0){ |
| 84 | + $content.find('.title').removeClass('animated fadeInUp'); |
| 85 | + $content.find('.slogan').removeClass('animated fadeInUp'); |
| 86 | + $content.find('.link').removeClass('animated fadeInUp'); |
| 87 | + setTimeout(function(){ |
| 88 | + $content.find('.title').addClass('animated fadeInUp'); |
| 89 | + $content.find('.slogan').addClass('animated fadeInUp'); |
| 90 | + $content.find('.link').addClass('animated fadeInUp'); |
| 91 | + },0); |
| 92 | + } |
| 93 | + }; |
| 94 | + var swiper = new Swiper('#{{$bannerId}} .swiper-container', { |
| 95 | + pagination: { |
| 96 | + el: '.swiper-pagination', |
| 97 | + clickable: true |
| 98 | + }, |
| 99 | + navigation: { |
| 100 | + nextEl: '.swiper-button-next', |
| 101 | + prevEl: '.swiper-button-prev', |
| 102 | + }, |
| 103 | + loop: true, |
| 104 | + autoplay: { |
| 105 | + delay: 3000 |
| 106 | + }, |
| 107 | + observer: true, |
| 108 | + observeParents: true, |
| 109 | + on: { |
| 110 | + observerUpdate: function(){ |
| 111 | + swiperRefresh(); |
| 112 | + }, |
| 113 | + resize: function () { |
| 114 | + swiperRefresh(); |
| 115 | + } |
| 116 | + } |
| 117 | + }); |
| 118 | + var swiperRefresh = function(){ |
| 119 | + setTimeout(function(){ |
| 120 | + swiper.update(); |
| 121 | + }, 500); |
| 122 | + }; |
| 123 | + changeAnimate(swiper.slides[swiper.activeIndex]); |
| 124 | + swiper.on('slideChange',function(){ |
| 125 | + changeAnimate(swiper.slides[swiper.activeIndex]); |
| 126 | + }); |
| 127 | + }); |
| 128 | + </script> |
| 129 | +@endif |
| 130 | + |
0 commit comments