responsive design - Carrusel de ancho completo con carouFredSel.js

responsive-design carousel

Question

Actualmente estoy usando carouFredSel.js para servir un carrusel de ancho completo en mi sitio. Elegí este complemento debido a sus capacidades de ancho total con la capacidad de mostrar parcialmente las imágenes anteriores y siguientes en los bordes izquierdo y derecho de la pantalla.

También estoy usando Bootstrap 3, pero no logré el mismo comportamiento, así que es por eso que elegí usar un complemento.

El problema que estoy experimentando es hacer que el carrusel sea receptivo. El complemento tiene una opción para hacer que responda al agregar ''responsive: true'' a las opciones, pero cuando lo hago, se rompe el diseño.

Mi código con imágenes de marcador de posición se puede encontrar en http://jsfiddle.net/vUCZ8/ . Recomiendo mirar el resultado de pantalla completa en 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>

Answer 1

Esta es la forma correcta de implementar responsive con este complemento:

responsive: true // you must add this

Como puede ver, no se está rompiendo y funcionando perfectamente. http://jsfiddle.net/3mypa/ Esto es con la plantilla ESTÁNDAR.

Creo que estás buscando una plantilla diferente, ¿no es esto lo que estás buscando?

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

Answer 2

He estado viendo este tema también y lo mejor que he encontrado es observar el tamaño de la ventana y reaccionar en consecuencia. Por ejemplo

$(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)
})

De esta forma, una vez que el tamaño de la ventana esté por debajo del ancho de las imágenes y la acción de respuesta debería activarse, lo hará, pero una vez que sea más grande que una imagen, volverá a la vista truncada.

Es cierto que podría arreglarse más por portabilidades, pero usted debería darle la base adecuada para trabajar.