ساخت اسلایدر مثل همیاروردپرس

[Mohammd 2]

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

[cherry 390]

در ۱ ساعت قبل، Mohammad1 گفته است :

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

سلام

پیشنهاد میکنم از این 2 اسلایدر استفاده کنید البته owl بهترینه

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

http://slippry.com/

[Mohammd 2]

در 23 ساعت قبل، cherry گفته است :

سلام

پیشنهاد میکنم از این 2 اسلایدر استفاده کنید البته owl بهترینه

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

http://slippry.com/

چطوری باید ازowlاستفاده کرد؟

[mohama226 44]

کد های اسلایدر که مدنظرتونه میتونید از روی همون سایت کپی کنید

[poshenama 145]

سلام

می تونید با استفاده از crtl+u کد های سایت همیار وردپرس رو کپی کنید و المنت هاشو تغییر بدید و در سایتتون استفاده کنید

یا با استفاده از inspect گوگل کروم

[cherry 390]

در 6 ساعت قبل، poshenama گفته است :

سلام

می تونید با استفاده از crtl+u کد های سایت همیار وردپرس رو کپی کنید و المنت هاشو تغییر بدید و در سایتتون استفاده کنید

یا با استفاده از inspect گوگل کروم

ممنون که دوستمون رو راهنمایی کردین

@Mohammad1

نظر شخصی : اینکار روش صحیحی نیست و احتمال خطای زیادی وجود داره و در نهایت نتیجه مناسبی دریافت نمیکنید

روش استفاده از owl :

ابتدا فایل ها رو از وبسایت اصلی دانلود کنید

کد های زیر رو در هدر head وبسایت جایگذاری کنید

آدرس دهی شده با توابع وردپرس و،نیازی به ایجاد تغییرات توسط شما نیست

<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/css/owl.carousel.min.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/css/owl.theme.default.min.css">
<script src="<?php echo get_template_directory_uri() ?>/js/owl.carousel.min.js"></script>

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

<div class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>
<script>
$(document).ready(function(){
    jQuery('.owl-carousel').owlCarousel({
        items: 1,
        lazyLoad: true,
        loop: false,
        margin: 0,
        nav: false,
        rtl: true,
        autoplay: true,
        autoplayTimeout: 8000,
        autoplayHoverPause: true,
        responsiveClass: true,
        responsive: {
            0: {
                items: 1,
                nav: false
            },
            600: {
                items: 1,
                nav: false
            },
            1000: {
                items: 1,
                nav: false,
            },
            1200: {
                items: 1,
                nav: false,
            }
        }
    });});
</script>

 

ویرایش شده اردیبهشت 98 توسط cherry

[soma 63]

در 23 ساعت قبل، Mohammad1 گفته است :

چطوری باید ازowlاستفاده کرد؟

همونطور که  @cherry  گفتن owl برای اسلایدر عالی هست ، سایت همیار هم از همین اسلاید استفاده کرده ، مستندات این اسلایدر قوی رو میتونید در سایتش بخونید 

https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html

خیلی پیچیدگی نداره اگر به css و html اشنا باشید 

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

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

ویرایش شده اردیبهشت 98 توسط soma

[Mohammd 2]

در در 4/30/2019 at 23:12، cherry گفته است :

ممنون که دوستمون رو راهنمایی کردین

@Mohammad1

نظر شخصی : اینکار روش صحیحی نیست و احتمال خطای زیادی وجود داره و در نهایت نتیجه مناسبی دریافت نمیکنید

روش استفاده از owl :

ابتدا فایل ها رو از وبسایت اصلی دانلود کنید

کد های زیر رو در هدر head وبسایت جایگذاری کنید

آدرس دهی شده با توابع وردپرس و،نیازی به ایجاد تغییرات توسط شما نیست

<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/css/owl.carousel.min.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/css/owl.theme.default.min.css">
<script src="<?php echo get_template_directory_uri() ?>/js/owl.carousel.min.js"></script>

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

<div class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>
<script>
$(document).ready(function(){
    jQuery('.owl-carousel').owlCarousel({
        items: 1,
        lazyLoad: true,
        loop: false,
        margin: 0,
        nav: false,
        rtl: true,
        autoplay: true,
        autoplayTimeout: 8000,
        autoplayHoverPause: true,
        responsiveClass: true,
        responsive: {
            0: {
                items: 1,
                nav: false
            },
            600: {
                items: 1,
                nav: false
            },
            1000: {
                items: 1,
                nav: false,
            },
            1200: {
                items: 1,
                nav: false,
            }
        }
    });});
</script>

 

کارایی روکه گفتید انجام دادم ولی عمل نکرد

ویرایش شده اردیبهشت 98 توسط Mohammad1

[cherry 390]

در 15 دقیقه قبل، Mohammad1 گفته است :

کارایی روکه گفتید انجام دادم ولی عمل نکرد

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