راکت

مشکل در رسپانسیو عکس اسلایدر

6 پاسخ

سلام وقت بخیر
من از اسلایدری استفاده می کنم (از کتابخانه REVOLUTION SLIDER 5.4.1) تنها مشکل این اسلایدر تو نشون دادن عکس های اسلایدر هست.عکس هایی که نسبت ارتفاع به عرضشون زیاد باشه در حالت موبایل کامل نشون میده و حالت دسک تاب به هم میریزه و برعکس.هر کاری می کنم درست نمیشه.لطفا کمک کنید.

                                <li data-index="rs-1000" data-transition="slidingoverlayhorizontal"
                                    data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off"
                                    data-easein="default" data-easeout="default" data-masterspeed="default"
                                    data-thumb="images/main-slider/slider3/slide1.jpg" data-rotate="0"
                                    data-saveperformance="off" data-title="Slide" data-param1="" data-param2=""
                                    data-param3="" data-param4="" data-param5="" data-param6="" data-param7=""
                                    data-param8="" data-param9="" data-param10="" data-description="">
                                    <!-- MAIN IMAGE -->
                                    <img src="images/main-slider/slider3/s/wolf2.jpg" alt=""
                                         data-bgposition="bottom bottom" data-bgfit="cover" data-bgrepeat="no-repeat"
                                         class="rev-slidebg" data-no-retina/>
                                    <!-- LAYERS -->
                                    <!-- LAYER NR. 1 [ for overlay ] -->
                                    <div class="tp-caption tp-shape tp-shapewrapper "
                                         id="slide-100-layer-1"
                                         data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                                         data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
                                         data-width="full"
                                         data-height="full"
                                         data-whitespace="nowrap"
                                         data-type="shape"
                                         data-basealign="slide"
                                         data-responsive_offset="off"
                                         data-responsive="off"
                                         data-frames='[
                                    {"from":"opacity:0;","speed":1000,"to":"o:1;","delay":0,"ease":"Power4.easeOut"},
                                    {"delay":"wait","speed":1000,"to":"opacity:0;","ease":"Power4.easeOut"}
                                    ]'
                                         data-textAlign="['right','right','right','right']"
                                         data-paddingtop="[0,0,0,0]"
                                         data-paddingright="[0,0,0,0]"
                                         data-paddingbottom="[0,0,0,0]"
                                         data-paddingleft="[0,0,0,0]"

                                         style="z-index: 12;background-color:rgba(0, 0, 0, 0.7);border-color:rgba(0, 0, 0, 0);border-width:0px;">
                                    </div>
                                    <!-- LAYER NR. 3 [ for title ] -->
                                    <div class="tp-caption   tp-resizeme"
                                         id="slide-100-layer-3"
                                         data-x="['right','right','right','center']" data-hoffset="['50','50','50','0']"
                                         data-y="['top','top','top','top']" data-voffset="['260','260','260','260']"
                                         data-fontsize="['40','40','40','30']"
                                         data-lineheight="['60','60','60','65']"
                                         data-width="['700','700','700','700']"
                                         data-height="['none','none','none','none']"
                                         data-whitespace="['normal','normal','normal','normal']"
                                         data-type="text"
                                         data-responsive_offset="on"
                                         data-frames='[
                                    {"from":"y:100px(R);opacity:0;","speed":2000,"to":"o:1;","delay":500,"ease":"Power4.easeOut"},
                                    {"delay":"wait","speed":1000,"to":"y:-50px;opacity:0;","ease":"Power2.easeInOut"}
                                    ]'
                                         data-textAlign="['right','right','right','center']"
                                         data-paddingtop="[0,0,0,0]"
                                         data-paddingright="[0,0,0,0]"
                                         data-paddingbottom="[0,0,0,0]"
                                         data-paddingleft="[0,0,0,0]"
                                         style="z-index: 13;
                                    white-space: normal; 
                                    font-weight: 300;
                                    color: rgb(75, 57, 65);
                                    border-width:0px;">
                                        <div style="font-family: 'IRANSansWeb', sans-serif;">
                                            <span class="text-white">الگوی خلاق</span>
                                        </div>
                                    </div>
                                    <!-- LAYER NR. 4 [ for title ] -->
                                    <div class="tp-caption   tp-resizeme"
                                         id="slide-100-layer-4"
                                         data-x="['right','right','right','center']" data-hoffset="['50','50','50','0']"
                                         data-y="['top','top','top','top']" data-voffset="['320','320','320','340']"
                                         data-fontsize="['53','53','53','34']"
                                         data-lineheight="['70','70','70','40']"
                                         data-width="['700','700','700','96%']"
                                         data-height="['none','none','none','none']"
                                         data-whitespace="['normal','normal','normal','normal']"
                                         data-type="text"
                                         data-responsive_offset="on"
                                         data-frames='[
                                    {"from":"y:100px(R);opacity:0;","speed":2000,"to":"o:1;","delay":1000,"ease":"Power4.easeOut"},
                                    {"delay":"wait","speed":1000,"to":"y:-50px;opacity:0;","ease":"Power2.easeInOut"}
                                    ]'
                                         data-textAlign="['right','right','right','center']"
                                         data-paddingtop="[0,0,0,0]"
                                         data-paddingright="[0,0,0,0]"
                                         data-paddingbottom="[0,0,0,0]"
                                         data-paddingleft="[0,0,0,0]"
                                         style="z-index: 13;
                                    white-space: normal; 
                                    font-weight: 700;
                                    border-width:0px;">
                                        <div style="font-family: 'IRANSansWeb', sans-serif; text-transform:uppercase ;">
                                            <span class="text-white"> سایت تبلیغاتی شما</span>
                                        </div>
                                    </div>
                                    <!-- LAYER NR. 5 [ for paragraph] -->
                                    <div class="tp-caption  tp-resizeme"
                                         id="slide-100-layer-5"
                                         data-x="['right','right','right','center']" data-hoffset="['50','50','50','0']"
                                         data-y="['top','top','top','top']" data-voffset="['400','400','400','400']"
                                         data-fontsize="['16','16','16','16']"
                                         data-lineheight="['30','30','30','30']"
                                         data-width="['600','600','600','96%']"
                                         data-height="['none','none','none','none']"
                                         data-whitespace="['normal','normal','normal','normal']"
                                         data-type="text"
                                         data-responsive_offset="on"
                                         data-frames='[
                                    {"from":"y:100px(R);opacity:0;","speed":2000,"to":"o:1;","delay":1500,"ease":"Power4.easeOut"},
                                    {"delay":"wait","speed":1000,"to":"y:-50px;opacity:0;","ease":"Power2.easeInOut"}
                                    ]'
                                         data-textAlign="['right','right','right','center']"
                                         data-paddingtop="[0,0,0,0]"
                                         data-paddingright="[0,0,0,0]"
                                         data-paddingbottom="[0,0,0,0]"
                                         data-paddingleft="[0,0,0,0]"
                                         style="z-index: 13;
                                    font-weight: 500; 
                                    color:#fff;
                                    border-width:0px;">
                                        <span style="font-family: 'IRANSansWeb', sans-serif;">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</span>
                                    </div>
                                    <!-- LAYER NR. 6 [ for see all service botton ] -->
                                    <div class="tp-caption tp-resizeme"
                                         id="slide-100-layer-6"
                                         data-x="['right','right','right','center']" data-hoffset="['50','50','50','0']"
                                         data-y="['top','top','top','top']" data-voffset="['490','490','490','490']"
                                         data-lineheight="['none','none','none','none']"
                                         data-width="['300','300','300','300']"
                                         data-height="['none','none','none','none']"
                                         data-whitespace="['normal','normal','normal','normal']"
                                         data-type="text"
                                         data-responsive_offset="on"
                                         data-frames='[
                                    {"from":"y:100px(R);opacity:0;","speed":2000,"to":"o:1;","delay":2000,"ease":"Power4.easeOut"},
                                    {"delay":"wait","speed":1000,"to":"y:-50px;opacity:0;","ease":"Power2.easeInOut"}
                                    ]'
                                         data-textAlign="['right','right','right','center']"
                                         data-paddingtop="[0,0,0,0]"
                                         data-paddingright="[0,0,0,0]"
                                         data-paddingbottom="[0,0,0,0]"
                                         data-paddingleft="[0,0,0,0]"
                                         style="z-index:13; text-transform:uppercase;">
                                        <a href="javascript:;" class="site-button-secondry slider-btn-left">تماس با
                                            ما</a>
                                    </div>
                                </li>

https://uupload.ir/files/ntp1_1.png
https://uupload.ir/files/aqrk_2.png

ثبت پرسش جدید

پاسخ‌ها

6
میلاد-م
میلاد-م
@milad

تخصص: توسعه‌دهنده رابط کاربری - Front-End

این رو بررسی کنید، ببینید راهگشا هستش براتون:
https://www.youtube.com/watch?v=19TldWv_yqg

malina
malina
@malinacortova

نه داره واسه وورد پرس توضیح میده من از تمپلیت html استفاده می کنم.
فقط اگ بتونم اون زوم از بین ببرم مشکلم تقریبا حل میشه

شاید پاسخ شما همین‌جا باشد

میلاد-م
میلاد-م
@milad

تخصص: توسعه‌دهنده رابط کاربری - Front-End

فکر کردم همون نمایشگر مشهور وردپرسی رو می گید.

لطفا پیوندی از کتابخانه ای که میگید رو قرار بدین تا بتونم بررسی کنم.

malina
malina
@malinacortova

کد اسلایدر که بالا گذاشتم اینم از کتابخونه اش
https://uupload.ir/view/wsaq_revolution.zip/

میلاد-م
میلاد-م
@milad

تخصص: توسعه‌دهنده رابط کاربری - Front-End

سلام دوباره
فکر می کنم این فایلی که به من دادید ناقص هستش و یک سری از فایل ها رو شامل نمیشه.
لطفا فایل کامل رو قرار بدین. من نمی تونم از این نمایشگر استفاده کنم.

میلاد-م
میلاد-م
@milad

تخصص: توسعه‌دهنده رابط کاربری - Front-End

سعی کردم مستندات این نمایشگر رو هم بررسی کنم، این دو صفحه می تونه برای شما مفید باشه:
https://www.themepunch.com/revsliderjquery-doc/anatomy-basic-slider/
https://www.themepunch.com/revsliderjquery-doc/responsive-setup-2/

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

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام