http://kenwheeler.github.io/slick/

Un amigo me sugirió que el uso de Ken Wheeler hábil carrusel y me decidí a darle una oportunidad. Estoy teniendo un par de problemas con él. La primera es que las diapositivas no carga «en la parte superior de uno al otro» como deberían. Ellos se apilan verticalmente. Cuando la primera diapositiva se desvanece, está en el lugar correcto, sin embargo, cuando la segunda diapositiva se desvanece, es por debajo de donde la primera diapositiva fue. Observe también que en la primera diapositiva, el borde derecho se corta y en la segunda diapositiva todo además el borde izquierdo está cortado.

El segundo problema es que me parece que no puede cambiar el ancho o la altura de las diapositivas. Todos ellos serán de las mismas dimensiones. (Se encuentra en mi archivo css en el «destacados» de la clase.)

¿Qué estoy haciendo mal?

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>BaseCMD :: Home</title>
<meta name="description" content="If it\s related to video games, you can find it here." />
<meta name="keywords" content="video games, microsoft, xbox, xbox 360, xbox one, sony, playstation, nintendo, wii, wii u, ds, league, console, platform, reviews, resources, players, teams, forums, servers, blog, base command, basecmd" />
<link href="http://localhost/basecommand/css/960.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/basecommand/css/style.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/basecommand/css/foundation-icons.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/basecommand/css/slick.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://localhost/basecommand/js/global.js"></script>
<script src="http://localhost/basecommand/js/slick.min.js"></script>
</head>
<body>
<h1>Top Stories</h1>
<script>
$(document).ready(function(){
$('#featured-articles').slick({
arrows: true,
autoplay: true,
autoplaySpeed: 3000,
dots: true,
draggable: false,
fade: true,
infinite: false,
responsive: [
{
breakpoint: 620,
settings: {
arrows: true
}
},
{
breakpoint: 345,
settings: {
arrows: true
}
}
]
});
});
</script>
<div id="featured-articles">
<div class="featured" style="background: url(attachments/56da367f9e7a66952fd1ed2e79b4b317.jpg);">
<h1>Another Test Article</h1>
<p class="info">https://www.bungie.net/pubassets/1319/Destiny_31.png
Lorem ipsum dolor sit amet, inani accusata et duo, ad sit veniam interpretaris. Sea scripta nostrum ex, liber fastidii ea duo. Id vim nobis option contentiones, mea probatus praesent ut. Sea ex libri...</p>
<h2><a href="http://localhost/basecommand/index.php/articles/Another-Test-Article/5">Read More</a></h2>     
</div>
<div class="featured" style="background: url(attachments/4e683defc6aba497f347b08ac05edb14.jpg);">
<h1>This Is a Test Article</h1>
<p class="info">https://www.bungie.net/pubassets/1319/Destiny_31.png
Lorem ipsum dolor sit amet, inani accusata et duo, ad sit veniam interpretaris. Sea scripta nostrum ex, liber fastidii ea duo. Id vim nobis option contentiones, mea probatus praesent ut. Sea ex libri...</p>
<h2><a href="http://localhost/basecommand/index.php/articles/This-Is-a-Test-Article/1">Read More</a></h2>       
</div>
</div>

¿Cómo puedo cambiar el ancho y la altura de diapositivas sobre la Mancha de Carrusel?
¿Cómo puedo cambiar el ancho y la altura de diapositivas sobre la Mancha de Carrusel?

InformationsquelleAutor ShoeLace1291 | 2014-04-24

6 Comentarios

  1. 28

    Hice este plugin. Hay un poco de css interferencia llevando a cabo.

    Es su frontera en el control deslizante de la misma. Utilizar

    box-sizing: border-box 

    para absorber el ancho del borde, o poner la frontera en el contenido de la diapositiva.

    • Ok, así que deshacerse de la frontera resuelto el apilamiento tema… pero ¿cómo puedo cambiar las dimensiones de la real diapositiva? Yo la tengo configurada en mi archivo css, pero eso no parece hacer nada.
    • ¿Cuál era la respuesta correcta aquí? Yo soy la configuración de la diapositiva de ancho en el CSS, pero el estilo en línea de la js es primordial como si se ignora.
    • No veo donde está la respuesta correcta aquí
  2. 54

    He inicializado el control deslizante con una de las propiedades como

    variableWidth: true,

    entonces yo podría establecer el ancho de las diapositivas para cualquier cosa que yo quería en CSS con:

    .slick-slide
    {
    width: 200px;
    }
  3. 3

    Básicamente, usted necesita para editar el JS y agregar (en este caso, dentro de $('#featured-articles').slick({ ), este:

    variableWidth: true,

    Esto le permitirá modificar el ancho en tu CSS donde se puede, de forma genérica uso:

    .slick-slide {
    width: 100%;
    }

    o en este caso:

    .featured {
    width: 100%;
    }
  4. 0

    He encontrado una buena solución de mí mismo. Desde slick slider todavía se utiliza hoy en día voy a publicar mi enfoque.

    @RuivBoas respuesta es parcialmente correcta. – Se puede cambiar el ancho de la diapositiva, pero se puede romper con el control deslizante. ¿Por qué?

    Slick slider puede exceder el ancho del navegador. Real recipiente ancho es
    para el valor, que puede acomodar a todas las diapositivas.

    La mejor solución para la configuración de diapositiva ancho es el uso de la anchura real de la ventana del navegador. Funciona mejor con responsive design.

    Por ejemplo 2 diapositivas con absorbido ancho

    CSS

    .slick-slide {
    width: 50vw;
    //for absorbing width from @Ken Wheeler answer
    box-sizing: border-box;
    }

    JS

    $(document).on('ready', function () {
    $("#container").slick({
    variableWidth: true,
    slidesToShow: 2,
    slidesToScroll: 2
    });
    });

    El lenguaje de marcado HTML

    <div id="container">
    <div><img/></div>
    <div><img/></div>
    <div><img/></div>
    </div>
  5. 0

    Sé que ya hay una respuesta para esto, pero acabo de encontrar una mejor solución mediante el variableWidth parámetro, sólo se establece en true en la configuración de cada punto, como este:

    $('#featured-articles').slick({
    arrows: true,
    autoplay: true,
    autoplaySpeed: 3000,
    dots: true,
    draggable: false,
    fade: true,
    infinite: false,
    responsive: [
    {
    breakpoint: 620,
    settings: {
    arrows: true,
    variableWidth: true
    }
    },
    {
    breakpoint: 345,
    settings: {
    arrows: true,
    variableWidth: true
    }
    }
    ]
    });
  6. 0

    También se puede utilizar esta:

    $('.slider').slick({
    //other settings ................
    respondTo: 'slider', //makes the slider to change width depending on the container it is in
    adaptiveHeight: true //makes the height change depending on the height of the element inside
    })

Dejar respuesta

Please enter your comment!
Please enter your name here