j1989m

میخوام یه اسلایدر مثل این داشته باشم

4 پست در این موضوع قرار دارد

سلام

لطفا اسلایدر این سایتو ببینید: https://beyamooz.com

میخوام یه اسلایدر مثل لینک بالا داشته باشم: بطوریکه داخل هراسلاید چند تا عنصر مختلف (آیکون و متن) باشه که با اومدن هراسلاید، هریک از عناصر داخلش با انیمیشن خاصی ظاهر بشن، و با رفتن هراسلاید، عناصر داخلش هم با انیمیشن ناپدید بشن...ضمن اینکه ریسپانسیو و لمسی هم باشه...  ؟ ؟ ؟ ؟ ؟ ؟

در حال حاضر اسلایدر زیر رو با کاروسل ساختم:

https://codepen.io/j1989mah/pen/VzoOmY

جمعا 3 تا اسلاید هست: داخل اسلاید دوم و سوم المان هایی رو قرار دادم... اما میخوام با اومدن و رفتن هراسلاید المان های داخلش با انیمیشن ظاهر و ناپدید بشن...

؟ ؟ ؟ ؟ ؟ ؟

 

0

به اشتراک گذاری این پست


لینک به پست

این اسلایدر که خیلی سادس و پیش پا افتاده . ولی اکثر اسلایدر های حرفه ای وردپرس با افزونه revolution slider ساخته میشن ...

تمام ویژگی هایی هم که میخوایین بلکه بهترشو داره ...

ویرایش شده در توسط vakilp1
1

به اشتراک گذاری این پست


لینک به پست
در 18 ساعت قبل، vakilp1 گفته است :

این اسلایدر که خیلی سادس و پیش پا افتاده . ولی اکثر اسلایدر های حرفه ای وردپرس با افزونه revolution slider ساخته میشن ...

تمام ویژگی هایی هم که میخوایین بلکه بهترشو داره ...

بله میدونم وردپرس برای هرکاری پلاگینای قدرتمندی داره اما منظورم وردپرس نیست...

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط mohammdkhalilii
      با سلام و عرض خسته نباشید به تمامی دوستانم ، سوالی که از خدمتتون داشتم 
      من یه افزونه میخوام که مثل این قسمت وبسایت http://irselfmade.com/ 
      هم توی موبایل و تبلت هم توی دسکتاپ اسلایدر (به قول معروف چرخ فلکی ) افقی باشه 
      ممنونم 

    • توسط hamedgh1373
      سلام اساتید محترم من برای قالبی که طراحی کردم میخواستم منو موبایل ایجاد کنم ولی روی فهرست سایت کلیک که می کنم منو نمایش داده نمیشه ممنون میشم راهنمایی کنید.
      اینام کدهایی که وارد کردم هستن.
       
      کد اچ تی ام ال:
      <a id="menuicon" class="menuicon" href="javascript:void(0);" onclick:"menuclick()">فهرست سایت</a> <div id="mobilemenu" class="mobilemenu"><?php wp_nav_menu( array( 'theme_location' => 'top-menu' ) ); ?></div>  
      کد css:
      @media screen and (min-width:1220px){     .menuicon{         display: none;     } } .mobilemenu{     background: #333;     width: 50%;     position: fixed;     top: 0;     right: -100%;     color: #fff;     height: 100%;     z-index: 200; } .mobilemenu li a{     color: #fff;     line-height: 40px;     padding: 0 20px;     border-bottom: 1px solid #444;     display: block; } .mobilemenu.isopen{     right: 0; }  
       
      کد جاوا اسکریپت:
      function menuclick(){   var x = document.getElementById( "mobilemenu" );   if ( x.className === "mobilemenu" ){     x.className += " isopen";   } else {     x.className = "mobilemenu";   } }  
    • توسط samira127

      من یک اسلایدر زدم با jsولی نمیشه وقتی اسلاید میشه ب صورت scrollو ul  نه اسلایدی اینم کد html

      <div class="col-12 col-md-6 pb-0 pb-md-3 pt-2 pr-md-1">
                          <div id="featured" class="carousel slide carousel" data-ride="carousel">
                              ّ <div id="dots" class="carousel-indicators">
                                  <span class="dot active" data-target="#carousel-example-generic"></span>
                              </div>
                              <div id="slider">
                                  <!--Item slider-->
                                  <?php
                                  $args = array(
                                      'posts_per_page' => 5,
                                      'cat' => 10,
                                  );
                                  $query = new WP_Query($args);
                                  ?>
                                  <?php if ($query->have_posts()) : ?>
                                  <?php $i = 0; ?>
                                  <?php while ($query->have_posts()) : $query->the_post() ?>
                                  <div class="slide active">
                                      <div class="card border-0 rounded-0 text-light overflow zoom">
                                          <div class="position-relative">
                                              <!--thumbnail img-->
                                              <div class="ratio_left-cover-1 image-wrapper overflow">
                                                  <a href="<?php the_permalink(); ?>">
                                                      <?php
                                                              $src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full', false);
                                                              ?>
                                                      <?php the_post_thumbnail("w-100 img-thumbnail mx-auto d-block overflow"); ?>
                                                  </a>
                                              </div>
                                              <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
                                                  <!--title-->
                                                  <a href="<?php the_permalink(); ?>">
                                                      <h2 class="h3 post-title text-white my-1"><?php the_title(); ?></h2>
                                                  </a>
                                                  <!— meta title —>
                                                  <div class="news-meta">
                                                      <span class="news-author">by <a class="text-white font-weight-bold" href="<?php the_permalink(); ?>"><?php the_author(); ?></a></span>
                                                      <span class="news-date"><?php the_time('d‌ F‌ Y'); ?></span>
                                                  </div>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                                  <?php endwhile ?>
                                  <?php endif ?>
                                  <?php wp_reset_postdata(); ?>
                                  <!--end item slider-->
                              </div>
                          </div>
                          <!--end carousel inner-->
                          <!--navigation-->
                          <a class="carousel-control-prev prev" href="#featured" role="button" data-slide="prev">
                              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                              <span class="sr-only">Previous</span>
                          </a>
                          <a class="carousel-control-next next" href="#featured" role="button" data-slide="next">
                              <span class="carousel-control-next-icon" aria-hidden="true"></span>
                              <span class="sr-only">Next</span>
                          </a>
                          <script type="text/javascript">
                          </script>
                      </div>

      اینم کد js

      var slide = document.getElementsByClassName('slide');
      var dot = document.getElementsByClassName('dot');
      var prev = document.querySelector('.prev');
      var next = document.querySelector('.next');
      var n = 0;
      var i;
      function disno(){
          for( i = 0 ; i<slide.length ; i++){
              slide.style.display = 'none';
          }
      }
      function no_active(){
          for( i = 0 ; i<dot.length ; i++){
              dot.classList.remove('active');
          }
      }
      next.addEventListener('click',function(e){
          e.preventDefault();
          n++;
          if( n > slide.length - 1){ // length starts From 1
              n = 0; // Arrays Starts From zero
          }
          disno();
          no_active()
          slide[n].style.display = 'block';
          dot[n].classList.add('active');
      })
      prev.addEventListener('click',function(e){
          e.preventDefault();
          n--;
          if( n < 0){ // length starts From 1
              n = slide.length - 1; // Arrays Starts From zero
          }
          disno();
          no_active()
          slide[n].style.display = 'block';
          dot[n].classList.add('active');
      })
      setInterval(function(){
          n++;
          if( n > slide.length - 1){ // length starts From 1
              n = 0; // Arrays Starts From zero
          }
          disno();
          no_active()
          slide[n].style.display = 'block';
          dot[n].classList.add('active');
      },3000)



    • توسط mahdisarlak
      سلام دوستان من میخوام صفحه ایران مال سایتم رو ایندکس کنم ، اما میگه که این صفحه Mobile-friendly نیست  ، ادرس این صفحه از سایتم https://pastor22.com/wp-content/uploads/cache/2018/12/photo_2018-12-06_08-51-37-1/?MA
      چطور میتونم ارور رو رفع کنم؟

    • توسط ahmad25532
      سلام. این سایت با جوملاست ظاهرا
      http://hamagroup.ir/fa/
      داخل اسلایدرش یه سری خطوط هستند که در حال چرخش هستند. چجوری میتونم همچین چیزی تو سایت وردپرسیم بسازم. قالبم اسلاید رولوشن و لایر اسلایدر رو داره.
       
      ممنون