1、修改轮播样式

OpenTenBase · Oct 24, 2023 · 9bf2ae4 · 9bf2ae4
1 parent cc4b10f
commit 9bf2ae4
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 77 deletions.
diff --git a/hugo_stats.json b/hugo_stats.json
@@ -57,10 +57,14 @@
       "btn",
       "btn-link",
       "btn-main",
+      "btn-next",
+      "btn-pre",
       "button",
       "button-primary",
       "clearfix",
+      "col-1",
       "col-12",
+      "col-4",
       "col-lg-10",
       "col-lg-12",
       "col-lg-3",
@@ -70,6 +74,7 @@
       "col-lg-9",
       "col-md-6",
       "col-xl-12",
+      "col-xl-4",
       "collapse",
       "color",
       "community_news_layout",
@@ -114,6 +119,7 @@
       "ml-auto",
       "mr-3",
       "mx-auto",
+      "my-button",
       "nav-item",
       "nav-link",
       "navbar",
@@ -143,17 +149,23 @@
       "service-icon",
       "service-name",
       "simple-icon",
+      "slick-next",
+      "slick-prev",
       "sticky-top",
       "style-one",
       "testimonial",
       "testimonial-content",
       "testimonial-title",
+      "testimonial_content_footer",
       "testimonial_content_item",
+      "testimonial_item3",
       "testimonial_item_content",
       "testimonial_item_name",
       "testimonial_item_position",
       "text-center",
       "text-truncate",
+      "ti-angle-left",
+      "ti-angle-right",
       "ti-blackboard",
       "ti-book",
       "ti-facebook",

diff --git a/themes/meghna-hugo/assets/css/style.css b/themes/meghna-hugo/assets/css/style.css
@@ -172,7 +172,7 @@ a:hover {
 }
 
 .testimonial-title {
-  margin-top: 42px;
+  margin:42px 0;
   color: #000000;
   font-family: PingFang SC;
   font-size: 32px;
@@ -186,6 +186,11 @@ a:hover {
   margin-bottom: 62px;
 }
 
+.testimonial_content_footer {
+  display: flex;
+  justify-content: center;
+}
+
 .service-font {
   color: #000000;
   font-family: PingFang SC;
@@ -1331,6 +1336,7 @@ a:hover {
   border-radius: 4px;
   padding: 32px 42px;
   background: #ffffff;
+  margin-bottom: 42px;
 }
 
 .testimonial_item_name {
@@ -3372,7 +3378,8 @@ main {
   flex-shrink: 0;
   fill: #fff;
   stroke-width: 1px;
-  stroke: var(--unnamed, #d6dbe3);
+  stroke: #d6dbe3;
+  margin-left: 24px;
 }
 
 .basic_bgc {

diff --git a/themes/meghna-hugo/assets/js/script.js b/themes/meghna-hugo/assets/js/script.js
@@ -1,53 +1,50 @@
 /* ========================================================================= */
 /*	Page Preloader
-/* ========================================================================= */
-
-$(window).on('load', function () {
-  $('.preloader').fadeOut(100);
-});
+ /* ========================================================================= */
 
-jQuery(function ($) {
-  "use strict";
+jQuery(function($) {
+  'use strict';
 
   /* ========================================================================= */
   /*	lazy load initialize
-  /* ========================================================================= */
+   /* ========================================================================= */
 
   const observer = lozad(); // lazy loads elements with default selector as ".lozad"
   observer.observe();
 
   /* ========================================================================= */
   /*	Magnific popup
-  /* =========================================================================  */
+   /* =========================================================================  */
   $('.image-popup').magnificPopup({
     type: 'image',
     removalDelay: 160, //delay removal by X to allow out-animation
     callbacks: {
-      beforeOpen: function () {
+      beforeOpen: function() {
         // just a hack that adds mfp-anim class to markup
-        this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
+        this.st.image.markup = this.st.image.markup.replace('mfp-figure',
+          'mfp-figure mfp-with-anim');
         this.st.mainClass = this.st.el.attr('data-effect');
-      }
+      },
     },
     closeOnContentClick: true,
     midClick: true,
     fixedContentPos: false,
-    fixedBgPos: true
+    fixedBgPos: true,
   });
 
   /* ========================================================================= */
   /*	Portfolio Filtering Hook
-  /* =========================================================================  */
+   /* =========================================================================  */
 
   var containerEl = document.querySelector('.shuffle-wrapper');
   if (containerEl) {
     var Shuffle = window.Shuffle;
     var myShuffle = new Shuffle(document.querySelector('.shuffle-wrapper'), {
       itemSelector: '.shuffle-item',
-      buffer: 1
+      buffer: 1,
     });
 
-    jQuery('input[name="shuffle-filter"]').on('change', function (evt) {
+    jQuery('input[name="shuffle-filter"]').on('change', function(evt) {
       var input = evt.currentTarget;
       if (input.checked) {
         myShuffle.filter(input.value);
@@ -56,38 +53,54 @@ jQuery(function ($) {
   }
 
   /* ========================================================================= */
+
   /*	Testimonial Carousel
-  /* =========================================================================  */
+   /* =========================================================================  */
+  function setSlidesInfo(slidesDefault) {
+
+    $('#testimonials').slick({
+      accessibility: true,
+      infinite: true,
+      arrows: false,
+      autoplay: false,
+      autoplaySpeed: 2000,
+      slidesToShow: slidesDefault,
+      slidesToScroll: slidesDefault,
+    });
+  }
 
-  $("#testimonials").slick({
-    infinite: true,
-    arrows: false,
-    autoplay: true,
-    autoplaySpeed: 4000
+  setSlidesInfo(3);
+
+  $('.btn-pre').click(function() {
+    $('#testimonials').slick('slickPrev');
   });
 
-  /* ========================================================================= */
+  $('.btn-next').click(function() {
+    $('#testimonials').slick('slickNext');
+  });
 
-  /*	animation scroll js
   /* ========================================================================= */
 
+  /*	animation scroll js
+   /* ========================================================================= */
 
   function myFunction(x) {
     if (x.matches) {
-      var topOf = 50
+      var topOf = 50;
     } else {
-      var topOf = 350
+      var topOf = 350;
     }
   }
 
   var html_body = $('html, body');
-  $('nav a, .page-scroll').on('click', function () { //use page-scroll class in any HTML tag for scrolling
-    if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
+  $('nav a, .page-scroll').on('click', function() { //use page-scroll class in any HTML tag for scrolling
+    if (location.pathname.replace(/^\//, '') ===
+      this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
       var target = $(this.hash);
       target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
       if (target.length) {
         html_body.animate({
-          scrollTop: target.offset().top - 50
+          scrollTop: target.offset().top - 50,
         }, 1500, 'easeInOutExpo');
         return false;
       }
@@ -96,7 +109,7 @@ jQuery(function ($) {
 
   // easeInOutExpo Declaration
   jQuery.extend(jQuery.easing, {
-    easeInOutExpo: function (x, t, b, c, d) {
+    easeInOutExpo: function(x, t, b, c, d) {
       if (t === 0) {
         return b;
       }
@@ -107,42 +120,71 @@ jQuery(function ($) {
         return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
       }
       return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
-    }
+    },
   });
 
   /* ========================================================================= */
 
+  /* ========================================================================= hack屏幕 强制修改最小高度*/
+
   /*	counter up
-  /* ========================================================================= */
+   /* ========================================================================= */
   function counter() {
     var oTop;
     if ($('.count').length !== 0) {
       oTop = $('.count').offset().top - window.innerHeight;
     }
     if ($(window).scrollTop() > oTop) {
-      $('.count').each(function () {
+      $('.count').each(function() {
         var $this = $(this),
           countTo = $this.attr('data-count');
         $({
-          countNum: $this.text()
+          countNum: $this.text(),
         }).animate({
-          countNum: countTo
+          countNum: countTo,
         }, {
           duration: 1000,
           easing: 'swing',
-          step: function () {
+          step: function() {
             $this.text(Math.floor(this.countNum));
           },
-          complete: function () {
+          complete: function() {
             $this.text(this.countNum);
-          }
+          },
         });
       });
     }
   }
 
-  $(window).on('scroll', function () {
+  $(window).on('scroll', function() {
     counter();
   });
 
+  function isMobile() {
+    var flag = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent);
+    return flag;
+  }
+
+
+  $(window).on('load', function() {
+    $('.preloader').fadeOut(100);
+  });
+
+  $(window).on('resize', function() {
+    $('#testimonials').slick('unslick');
+    // 变化后需要做的事
+    if (isMobile()) {
+      setSlidesInfo(1);
+    } else {
+      var body = document.getElementsByTagName('body');
+      if (body[0].clientWidth <= 960) {
+        setSlidesInfo(1);
+      } else {
+        setSlidesInfo(3);
+      }
+    }
+  });
 });
+
+
diff --git a/themes/meghna-hugo/layouts/_default/list.html b/themes/meghna-hugo/layouts/_default/list.html
@@ -22,22 +22,6 @@
     </div>
   </div>
 </section>
-<script type="text/javascript">
-  function isMobile() {
-    let flag = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-    return flag;
-  }
-
-  /**
-   * hack 强制修改最小高度
-   * @type {HTMLElement}
-   */
-  var blog = document.getElementById('blog');
-  var clientHeight = blog.clientHeight || ""
-  if (clientHeight < 600) {
-    blog.setAttribute('style', `min-height: ${isMobile() ? 650 : 1000}px`)
-  }
-</script>
 {{"<!-- /blog -->" | safeHTML}}
 
 {{ end }}