gythjk

themes/modern2/assets/css/components/3-page/home.scss

@@ -4,6 +4,16 @@
     overflow: hidden;
     position: relative;
     height: 40px;
+    background: #00822c;
+    &__item {
+        margin: 0 50px;
+        p {
+            color: #fff;
+            font-size: 16px;
+            line-height: 20px;
+            font-weight: 400;
+        }
+    }
     &::after {
         position: absolute;
         right: 0;
@@ -24,7 +34,7 @@
         left: 0;
         width: 120px;
         height: 100%;
-        background: #00822c;
+        background: #ee4037;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -36,7 +46,7 @@
         text-transform: uppercase;
         &::before {
             clip-path: polygon(100% 46%, 0 0, 0 100%);
-            background: #00822c;
+            background: #ee4037;
             position: absolute;
             top: 0;
             left: 100%;
@@ -51,23 +61,6 @@
         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: $text-black;
-}
 
 @keyframes marquee {
     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 (
@@ -125,4 +138,3 @@ if (
     );
 // lazyload end
 // =============================================
-

themes/modern2/partials/slider.htm

@@ -12,7 +12,7 @@ postPage = "post"
     <a href="#" class="marquee__link">
         Главное
     </a>
-    <div>{% for post in posts %} <span>{{post.title}}</span> {% endfor %}</div>
+    <div class="marquee__item">{% for post in posts %} <p>{{post.title}}</p> {% endfor %}</div>
 </div>
 <div class="swiper-container mySwiper">
     <div class="swiper-wrapper">