Estoy construyendo un carrusel de producto que ha proveedor botones de abajo que permiten filtrar ellos. Así que la pantalla inicial es de todos los logotipos de productos, pero pulsando el botón de ‘Adobe’ (por ejemplo) botón, a continuación, filtra todo lo que no es un producto de Adobe, y pulsar de nuevo el botón unfilters ella.

Estoy usando JQuery con Slick y, a continuación, un poco de javascript personalizado para controlar el filtrado. Vamos a empezar con el código HTML.

<div class="container" >
<div class="row">
<div class="col-xs-12">
<div class="product-carousel">
<div class="item filter-apple"><img class="product" src="images/products/product-fcp7.png"  /></div>
<div class="item filter-apple"><img class="product" src="images/products/product-fcpx.png" /></div>
<div class="item filter-apple"><img class="product" src="images/products/product-motion5.png" /></div>
<div class="item filter-adobe"><img class="product" src="images/products/product-aftereffects.png" /></div>
<div class="item filter-adobe"><img class="product" src="images/products/product-encore.png" /></div>
<div class="item filter-adobe"><img class="product" src="images/products/product-indesign.png" /></div>
<div class="item filter-avid"><img class="product" src="images/products/product-mediacomposer.png" /></div>
<div class="item filter-adobe"><img class="product" src="images/products/product-photoshop.png" /></div>
<div class="item filter-adobe"><img class="product" src="images/products/product-premierepro.png" /></div>
<div class="item filter-davinci"><img class="product" src="images/products/product-resolve.png" /></div>
<div class="item filter-autodesk"><img class="product" src="images/products/product-smoke.png" /></div>
</div>
<div class="vendors-wrapper">
<ul class="vendors">
<li><button class="btn btn-xs btn-primary product-button" id="button-apple">Apple</button></li>
<li><button class="btn btn-xs btn-primary product-button" id="button-adobe">Adobe</button></li>
<li><button class="btn btn-xs btn-primary product-button" id="button-avid">Avid</button></li>
<li><button class="btn btn-xs btn-primary product-button" id="button-davinci">Davinci</button></li>
<li><button class="btn btn-xs btn-primary product-button" id="button-autodesk">Autodesk</button></li>
</ul>
</div>          
</div>
</div>
</div>

Como se puede ver, estoy usando una clase sobre el tema de divs para que yo pueda filtro de ellos más tarde. Aquí está el Javascript:

$(document).ready(function(){
$('.product-carousel').slick({
slidesToShow: 8,
autoplay: true
});
});
var filtered = false;
$('#button-apple').on('click', function(){
if(filtered === false) {
$('.product-carousel').slickUnfilter();
$('.product-carousel').slickFilter('.filter-apple');
$('.product-carousel').slickGoTo(0);
$('.product-button').attr('class', 'btn btn-xs btn-default product-button');
$(this).attr('class', 'btn btn-xs btn-primary product-button');
filtered = true;
} else {
$('.product-carousel').slickUnfilter();
$('.product-button').attr('class', 'btn btn-xs btn-primary product-button');    
filtered = false;
}
});

Esto inicia la Mancha guía, entonces escucha un clic en el botón #apple. Estoy utilizando el construido-en slickFilter método y, a continuación, un poco de estilo en los botones para demostrar visualmente que el botón ha sido seleccionado. Pero como te habrás dado cuenta, la creación de una nueva función de Javascript para cada proveedor es terriblemente ineficiente. Hay una manera para que la función saben lo suficiente acerca de lo que usted acaba de hacer clic en para usar la misma función, independientemente de lo que se ha hecho clic? También, el método de configuración de la var filtrada también es un poco deficiente ya que haciendo clic en otro proveedor (en la actualidad) acaba de quitar filtro en lugar de quitar filtro, a continuación, re-filtro para que el proveedor así que la función debe saber si el proveedor botón que haya pulsado ya está filtrada y actuar en consecuencia.

Pregunta complementaria para cualquier persona que sabe slick – ¿hay una manera de centro de todos los elementos en el área de la barra deslizante cuando hay menor que el número de slidesToShow?

http://jsfiddle.net/8vLs9qp6/

InformationsquelleAutor PeteSE4 | 2014-09-29

2 Comentarios

  1. 5

    Así que me las arreglé para encontrar esta abandonando el método de buscar un id específico haga clic en y, en lugar de jalar el nombre del proveedor de la id de la lista y, a continuación, utilizando como variable. Nuevo HTML:

    <div class="container" >
    <div class="row">
    <div class="col-xs-12">
    <div class="product-carousel">
    <div class="item filter-apple"><img class="product-selector" src="images/products/product-fcp7.png"  /></div>
    <div class="item filter-apple"><img class="product-selector" src="images/products/product-fcpx.png" /></div>
    <div class="item filter-apple"><img class="product-selector" src="images/products/product-motion5.png" /></div>
    <div class="item filter-adobe"><img class="product-selector" src="images/products/product-aftereffects.png" /></div>
    <div class="item filter-adobe"><img class="product-selector" src="images/products/product-encore.png" /></div>
    <div class="item filter-adobe"><img class="product-selector" src="images/products/product-indesign.png" /></div>
    <div class="item filter-avid"><img class="product-selector" src="images/products/product-mediacomposer.png" /></div>
    <div class="item filter-adobe"><img class="product-selector" src="images/products/product-photoshop.png" /></div>
    <div class="item filter-adobe"><img class="product-selector" src="images/products/product-premierepro.png" /></div>
    <div class="item filter-davinci"><img class="product-selector" src="images/products/product-resolve.png" /></div>
    <div class="item filter-autodesk"><img class="product-selector" src="images/products/product-smoke.png" /></div>
    </div>
    <div class="vendors-wrapper">
    <ul class="vendors">
    <li id="apple"><button class="btn btn-xs btn-primary product-button">Apple</button></li>
    <li id="adobe"><button class="btn btn-xs btn-primary product-button">Adobe</button></li>
    <li id="avid"><button class="btn btn-xs btn-primary product-button">Avid</button></li>
    <li id="davinci"><button class="btn btn-xs btn-primary product-button">Davinci</button></li>
    <li id="autodesk"><button class="btn btn-xs btn-primary product-button">Autodesk</button></li>
    </ul>
    </div>          
    </div>
    </div>

    Y, a continuación, la función de filtrar los productos y cambiar los estados del botón.

    $('.product-button').on('click', function(){
    var filtername = $(this).parent('li').attr('id');
    var currentclass = $(this).attr('class');
    if(currentclass == 'btn btn-xs btn-default product-button') {
    //currently filtered, turn the others off and this on
    $('.product-carousel').slickUnfilter();
    $('.product-carousel').slickFilter('.filter-' + filtername);
    $('.product-carousel').slickGoTo(0);
    $('.product-button').attr('class', 'btn btn-xs btn-default product-button');
    $(this).attr('class', 'btn btn-xs btn-primary product-button');
    } else {
    //is this the only currently selected vendor or are they all active?
    var numberactive = $('.vendors').find('.btn-default').length;
    if(numberactive > 0) {
    //toggle them all back on
    $('.product-carousel').slickUnfilter();
    $('.product-carousel').slickGoTo(0);
    $('.product-button').attr('class', 'btn btn-xs btn-primary product-button');
    } else {
    //switch the others off
    $('.product-carousel').slickUnfilter();
    $('.product-carousel').slickFilter('.filter-' + filtername);
    $('.product-carousel').slickGoTo(0);
    $('.product-button').attr('class', 'btn btn-xs btn-default product-button');
    $(this).attr('class', 'btn btn-xs btn-primary product-button');
    }
    }
    });

    Todavía agradecería si alguien sabe como centro de los elementos en la mancha de la ventana de visualización. En la actualidad siempre parece estar justificado a la izquierda (la que se ve un poco extraño en una amplia ventana cuando se ha filtrado a un solo producto). Tratado de la centerMode opción, pero no parece hacer mucho. Me pueden usarlo incorrectamente.

  2. 2

    Centrado en el carrusel de elementos con css. https://jsfiddle.net/jnallie/hr1155fm/

    body {
    background: black;
    }
    .vendors {
    list-style: none;
    text-align: center;
    margin: 0px;
    margin-bottom:10px;
    padding: 0px;
    }
    .product-carousel .item {   
    background: green;
    text-align: center;
    margin: 0 5px;    
    }
    .product-carousel .item img {
    margin: 0 auto;
    }
    .vendors li {
    display: inline-block;
    }
    .product-selector {
    width: 64px;
    }

Dejar respuesta

Please enter your comment!
Please enter your name here