He estado jugando un poco con la Mancha de carrusel para una feria de pocas horas, y realmente no puede conseguir mi cabeza alrededor de cómo implementar el «centro » modo» que en la Mancha sitio web: http://kenwheeler.github.io/slick/

Se ve algo como esto:

Atascado con Slick Carrusel

Tengo el código actual en el lugar, pero aún así no me da lo que yo quiero:

JS:

< link rel = "stylesheet"
type = "text/css"
href = "http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" >
< script type = "text/javascript"
src = "http://code.jquery.com/jquery-1.11.0.min.js" > < /script> 
<link rel="stylesheet" type="text/css
" href="
http: //kenwheeler.github.io/slick/css/style.css">
< script type = "text/javascript"
src = "http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js" > < /script>
<script type="text/javascript
">
$(document).ready(function() {
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
$('.single-item').slick({
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
});
});
</script>
<section id="
features " class="
blue ">
<div class="
center ">
<div class="
content ">
<div class="
single - item ">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</div>
</div>
</div>
</section>

Si alguien tiene alguna sugerencia de por qué esto no podría ser de trabajo, agradecería la ayuda.

Gracias.

  • Lo que no está funcionando? ¿Qué quieres que haga?
InformationsquelleAutor Ian Batten | 2015-03-09

3 Comentarios

  1. 2

    Creo que esta podría ser la respuesta adecuada para slick centro de modo

    <html>
    <head>
    <meta charset="utf-8">
    <title>Maganti IT Solution</title>
    <link rel="stylesheet" type="text/css" href="slick.css"/>
    <link rel="stylesheet" type="text/css" href="slick-theme.css"/>
    </head>
    <style>
    .slick-center .slide-h3{
    color: #FFF;
    }
    .slider{
    width: 600px;  
    height:150px;
    margin: 20px auto;    
    text-align: center;
    }
    .slide-h3{
    margin: 10% 0 10% 0;
    padding: 40% 20%;
    background: #008ed6;
    }
    .slider div{
    margin-right: 5px;
    }
    .slick-slide{
    opacity: .6;
    }
    .slick-center{
    display: block;
    max-width: 10% !important;
    max-height:20% !important;
    opacity: 1;
    }
    </style>
    <body>
    <section id="slick-content">
    <div class="slider">
    <div><div class="slide-h3">1</div></div>
    <div><div class="slide-h3">2</div></div>
    <div><div class="slide-h3">3</div></div>
    <div><div class="slide-h3">4</div></div>
    <div><div class="slide-h3">5</div></div>
    <div><div class="slide-h3">6</div></div>
    </div>
    </body>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="slick.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('.slider').slick({
    centerMode: true,
    centerPadding: '60px',
    slidesToShow: 3,
    speed:1500,
    index: 2,
    responsive: [
    {
    breakpoint: 768,
    settings: {
    arrows: false,
    centerMode: true,
    centerPadding: '40px',
    slidesToShow: 3
    }
    },
    {
    breakpoint: 480,
    settings: {
    arrows: false,
    centerMode: true,
    centerPadding: '40px',
    slidesToShow: 1
    }
    }
    ]
    });
    });
    </script>
    </body>
    </html>
    • muy claro de ejemplo, gracias.
  2. 2
    1. Tiene 2 controles deslizantes definido (en el centro, con un único elemento), mientras que en el html sólo «un solo punto», ha diapositivas.
      El «centro» de la diapositiva es envolver el «único elemento» y sostiene que sólo un niño div.
    2. La clase con un único elemento fue escrito con espacios de hacer 3 diferentes clases de «soltero», » – » (aunque no creo que esta es una clase) y «elemento».

    Si la intención de hacer el «único» elemento de la diapositiva para mostrar en centerMode entonces este es el código de derecho:

    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" />
    < script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js" > </script> 
    <link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/css/style.css" />
    <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"> </script>
    <script type="text/javascript">
    $(document).ready(function() {
    $('.single-item').slick({
    centerMode: true,
    centerPadding: '60px',
    slidesToShow: 3,
    responsive: [
    {
    breakpoint: 768,
    settings: {
    arrows: false,
    centerMode: true,
    centerPadding: '40px',
    slidesToShow: 3
    }
    },
    {
    breakpoint: 480,
    settings: {
    arrows: false,
    centerMode: true,
    centerPadding: '40px',
    slidesToShow: 1
    }
    }
    ]
    });             
    });
    </script>
    <section id="features" class="blue">
    <div class="content">
    <div class="single-item">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
    </div>
    </div>
    </section>
  3. 0

    Después de la limpieza de su fragmento de código para que funcione correctamente (desplazado HTML en la parte de HTML, eliminado extraña y errónea espacio en blanco), no puedo decir lo que no está trabajando con su código. Tal vez fue sólo errores de sintaxis?

    La principal cosa que me di cuenta era que había class="single - item" en un elemento que claramente estaba destinado a tener la clase single-item, como que fue el selector se utiliza para crear su slider. Yo no sé si era en su código original o si se acaba de copiar de forma incorrecta.

    JS:

    $(document).ready(function() {
    $('.center').slick({
    centerMode: true,
    centerPadding: '60px',
    slidesToShow: 3,
    responsive: [
    {
    breakpoint: 768,
    settings: {
    arrows: false,
    centerMode: true,
    centerPadding: '40px',
    slidesToShow: 3
    }
    },
    {
    breakpoint: 480,
    settings: {
    arrows: false,
    centerMode: true,
    centerPadding: '40px',
    slidesToShow: 1
    }
    }
    ]
    });
    $('.single-item').slick({
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
    });
    });

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet"/>
    <link href="http://kenwheeler.github.io/slick/css/style.css" rel="stylesheet"/>
    <script src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
    <section id="features" class="blue">
    <div class="center">
    <div class="content">
    <div class="single-item">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
    </div>
    </div>
    </div>
    </section>

Dejar respuesta

Please enter your comment!
Please enter your name here