اضافه سلايد شو احترافي

مرحبا بكم قراء ومتابعين وزوار معلومه بوك سنقوم اليوم بشرح ميزه جميله لاصحاب المدونات وهي سلايد شو احترافيه مكونه من خمس صور تظهر اعلى المدونه او في اي مكان تريده والجميل في هذه الاضافه ان لها تاثيرات رائعه بالاضافه الى انها سهله التركيب

اليكم شرح تركيب الاضافه

نذهب الى التخطيط من لوحه التحكم الخاصه بالمدونه
نقوم باضافة اداه HTML/Javascript جديده
قم بنسخ الكود التالي والصقه في الاداه التي قمت باضافتها

#slider li.firstanimation {
     -moz-animation:cycle 25s linear infinite; 
     -webkit-animation:cycle 25s linear infinite;  
    }
    #slider li.secondanimation {
     -moz-animation:cycletwo 25s linear infinite;
     -webkit-animation:cycletwo 25s linear infinite;  
    }
    #slider li.thirdanimation {
     -moz-animation:cyclethree 25s linear infinite;
     -webkit-animation:cyclethree 25s linear infinite;  
    }
    #slider li.fourthanimation {
     -moz-animation:cyclefour 25s linear infinite;
     -webkit-animation:cyclefour 25s linear infinite;  
    }
    #slider li.fifthanimation {
     -moz-animation:cyclefive 25s linear infinite;
     -webkit-animation:cyclefive 25s linear infinite;  
    }

#slider .tooltip {
     background:rgba(0,0,0,0.7);
     width:300px;
     height:60px;
     position:relative;
     bottom:75px;
     left:-320px;
     -moz-transition:all 0.3s ease-in-out;
     -webkit-transition:all 0.3s ease-in-out;  
    }
    #slider .tooltip h1 {
     color:#fff;
     font-size:24px;
     font-weight:300;
     line-height:60px;
     padding:0 0 0 20px;
    }
    #slider li#first:hover .tooltip, 
    #slider li#second:hover .tooltip, 
    #slider li#third:hover .tooltip, 
    #slider li#fourth:hover .tooltip, 
    #slider li#fifth:hover .tooltip {
     left:0px;
    }

/* PROGRESS BAR */
    .progress-bar { 
     position:relative;
     top:-5px;
     width:680px; 
     height:5px;
     background:#000;
     -moz-animation:fullexpand 25s ease-out infinite;
     -webkit-animation:fullexpand 25s ease-out infinite;
    }
    /* ANIMATION */
    @-moz-keyframes cycle {
     0%  { top:0px; }
     4%  { top:0px; } 
     16% { top:0px; opacity:1; z-index:0; } 
     20% { top:325px; opacity:0; z-index:0; } 
     21% { top:-325px; opacity:0; z-index:-1; }
     92% { top:-325px; opacity:0; z-index:0; }
     96% { top:-325px; opacity:0; }
     100%{ top:0px; opacity:1; }
     
    }
    @-moz-keyframes cycletwo {
     0%  { top:-325px; opacity:0; }
     16% { top:-325px; opacity:0; }
     20% { top:0px; opacity:1; }
     24% { top:0px; opacity:1; } 
     36% { top:0px; opacity:1; z-index:0; } 
     40% { top:325px; opacity:0; z-index:0; }
     41% { top:-325px; opacity:0; z-index:-1; } 
     100%{ top:-325px; opacity:0; z-index:-1; }
    }
    @-moz-keyframes cyclethree {
     0%  { top:-325px; opacity:0; }
     36% { top:-325px; opacity:0; }
     40% { top:0px; opacity:1; }
     44% { top:0px; opacity:1; } 
     56% { top:0px; opacity:1; } 
     60% { top:325px; opacity:0; z-index:0; }
     61% { top:-325px; opacity:0; z-index:-1; } 
     100%{ top:-325px; opacity:0; z-index:-1; }
    }
    @-moz-keyframes cyclefour {
     0%  { top:-325px; opacity:0; }
     56% { top:-325px; opacity:0; }
     60% { top:0px; opacity:1; }
     64% { top:0px; opacity:1; }
     76% { top:0px; opacity:1; z-index:0; }
     80% { top:325px; opacity:0; z-index:0; }
     81% { top:-325px; opacity:0; z-index:-1; }
     100%{ top:-325px; opacity:0; z-index:-1; }
    }
    @-moz-keyframes cyclefive {
     0%  { top:-325px; opacity:0; }
     76% { top:-325px; opacity:0; }
     80% { top:0px; opacity:1; }
     84% { top:0px; opacity:1; }
     96% { top:0px; opacity:1; z-index:0; }
     100%{ top:325px; opacity:0; z-index:0; }
    }

@-webkit-keyframes cycle {
     0%  { top:0px; }
     4%  { top:0px; }
     16% { top:0px; opacity:1; z-index:0; } 
     20% { top:325px; opacity:0; z-index:0; }
     21% { top:-325px; opacity:0; z-index:-1; }
     50% { top:-325px; opacity:0; z-index:-1; }
     92% { top:-325px; opacity:0; z-index:0; }
     96% { top:-325px; opacity:0; }
     100%{ top:0px; opacity:1; }
     
    }
    @-webkit-keyframes cycletwo {
     0%  { top:-325px; opacity:0; }
     16% { top:-325px; opacity:0; }
     20% { top:0px; opacity:1; }
     24% { top:0px; opacity:1; } 
     36% { top:0px; opacity:1; z-index:0; } 
     40% { top:325px; opacity:0; z-index:0; }
     41% { top:-325px; opacity:0; z-index:-1; }  
     100%{ top:-325px; opacity:0; z-index:-1; }
    }
    @-webkit-keyframes cyclethree {
     0%  { top:-325px; opacity:0; }
     36% { top:-325px; opacity:0; }
     40% { top:0px; opacity:1; }
     44% { top:0px; opacity:1; } 
     56% { top:0px; opacity:1; z-index:0; } 
     60% { top:325px; opacity:0; z-index:0; } 
     61% { top:-325px; opacity:0; z-index:-1; }
     100%{ top:-325px; opacity:0; z-index:-1; }
    }
    @-webkit-keyframes cyclefour {
     0%  { top:-325px; opacity:0; }
     56% { top:-325px; opacity:0; }
     60% { top:0px; opacity:1; }
     64% { top:0px; opacity:1; }
     76% { top:0px; opacity:1; z-index:0; }
     80% { top:325px; opacity:0; z-index:0; }
     81% { top:-325px; opacity:0; z-index:-1; }
     100%{ top:-325px; opacity:0; z-index:-1; }
    }
    @-webkit-keyframes cyclefive {
     0%  { top:-325px; opacity:0; }
     76% { top:-325px; opacity:0; }
     80% { top:0px; opacity:1; }
     84% { top:0px; opacity:1; }
     96% { top:0px; opacity:1; z-index:0; }
     100%{ top:325px; opacity:0; z-index:0; }
    }

/* ANIMATION BAR */
    @-moz-keyframes fullexpand {
        0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
        4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
       16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
       17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
       18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } 
    }
    @-webkit-keyframes fullexpand {
        0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
        4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
       16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
       17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
       18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } 
    }
    </style>

<div class="container">
     <div id="content-slider">
         <div id="slider">
             <div id="mask">
                <ul>
<li id="first" class="firstanimation">
                <a href="https://malomabook.blogspo.com/">
                <img src="https://project.dimpost.com/image-slider/images/img_1.jpg" alt="Cougar"/>
                </a>
                <div class="tooltip">
                <h1>
Cougar</h1>
</div>
</li>
<li id="second" class="secondanimation">
                <a href="#">
                <img src="https://project.dimpost.com/image-slider/images/img_2.jpg" alt="Lions"/>
                </a>
                <div class="tooltip">
                <h1>
Lions</h1>
</div>
</li>
<li id="third" class="thirdanimation">
                <a href="#">
                <img src="https://project.dimpost.com/image-slider/images/img_3.jpg" alt="Snowalker"/>
                </a>
                <div class="tooltip">
                <h1>
Snowalker</h1>
</div>
</li>
<li id="fourth" class="fourthanimation">
                <a href="#">
                <img src="https://project.dimpost.com/image-slider/images/img_4.jpg" alt="Howling"/>
                </a>
                <div class="tooltip">
                <h1>
Howling</h1>
</div>
</li>
<li id="fifth" class="fifthanimation">
                <a href="#">
                <img src="https://project.dimpost.com/image-slider/images/img_5.jpg" alt="Sunbathing"/>
                </a>
                <div class="tooltip">
                <h1>
Sunbathing</h1>
</div>
</li>
</ul>
</div>
<div class="progress-bar">
</div>
</div>
</div>
</div>

ملاحظه

لاتنسى تغيير القيم الاتيه في الكود الى ما تريد

ضع رابط الموضوع هنا بـ رابط الموضوع التي تود الانتقال اليه عند النقر على الصوره
ضع رابط الصوره المراد عرضها هنا بــ الصوره المراد عرضها للموضوع
ضع وصف الصوره هنا بــ وصف الصوره الظاهره

رأيك يهمنا فلا تتردد بكتابه مقترحاتك حول الموضوع

لمشاركه الموضوع على صفحتك الاجتماعيه

adsense

اضافه سلايد شو احترافي

اخترنا لك

adsense-side

هذا الاسبوع

التسميات

حول العالم

اسئلة و إجابات

خدمات معلومه بوك

عن الموقع

نموذج الاتصال

انــت الــزائــر رقــم