mohammdkhalilii

افزونه اسلایدر محصولات و پست ها

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

با سلام و عرض خسته نباشید به تمامی دوستانم ، سوالی که از خدمتتون داشتم 

من یه افزونه میخوام که مثل این قسمت وبسایت http://irselfmade.com/ 

هم توی موبایل و تبلت هم توی دسکتاپ اسلایدر (به قول معروف چرخ فلکی ) افقی باشه 

ممنونم :)

Capture.PNG

0

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


لینک به پست

سلام

به انجمن خوش اومدین دوست عزیز

افزونه‌های carousel رو جستجو کنین.

1

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


لینک به پست
در در 11/18/2019 at 22:23، Morteza گفته است :

سلام

به انجمن خوش اومدین دوست عزیز

افزونه‌های carousel رو جستجو کنین.

سلام ممنونم

من 1 هفته هر روز داشتم به زبان های مختلف سرچ میکرد اما چیزی که میخوام نبود ، مشتری من هم فقط همین مدل رو میخواد 

سایت irselfmade.com رو اسکن کردم و فقط 2 افزونه هستند که امکان داره این اسلایدر رو ساخته باشن : یکی ویژوال کامپوزر - یکی آلتیمیت شورت کد

که باز هم با جفتش مشکل اساسی داشتم و اسلایدر کامل نبود 

ممنون میشم راهنمایی کنید بیش از یک ماه هست سایتشون آمادس گیر این یه تیکه اس:)

0

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


لینک به پست

موردی که در سایت فوق استفاده شده owl-carousel هست.

اسلایدر اصلی:

https://owlcarousel2.github.io/OwlCarousel2/

افزونه وردپرس:

https://wordpress.org/plugins/lgx-owl-carousel/

https://wordpress.org/plugins/owl-carousel-wp/

 

در سایت مدنظر شما فقط بهش کمی استایل داده شده.

0

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط 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)



    • توسط فرهاد
      سلام و عرض ادب خدمت همه دوستان وردپرسی
       
      داشتم یه قالب مینوشتم که متاسفانه به یه مشکلی بر خوردم که نتونستم حل کنمش
       
      برای صفحه ای از سایت نیاز است که آخرین محصولات وکامرس رو کوئری بگیریم و نمایش بدیم
      قالب با بوت استرپ نوشته شده و خواستم از پلاگین carousel بوت استرپ استفاده کنم
      اما مشکل اینجاست که فقط تونستم برای نمایش یک محصول بنویسم
      اما من نیاز دام که چرخش برای هر 4 محصول یکبار اکشن بشه
       
      قبلا با carousel WOW استفاده میکردم اما الان نیاز هست که قالب خیلی سبک باشه و مجبورم از قابلیت های بوت استرپ استفاده کنم
      لطفا کدی در  زیر قرار میدم رو ببینید و جوری اصلاح کنید که 4 محصول نمایش داده بشه و بعد با اجرای carousel فقط یک محصول بچرخد مثل سایت های فروشگاهی 
       
      <div class="row"> <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <?php $params = array('posts_per_page' => 12, 'post_type' => 'product'); $wc_query = new WP_Query($params); ?> <?php if ($wc_query->have_posts()) : ?> <?php while ($wc_query->have_posts()) : $wc_query->the_post(); ?> <div class="carousel-item <?php echo 'item '; if ($i == 1) { echo 'active'; }?>"><div class="col-md-20"> <a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail( 'shop_catalog' ); ?> </a> <div class="margin-top-10"> <a href="<?php the_permalink(); ?>"> <h4> <?php the_title(); ?> </h4> </a> <p> <?php $product = new WC_Product(get_the_ID()); echo wc_price($product->get_regular_price()); echo wc_price($product->get_sale_price()); $product = get_product(get_the_ID()); ?> </p> </div> </div> </div> <?php $i++; endwhile; ?> <?php wp_reset_postdata(); ?> <?php endif; ?> </div> </div> </div>  
       
      چیزی که در ذهن من هست :
       

    • توسط فرهاد
      سلام و عرض ادب خدمت همه دوستان وردپرسی
       
      داشتم یه قالب مینوشتم که متاسفانه به یه مشکلی بر خوردم که نتونستم حل کنمش
       
      برای صفحه ای از سایت نیاز است که آخرین محصولات وکامرس رو کوئری بگیریم و نمایش بدیم
      قالب با بوت استرپ نوشته شده و خواستم از پلاگین carousel بوت استرپ استفاده کنم
      اما مشکل اینجاست که فقط تونستم برای نمایش یک محصول بنویسم
      اما من نیاز دام که چرخش برای هر 4 محصول یکبار اکشن بشه
       
      قبلا با carousel WOW استفاده میکردم اما الان نیاز هست که قالب خیلی سبک باشه و مجبورم از قابلیت های بوت استرپ استفاده کنم
      لطفا کدی در  زیر قرار میدم رو ببینید و جوری اصلاح کنید که 4 محصول نمایش داده بشه و بعد با اجرای carousel فقط یک محصول بچرخد مثل سایت های فروشگاهی 
       
      <div class="row"> <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <?php $params = array('posts_per_page' => 12, 'post_type' => 'product'); $wc_query = new WP_Query($params); ?> <?php if ($wc_query->have_posts()) : ?> <?php while ($wc_query->have_posts()) : $wc_query->the_post(); ?> <div class="carousel-item <?php echo 'item '; if ($i == 1) { echo 'active'; }?>"><div class="col-md-20"> <a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail( 'shop_catalog' ); ?> </a> <div class="margin-top-10"> <a href="<?php the_permalink(); ?>"> <h4> <?php the_title(); ?> </h4> </a> <p> <?php $product = new WC_Product(get_the_ID()); echo wc_price($product->get_regular_price()); echo wc_price($product->get_sale_price()); $product = get_product(get_the_ID()); ?> </p> </div> </div> </div> <?php $i++; endwhile; ?> <?php wp_reset_postdata(); ?> <?php endif; ?> </div> </div> </div>  
      چیزی که در ذهن من هست :

    • توسط naderi
      سلام دوستان .. وقتتون بخیر باشه
      من میخوام یه تب بندی محصولات بزنم که توی هر تب محصولات یه دسته به شکل اسلایدر(carousel ) نمایش داده بشه ، یه تب هم برای نمایش "همه" داشته باشم ..
      افزونه ای هست که معرفی کنید بتونم اینکارو باهاش انجام بدم؟
      خود ویجت تب ویژوال کامپوزر رو تست کردم ولی با اون افزونه ای که محصولات رو به شکل اسلایدر نشون میده سازگاری نداره و درست نمایش نمیده
      ممنون میشم کمک کنید
    • توسط ahmad25532
      سلام. این سایت با جوملاست ظاهرا
      http://hamagroup.ir/fa/
      داخل اسلایدرش یه سری خطوط هستند که در حال چرخش هستند. چجوری میتونم همچین چیزی تو سایت وردپرسیم بسازم. قالبم اسلاید رولوشن و لایر اسلایدر رو داره.
       
      ممنون