अपरिभाषित ऊंचाई वाले छवियों का स्लाइडर

Question

मैं छवियों (पिछला/अगला) का एक स्लाइडर बनाने की कोशिश कर रहा हूं, इसलिए जब मैं "पिछला" क्लिक करता हूं और दाईं ओर क्लिक करता हूं तो जब मैं 0.5 के साथ "अगला" क्लिक करता हूं धीमेपन के, तो यह कुछ एनीमेशन लेता है। और जब मैं आखिरी छवि तक पहुंचता हूं और "अगला" पर क्लिक करता हूं, तो मैं छवियों को पहले के लिए "पीछे की तरफ" चलाने के लिए चाहता हूं, वैसे ही जब मैं पहले में हूं और "पिछला" क्लिक करता हूं, तो यह "आगे बढ़ता है" आखरी।

मुझे वही व्यवहार this JSFiddle शो चाहिए। (लेकिन मुझे छवियों को स्वचालित रूप से स्थानांतरित करने के लिए टाइमर की आवश्यकता नहीं है और "ट्रिगर" बटन की आवश्यकता नहीं है, केवल "पिछला" और "अगला")।

समस्या यह है कि मेरी छवियों का निश्चित आकार नहीं है। मैं प्रतिशत में चौड़ाई परिभाषित करता हूं और ऊंचाई को परिभाषित नहीं कर सकता क्योंकि मेरे पास उत्तरदायी डिज़ाइन है, छवि का आकार बदलता है क्योंकि मैं ब्राउज़र विंडो का आकार बदलता हूं।

पिछले/अगले कार्यों के लिए jQuery बहुत आसान है, लेकिन जब मैं अपनी छवियों में "सक्रिय" वर्ग को हटा/जोड़ता हूं तो मुझे इस एनीमेशन को जोड़ने का कोई तरीका नहीं मिल रहा है (इसलिए वे दिखाई देते हैं या नहीं)।

मैंने पहले से ही सभी छवियों को एक तरफ डालने की कोशिश की है और केवल पहला दिखा रहा है (कंटेनर चौड़ाई को छवि चौड़ाई के बराबर सेट करना), इसलिए जब मैं "अगला" पर क्लिक करता हूं तो मैं बस कंटेनर को बाईं ओर ले जाता हूं ताकि यह शुरू हो जाए अगली छवि को प्रदर्शित करने के लिए, लेकिन यह काम नहीं करता है क्योंकि एक बार जब मैं छवियों की ऊंचाई को परिभाषित नहीं कर सकता, तो वे एक-दूसरे के नीचे दिखाई देंगे, न कि तरफ से।

JSFiddle

एचटीएमएल

<div class="images"> 
    <img class="active" src="1.jpg"> 
    <img src="2.jpg"> 
    <img src="3.jpg"> 
</div> 

<div class="previous">previous</div> 

<div class="next">next</div> 

सीएसएस

img { 
    width: 100px; 
    display: none; 
    float: left; 
} 

img.active { 
    display: block; 
} 

jQuery

$('.next').on('click', function() { 
    var active = $('img.active'); 
    var next = active.next('img'); 

    if (next.length) { 
     active.removeClass('active'); 
     next.addClass('active'); 
    } else { 
     active.removeClass('active'); 
     $('.images img:first').addClass('active'); 
    } 
}); 

Answer 1

मैं अंत में वहाँ गया।

HERE मेरे द्वारा विकसित समाधान के साथ बेवकूफ है।

इस छवि स्लाइडर के कार्यान्वयन में मुख्य समस्या यह थी कि छवियों, अलथॉट सभी समान आकार थे, गतिशील चौड़ाई (% में सीएसएस पर परिभाषित) और गतिशील ऊंचाई (सीएसएस पर परिभाषित नहीं) थी।

समाधान मूल रूप से मेरे कंटेनर के अंदर "नकली" छवि (opacity: 0 के साथ) डाला गया था ताकि कंटेनर को स्लाइडर में उपयोग की जाने वाली छवियों का वास्तविक आकार प्राप्त हो; position: absolute के साथ वास्तविक छवियों को "पकड़" रखने के लिए एक div डालें और इसे number of images * 100% द्वारा चौड़ाई वाली चौड़ाई दें; और आखिरकार, छवियों की संख्या के आधार पर, प्रत्येक छवि को मेरे स्लाइडर में x% की चौड़ाई दें।

jQuery में, मैं "छवि धारक div" हमेशा % द्वारा "स्थानांतरित" करता हूं, स्थिर मूल्यों से कभी नहीं, एक बार जब मैं खिड़की का आकार बदलता हूं तो सब कुछ की चौड़ाई बदल सकती है।

यदि आप छवियों को बाएं और दाएं स्लाइड करना शुरू करते हैं और फिर विंडो का आकार बदलते हैं, तो आप देखेंगे कि यह पूरी तरह से काम करना जारी रखता है।

Answer 2

शायद आदर्श स्थिति नहीं है लेकिन कम से कम यह आपको एक विचार देगा। आप jQuery के एनीमेशन फ़ंक्शन का उपयोग कर सकते हैं और मैंने आपके कोड को थोड़ा बदल दिया है। demo here

देखें अपने HTML के भीतर मैं यह कहना होगा: बदल रहा है और जोड़ने की पूरी प्रक्रिया इस कार्यान्वयन के साथ

$('.images-wrapper img:gt(0)').hide(); 

$('.next').click(function() { 
    $('.images-wrapper img:first-child').animate({width:'toggle'},350).next().fadeIn().end().appendTo('.images-wrapper'); 
}); 

$('.previous').click(function() { 
    $('.images-wrapper img:first-child').animate({width:'toggle'},350); 
    $('.images-wrapper img:last-child').prependTo('.images-wrapper').fadeOut(); 
    $('.images-wrapper img:first-child').fadeIn(); 
}); 

:

<div id="images"> 
    <div class="images-wrapper"> 
     <img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/In-the-spotlight.jpg"> 
     <img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/Bath-time-with-ducky.jpg"> 
     <img src="http://www.cutestpaw.com/wp-content/uploads/2016/03/FB_IMG_1452981788903.jpg"> 
     <img src="http://www.pictures-of-cats.org/images/Pixiebob-cat-list-of-cat-breeds-pictures-of-cats.jpg" /> 
    </div>  
</div> 

<div class="previous"> 
    previous 
</div> 

<div class="next"> 
    next 
</div> 

और अपने jQuery कोड के भीतर रखते चौड़ाई चेतन कर सकते हैं active छवि को कक्षा हटा दी गई है और एनीमेशन कार्यों द्वारा प्रतिस्थापित किया गया है

Answer 3

मैंने css3 ani का उपयोग करके लागू किया है mations। हालांकि प्रत्येक बार स्लाइड को जोड़ा या निकाला जाने पर इसे सीएसएस में एनीमेशन मानों में हेरफेर करने की आवश्यकता होगी।

@keyframes slideAnim { 
    0% { 
    transform: translateX(0) 
    } 
    12.5% { 
    transform: translateX(0%); 
    } 
    25% { 
    transform: translateX(-25%); 
    } 
    37.5% { 
    transform: translateX(-25%) 
    } 
    50% { 
    transform: translateX(-50%) 
    } 
    62.5% { 
    transform: translateX(-50%) 
    } 
    75% { 
    transform: translateX(00%); 
    } 
    89.5% { 
    transform: translateX(00%) 
    } 
    100% { 
    transform: translateX(00%) 
    } 
} 

यहां एनीमेशन मान सेट किए गए हैं कि स्लाइड संक्रमण के बीच कोई विराम है। मैंने एक समय में केवल एक स्लाइड दिखाने के लिए एक मूल फ्रेम जोड़ा है।

कृपया इसे fiddle देखें।

Answer 4

वैसे समस्या स्लाइडिंग की ऊंचाई है।

सबसे पहले आपको एक तत्व होना चाहिए जो "चित्र फ्रेम" है जो अन्य सभी छवियों को पकड़ता है। वह महत्वपूर्ण है। बेहतर कल्पना के लिए एक तस्वीर:

अब आप दिखाने के लिए और छवियों को छिपाने के लिए कई पारिभाषिक शब्द है। एक अस्पष्टता सेट करने के लिए हो सकता है। transition: opacity .15s ease-in-out; का उपयोग करते समय एक चित्र बाहर निकल रहा है और अगला चालू हो रहा है।

स्लाइड शो प्रभाव बाईं ओर की चौड़ाई तक दिखाई देने वाली छवि की स्थिति को दिया गया है और छवि पहले पूरी तरह से अपने चौड़े तक नई है दाएं और फिर 0 तक। इस प्रकार, वर्तमान तस्वीर को बाईं ओर फ्रेम पर ले जाता है और नया अंदर आता है।

और यदि ऊंचाई समान नहीं है तो यहां कठिनाई है। यदि वर्तमान छवि 300 पीएक्स उच्च और नई 400 पीएक्स है, तो नई छवि दिखाई देने के बाद यहां छवि फ्रेम तुरंत उसकी ऊंचाई समायोजित करेगा।

नीचे दी गई सामग्री प्रत्येक स्लाइड के साथ कूदना शुरू कर देगी।

क्या यह वांछित है ???

यदि हां, तो मैं आपको एक उदाहरण बना सकता हूं कि यह कैसे काम करता है।

Answer 5

आप वास्तव में Pure CSS!

में यह कर सकते हैं आप (लक्षित आईडी के लिए = एक for विशेषता के साथ) एक आईडी और एक लेबल का उपयोग

मूल रूप से यह है कि। आपने जो कुछ छोड़ा है उसे स्टाइल करना है! (Joshua Hibbert की कलम से अलग)

body { 
 
    background: #f7f4e2; 
 
} 
 

 
/* Slides */ 
 
.slider input { 
 
    display: none; 
 
} 
 

 
/* Buttons */ 
 
.slider label { 
 
    display: none; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 6em; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    color: #fff; 
 
    background: #000; 
 
    padding: 1.36em .5em; 
 
    opacity: .6; 
 
    font-size: 19px; 
 
    font-family: fantasy; 
 
    font-weight: bold; 
 
    transition: .25s; 
 
} 
 
.slider label:hover { 
 
    opacity: 1; 
 
} 
 
.previous { 
 
    margin-left: -188px; 
 
} 
 
.next { 
 
    margin-left: 188px; 
 
} 
 

 
#slide1:checked ~ .buttons .slide1 { 
 
    display: block; 
 
} 
 
#slide2:checked ~ .buttons .slide2 { 
 
    display: block; 
 
} 
 
#slide3:checked ~ .buttons .slide3 { 
 
    display: block; 
 
} 
 
#slide4:checked ~ .buttons .slide4 { 
 
    display: block; 
 
} 
 

 
/* Images */ 
 
.slider { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 400px; 
 
    height: 300px; 
 
    margin-top: -150px; 
 
    margin-left: -200px; 
 
    white-space: nowrap; 
 
    padding: 0; 
 
    float: left; 
 
    transition: .25s; 
 
    overflow: hidden; 
 
    box-shadow: 0 0 0 3.12px #e8e8e8, 
 
       0 0 0 12.64px #eaebe4, 
 
       0 0 0 27.12px #000, 
 
       0 24px 3.824em 5.12px #000; 
 
} 
 
.slide { 
 
    width: 500em; 
 
    transition: .25s; 
 
} 
 
.slider img { 
 
    float: left; 
 
    width: 400px; 
 
    height: 300px; 
 
} 
 

 
#slide1:checked ~ .slide { 
 
    margin: 0; 
 
} 
 
#slide2:checked ~ .slide { 
 
    margin: 0 0 0 -400px; 
 
} 
 
#slide3:checked ~ .slide { 
 
    margin: 0 0 0 -800px; 
 
} 
 
#slide4:checked ~ .slide { 
 
    margin: 0 0 0 -1200px; 
 
}

<div class="slider"> 
 
    <input type="radio" name="slide" id="slide1" checked="true" /> 
 
    <input type="radio" name="slide" id="slide2" /> 
 
    <input type="radio" name="slide" id="slide3" /> 
 
    <input type="radio" name="slide" id="slide4" /> 
 
    
 
    <div class="buttons"> 
 
    <!-- Slide 1 --> 
 
    <label for="slide4" class="slide1 previous">&lt;</label> 
 
    <label for="slide2" class="slide1 next">&gt;</label> 
 
    
 
    <!-- Slide 2 --> 
 
    <label for="slide1" class="slide2 previous">&lt;</label> 
 
    <label for="slide3" class="slide2 next">&gt;</label> 
 
    
 
    <!-- Slide 3 --> 
 
    <label for="slide2" class="slide3 previous">&lt;</label> 
 
    <label for="slide4" class="slide3 next">&gt;</label> 
 
    
 
    <!-- Slide 4 --> 
 
    <label for="slide3" class="slide4 previous">&lt;</label> 
 
    <label for="slide1" class="slide4 next">&gt;</label> 
 
    </div> 
 

 
    <div class="slide"> 
 
    <img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/872485/coldchase.jpg"> 
 
    <img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/980517/icehut_sm.jpg"> 
 
    <img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/943660/hq_sm.jpg"> 
 
    <img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/599584/home.jpg"> 
 
    </div> 
 
</div>

हालांकि इस पद्धति सबसे संगत है (आईई के पुराने संस्करण को छोड़ कर) और आप इसे कैसे चेतन के आधार पर इस प्रक्रिया को अधिक समय लग सकता है एक जेएस विधि की तुलना में, लेकिन यह भी तेज हो सकता है, यह केवल इस बात पर निर्भर करता है कि आप एनिमेशन कैसे जाना चाहते हैं, या आप css library that does this for you का उपयोग कर सकते हैं।

यहां कुछ सीएसएस छवि स्लाइडर हैं जो मैं अनुशंसा करता हूं।

10 Amazing Pure CSS3 Image Sliders
http://bashooka.com/coding/pure-css3-image-sliders/

Pure CSS Image Slider Without Javascript #Codeconvey आप जो खोज रहे हैं के लिए एक अच्छा समाधान है, लेकिन सीएसएस के बहुत सारे
http://codeconvey.com/pure-css-image-slider/

क्या आप पर काम कर रहे है कि है के साथ इन करने के लिए नकारात्मक पक्ष यह है आप एक फोन या टैबलेट पर स्लाइड करने के लिए स्पर्श नहीं कर सकते हैं जो अब फोटो दीर्घाओं के साथ एक दिन अधिक आम है।

मैं Fotorama की जांच करने की सलाह देता हूं यह आश्चर्यजनक है! :)

Answer 6

सरल समाधान (मुझे लगता है) आइटम को div में रखकर, उसी आकार के होने के लिए मजबूर करना है।background-image सीएसएस सुविधा का उपयोग करके आप img टैग के उपयोग के बिना भी div को छवि दिखा सकते हैं (अधिक जानकारी के लिए http://www.w3schools.com/css/css3_backgrounds.asp देखें)।

.item { 
    background-size: contain; 
    background-position: center; 
} 

और HTML में प्रत्येक आइटम में:

आइटम सीएसएस दिखाई दे सकता है

<div class='item' style='background-image: url(img1.jpg)' /> 
<div class='item' style='background-image: url(img2.jpg)' /> 
<div class='item' style='background-image: url(img3.jpg)' />