2012-09-19 7 views
8

मैंने वर्डप्रेस पर एक टेम्पलेट स्थापित किया जिसमें फ्लेक्सस्लाइडर शामिल है। मेरी भाषा राइट-टू-बाएं (आरटीएल) लिखा गया है। जब पृष्ठ आरटीएल होता है, तो फ्लेक्सस्लाइडर बंद हो जाता है और कोई छवि दिखाई नहीं देती है। मेरे द्वारा इस समस्या का समाधान कैसे किया जा सकता है?फ्लेक्सस्लाइडर और राइट-टू-बाएं भाषा समर्थन

उत्तर

11

फ्लेक्स स्लाइडर आरटीएल भाषाओं का समर्थन नहीं करता है। इसे ठीक करने के लिए एक ही रास्ता div, स्लाइडर direction: ltr

  1. पकड़े अपने विषय पर यदि मुख पृष्ठ पर स्लाइडर यह सब एक फ़ाइल index.php कहा जाता है लगता है div कि स्लाइडर पकड़े है खोजने के लिए और बनाने के लिए है कोड style="direction:ltr;" इस slier पर अपने लेख को प्रदर्शित करेगा पूरी तरह से

  2. rtl से पाठ दिशा ठीक करने के लिए एक फ़ाइल (मेरे लिए लाइन # 25) पकड़े कोड .flexslider .slides > li{ अपने विषय पर और लाइन पर flexslider.css कहा जाता है लगता है इस ऐड :
    text-align:right;
    direction:rtl;

ये टॉव चरणों ने इसे मेरे लिए तय किया। शुभकामनाएं

8

फतमा का जवाब मेरे लिए काम नहीं करता है। क्या काम करता है direction: ltr की स्थापना करके .flex-viewport संशोधित है:

.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; direction: ltr; } 
+0

वोला! फतमा का जवाब मेरे लिए काम नहीं करता था, लेकिन यह एक चाल है। धन्यवाद! – tmt

+0

मेरे द्वारा +1 धन्यवाद –

1

दिशात्मक नेविगेशन ठीक करने के लिए, अपने खुद के स्टाइलशीट में इन नियमों flexslider नियमों को ओवरराइड करना चाहिए:

/* Flexslider RTL */ 
.flex-direction-nav .flex-next {background-position: 0 0; left: -36px; right: auto;} 
.flex-direction-nav .flex-prev {background-position: 100% 0; right: -36px; left: auto;} 
.flexslider:hover .flex-next {left: 5px; right: auto;} 
.flexslider:hover .flex-prev {right: 5px; left: auto;} 
@media screen and (max-width: 860px) { 
    .flex-direction-nav .flex-prev {opacity: 1; right: 0; left: auto;} 
    .flex-direction-nav .flex-next {opacity: 1; left: 0; right: auto;} 
} 
2

आप इसके लिए दोनों जे एस और सीएसएस बदलने की जरूरत है काम करने के लिए। सौभाग्य से इसे ज्यादा काम की आवश्यकता नहीं थी। मैंने परियोजना को फोर्क किया और https://github.com/layalk/FlexSlider/tree/rtl पर समर्थन जोड़ा। कोशिश करो।

0

मैंने reverse:true,flexslider() फ़ंक्शन में उपयोग किया और स्लाइडर डिफ़ॉल्ट से विपरीत दिशा में काम करता था।

और

.flexslider .slides li{ 
    direction: ltr; 
} 

यह मेरे लिए काम किया।

संबंधित मुद्दे