1234

themes/modern2/assets/css/main.css

@@ -1188,6 +1188,16 @@ li {
   overflow: hidden;
   position: relative;
   height: 40px;
+  background: #00822c;
+}
+.marquee__item {
+  margin: 0 50px;
+}
+.marquee__item p {
+  color: #fff;
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 400;
 }
 .marquee::after {
   position: absolute;
@@ -1205,7 +1215,7 @@ li {
   left: 0;
   width: 120px;
   height: 100%;
-  background: #00822c;
+  background: #ee4037;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1219,7 +1229,7 @@ li {
 .marquee__link::before {
   -webkit-clip-path: polygon(100% 46%, 0 0, 0 100%);
           clip-path: polygon(100% 46%, 0 0, 0 100%);
-  background: #00822c;
+  background: #ee4037;
   position: absolute;
   top: 0;
   left: 100%;
@@ -1232,24 +1242,6 @@ li {
   overflow: hidden;
 }
 
-.marquee div {
-  display: block;
-  width: 400%;
-  height: 30px;
-  position: absolute;
-  overflow: hidden;
-  animation: marquee 25s linear infinite;
-}
-
-.marquee span {
-  float: left;
-  width: 25%;
-  font-size: 14px;
-  line-height: 40px;
-  font-weight: 400;
-  color: #000;
-}
-
 @keyframes marquee {
   0% {
     left: 0;

themes/modern2/assets/js/main.js

@@ -44,7 +44,20 @@ $(".newsSlider").slick({
         },
     ],
 });
-
+$(".marquee").slick({
+    speed: 8000,
+    autoplay: true,
+    autoplaySpeed: 0,
+    centerMode: true,
+    cssEase: "linear",
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    variableWidth: true,
+    infinite: true,
+    initialSlide: 1,
+    arrows: false,
+    buttons: false,
+});
 // lazyload start
 // =============================================
 if (