responsive design - CarouFredSel.js के साथ उत्तरदायी पूर्ण चौड़ाई कैरोसेल




responsive-design carousel (2)

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

$(window).resize(function(){ 
//listens for window resize
    var TimeOutFunction;
    clearTimeout(TimeOutFunction);
    //To try and make sure this only fires after the window has stopped moving
    TimeOutFunction=setTimeout(function(){
        $('.slides').trigger("destroy",true);
        //Destroys the current carousel along with all it's settings - extreme but It wouldn't accept setting changes once running
        if($(window).width()<1170){
            //The width should be the width of a single image since I assume your using the same image size for all images on the slider. 
            $(function(){
                $('#carousel').find('.slides').carouFredSel({
                    width:'100%',
                    items:{
                        visible:1,
                        start:-1
                    },
                    responsive:true,
                    minimum:3
                })
            })
        }else{
            $(function(){
                $('#carousel').find('.slides').carouFredSel({
                    width:'100%',
                    items:{
                        visible:3,
                        start:-1
                    },
                    responsive:false,
                    minimum:3
                })
            })
        }
    },500)
})

इस तरह खिड़की के आकार की छवियों की चौड़ाई से कम होने के बाद और उत्तरदायी कार्रवाई के दौरान इसे किक करना चाहिए, लेकिन एक बार जब यह एक छवि से बड़ा होता है तो इसे फिर से छोटा दृश्य में वापस ले जाता है।

यह मान्य है कि इसे पोर्टिबॉटेबिलिटी की खातिर अधिक इस्तेमाल किया जा सकता है लेकिन आप को उस पर काम करने के लिए आपको सही आधार देना चाहिए

मैं वर्तमान में carouFredSel.js का उपयोग कर रहा हूं ताकि मेरी साइट पर एक पूर्ण चौड़ाई कैरोसेल हो। मैंने स्क्रीन को छोड़ दिया और दाएं किनारों पर पिछले और अगले छवियों को आंशिक रूप से दिखाने की क्षमता के साथ अपनी पूरी चौड़ाई क्षमताओं के कारण इस प्लगइन को चुना।

मैं भी बूटस्ट्रैप 3 का इस्तेमाल कर रहा हूं, लेकिन एक ही व्यवहार को हासिल करने में असफल रहा, इसलिए मैंने एक प्लगइन के साथ जाने का फैसला किया।

मुझे जो समस्या आ रही है वह हिंडोला उत्तरदायी बना रही है प्लगइन में विकल्प के लिए 'उत्तरदायित्व: सच' जोड़कर इसे उत्तरदायी बनाने का विकल्प होता है, लेकिन जब मैं ऐसा करता हूं, तो वह लेआउट को तोड़ता है

प्लेसहोल्डर छवियों वाला मेरा कोड http://jsfiddle.net/vUCZ8/ पर पाया जा सकता है। मैं http://jsfiddle.net/vUCZ8/embedded/result/ पर पूर्ण स्क्रीन परिणाम को देखने की सलाह दूंगा

#intro {
            width: 580px;
            margin: 0 auto;
        }
        .wrapper {
            background-color: white;
            width: 480px;
            margin: 40px auto;
            padding: 50px;
            box-shadow: 0 0 5px #999;
        }
        #carousel img {
            display: block;
            float: left;
        }
        .main-content ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: block;
        }
        .main-content li {
            display: block;
            float: left;
        }
        .main-content li img {
            margin: 0 20px 0 20px;
        }
        .list_carousel.responsive {
            width: auto;
            margin-left: 0;
        }
        .clearfix {
            float: none;
            clear: both;
        }
        .prev {
            float: left;
            margin-left: 10px;
        }
        .next {
            float: right;
            margin-right: 10px;
        }
        .pager {
            float: left;
            width: 300px;
            text-align: center;
        }
        .pager a {
            margin: 0 5px;
            text-decoration: none;
        }
        .pager a.selected {
            text-decoration: underline;
        }
        .timer {
            background-color: #999;
            height: 6px;
            width: 0px;
        }

$(function() {
    $('#carousel').carouFredSel({
        width: '100%',
        items: {
            visible: 3,
            start: -1
        },
        scroll: {
            items: 1,
            duration: 1000,
            timeoutDuration: 3000
        },
        prev: '#prev',
        next: '#next',
        pagination: {
            container: '#pager',
            deviation: 1
        }
    });
});

<div class="main-content">
    <ul id="carousel">
        <li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li>
            <li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li>
            <li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li>
                <li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li>
    </ul>
    <div class="clearfix"></div>
</div>

यह इस प्लगइन के साथ उत्तरदायी कार्यान्वयन का सही तरीका है:

responsive: true // you must add this

जैसा कि आप देख सकते हैं कि यह तोड़ नहीं रहा है और पूरी तरह से काम कर रहा है। http://jsfiddle.net/3mypa/ यह मानक टेम्प्लेट के साथ है I

मेरा मानना ​​है कि आप एक अलग टेम्पलेट के लिए खोज रहे हैं, क्या यह आप के लिए नहीं देख रहे हैं?

http://coolcarousels.frebsite.nl/c/44/coolcarousel.html