رفتن به مطلب

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


پست های پیشنهاد شده

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

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

سلام

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

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

http://slippry.com/

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

سلام

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

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

http://slippry.com/

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

لینک به ارسال

سلام

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

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

لینک به ارسال
در 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>

 

ویرایش شده توسط cherry
لینک به ارسال
در 23 ساعت قبل، Mohammad1 گفته است :

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

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

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

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

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

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

ویرایش شده توسط soma
لینک به ارسال
در در 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>

 

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

ویرایش شده توسط Mohammad1
لینک به ارسال
در 15 دقیقه قبل، Mohammad1 گفته است :

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

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

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...