تعديل مظهر الصورة الكبيرة والعنوان عند تحرك swiper

هل من مساعدة 

بخصوص أكواد sass جرب تعديل الكود بالشكل التالي:

.card-news-details {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
  position: relative;
  left: -50%; /* الوضعية الابتدائية: يتم نقلها إلى اليسار */
  opacity: 1;
  transition: left 1s, opacity 1s;
  
  &.show {
    left: 0; /* الوضعية النهائية: يتم نقلها إلى الوسط */
    opacity: 1;
  }

  .card-news-card {
    width: 80%;
    position: relative;

    .img-active_profile {
      width: 100%; /* العرض الابتدائي: 100٪ */
      height: 600px;
      border-top-left-radius: $radius;
      border-bottom-left-radius: $radius;
      max-height: 600px;
      object-fit: cover;
      box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.408);
      opacity: 1;
      transition: width 1s, opacity 1s;
     
      &.show_img {
        width: 40%; /* العرض النهائي: 40٪ */
        opacity: 1;
      }
    }

    .title_slide-full {
      position: absolute;
      top: 15px;
      left: 45%;
      font-size: 45px;
      opacity: 0; /* مخفية في البداية */
      transition: all 2s;
      
      &.show_title {
        opacity: 1; /* إظهار العنوان */
      }
    }
  }
}

والكود يعمل على جعل الصورة الكبيرة المرغوبة تنتقل من -50٪ left إلى left: 0٪، وعندما تكون الصورة في الوضعية left: 0٪، ستصبح عرض الصورة 100٪ والعنوان مخفيًا، ثم عندما تتقلص الصورة إلى عرض 40٪، سيظهر العنوان.

بتاريخ منذ ساعة مضت قال Mustafa Suleiman:

بخصوص أكواد sass جرب تعديل الكود بالشكل التالي:

.card-news-details {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
  position: relative;
  left: -50%; /* الوضعية الابتدائية: يتم نقلها إلى اليسار */
  opacity: 1;
  transition: left 1s, opacity 1s;
  
  &.show {
    left: 0; /* الوضعية النهائية: يتم نقلها إلى الوسط */
    opacity: 1;
  }

  .card-news-card {
    width: 80%;
    position: relative;

    .img-active_profile {
      width: 100%; /* العرض الابتدائي: 100٪ */
      height: 600px;
      border-top-left-radius: $radius;
      border-bottom-left-radius: $radius;
      max-height: 600px;
      object-fit: cover;
      box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.408);
      opacity: 1;
      transition: width 1s, opacity 1s;
     
      &.show_img {
        width: 40%; /* العرض النهائي: 40٪ */
        opacity: 1;
      }
    }

    .title_slide-full {
      position: absolute;
      top: 15px;
      left: 45%;
      font-size: 45px;
      opacity: 0; /* مخفية في البداية */
      transition: all 2s;
      
      &.show_title {
        opacity: 1; /* إظهار العنوان */
      }
    }
  }
}

والكود يعمل على جعل الصورة الكبيرة المرغوبة تنتقل من -50٪ left إلى left: 0٪، وعندما تكون الصورة في الوضعية left: 0٪، ستصبح عرض الصورة 100٪ والعنوان مخفيًا، ثم عندما تتقلص الصورة إلى عرض 40٪، سيظهر العنوان.

لقد جربت هدا مسبقا 

ما يحصل هو ان الصورة تاتي ب left 0و هي في حالة 40% وليس 100% تم تنتظر 1s or 2s وتصبح 40% 

نفس الشيء بالنسبة للعنوان

بتاريخ On 12‏/6‏/2023 at 18:36 قال Mohamed Boumlik:

لقد جربت هدا مسبقا 

ما يحصل هو ان الصورة تاتي ب left 0و هي في حالة 40% وليس 100% تم تنتظر 1s or 2s وتصبح 40% 

نفس الشيء بالنسبة للعنوان

لقد حللت المشكلة بanimation