احل مشكله دى ازاى ؟ ده slideshow ازاى اخلى صور مش تخش فى بعض

ورشات الواجهات الأمامية Frontend أساسيات تطوير واجهات الويب
, , ,
#1

PNG
Capture.PNG.jpg1920×872 185 KB

صور دخله فى بعض

html
<div class="card">
  
  <div class="card_part card_part-one">
  </div>
  
   <!-- Photo 2 -->
  <div class="card_part card_part-two">

  </div>

  <!-- Photo 3 -->
  <div class="card_part card_part-three">
  </div>

  <!-- Photo 4 -->
  <div class="card_part card_part-four">
  </div>

</div>


css
*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  
  width: 100%;
  height: 20%;
  margin: 0;
  padding: 0;

  background-color: #3c3c3c;
}


.card {
  position: relative;
  
  
  width:100%;
  height: 200px;
  overflow: hidden;

  border-radius: 5px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
 
}

/*Light blue cover above the slide show*/
.card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 900;

  display: block;
  width: 100%;
  height: 100%;

  background-color: rgba(140, 22, 115, 0.2);
}

.card_part {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;

  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  
  transform: translateX( 700px );
  background-image:url(../image/pexels-photo-326240.jpeg);
  
  animation: opaqTransition 28s cubic-bezier(0, 0, 0, 0.97) infinite;
    animation-iteration-count: infinite;

}


.card_part.card_part-two {
  z-index: 6;
  background-image:url(../image/pexels-photo-952670.jpeg);
  animation-delay: 7s;
}

.card_part.card_part-three {
  z-index: 5;
  background-image:url(../image/pexels-photo-1308624.jpeg);
  animation-delay: 14s;
}

.card_part.card_part-four {
  z-index: 4;
  background-image:url(../image/pexels-photo-921776.jpeg);
  animation-delay: 21s;
}


@keyframes opaqTransition {
  3% { transform: translateX( 0 ); }
  25% { transform: translateX( 0 ); }
  28% { transform: translateX( -700px ); }
  100% { transform: translateX( -700px ); }
}
5 Likes
#2

@mahmoud123

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Slider</title>
    </head>
    <body>
        
        <style>
        *,
        *::before,
        *::after { box-sizing: border-box; }
        
        html,
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            align-items: center;            
            width: 100%;
            height: 20%;
            margin: 0;
            padding: 0;
            background-color: #3c3c3c;
        }
        
        
        .card {
            position: relative;
            width:100%;
            height: 200px;
            overflow: hidden; 
            border-radius: 5px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
        
        }
        
        /*Light blue cover above the slide show*/
        .card::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            z-index: 900;
            display: block;
            width: 100%;
            height: 100%;
            background-color: rgba(140, 22, 115, 0.2);
        }
        
        .card_part {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            width: 100%;
            height: 100%;
            transform: translateX( 100% );
            animation: opaqTransition 28s cubic-bezier(0, 0, 0, 0.97) infinite;
            animation-iteration-count: infinite;
        }
        
        .card_part.card_part-one {
            background-image:url(https://images.pexels.com/photos/326240/pexels-photo-326240.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
            z-index: 6;
        }
        
        .card_part.card_part-two {
            z-index: 6;
            background-image:url(https://images.pexels.com/photos/952670/pexels-photo-952670.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
            animation-delay: 7s;
        }
        
        .card_part.card_part-three {
            z-index: 5;
            background-image:url(https://images.pexels.com/photos/1308624/pexels-photo-1308624.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=2&h=650&w=940);
            animation-delay: 14s;
        }
        
        .card_part.card_part-four {
            z-index: 4;
            background-image:url(https://images.pexels.com/photos/921776/pexels-photo-921776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
            animation-delay: 21s;
        }
        
        
        @keyframes opaqTransition {
            3% { transform: translateX( 0 ); }
            25% { transform: translateX( 0 ); }
            28% { transform: translateX( -100% ); }
            100% { transform: translateX( -100% ); }
        }
        </style>
        <div class="card">
        
        <div class="card_part card_part-one">
        </div>
        
        <!-- Photo 2 -->
        <div class="card_part card_part-two">
        
        </div>
        
        <!-- Photo 3 -->
        <div class="card_part card_part-three">
        </div>
        
        <!-- Photo 4 -->
        <div class="card_part card_part-four">
        </div>

        </div>
    </body>
</html>
3 Likes
#3

هل بإمكانك توضيح المشكلة فأنا لا أري أي مشكلة؟؟؟؟

4 Likes
#4

السلام عليكم
عذرا @N_Kardan عند إجابتي على سؤال الأخ لم يكن لدي الوقت الكافي لأشرح له ماقمت به
لاحظت أن لديه 4 عناصر div وكل واحد لديه كلاس خاص به
card_part-one, card_part-two, card_part-three, card_part-four

ويشتركان في كلاس آخر card_part
لاحظت أيضا أن الصورة تستدعى على أنها background في كل من الكلاسات الخاصة إلا بالنسبة لعنصر div الأول فإنها تستدعى من الكلاس المشترك

.card_part {
 
  background-image:url(../image/pexels-photo-326240.jpeg);
  
}

بينما بقية العناصر تطبق فيها هذه القواعد منفصلة في الكلاسات الخاصة، لذا حفاظا على ماقام به حددت الكلاس الذي يستهدف العنصر الأول ونقلت خاصية background داخله
وغيرت أيضا animation بحيث تكون الحركة نسبية كاملة

 @keyframes opaqTransition {
            3% { transform: translateX( 0 ); }
            25% { transform: translateX( 0 ); }
            28% { transform: translateX( -100% ); } // هنا
            100% { transform: translateX( -100% ); } // وهنا
        }
3 Likes